作者:重庆互联网小徐 发布时间:2024-01-08 浏览:20300 赞(2418) 收藏 评论(0)
公众号H5调用,是指在公众号登录状态下进行的调用。如果公众号未登录则和普通网页一样,没有微信用户体系。
公众号登录需要遵守公众号-网页授权,目前情况下只有 已经微信认证的服务号
才可以完成下述登录鉴权流程。
另外需要注意,使用此方案实施登录,推荐前端页面放置在静态资源存储。目前云托管服务里动态服务提供页面目前已经支持,如果你的服务仍然表现是 Cannot GET /__wx__/oauth
,可以重新部署更新一下服务,使策略生效。
微信云托管服务目前以支持下述转发。 如果你使用自有服务器,或者其他非微信云托管提供公众号WEB分发服务,遇到
Cannot GET /__wx__/oauth
,可以在服务内(自有服务器或其他服务)配置转发规则,转发规则如下:https://domain/__wx__/xxx -> https://servicewechat.com/wxa-qbase/xxx
location /__wx__/ { proxy_pass https://servicewechat.com/wxa-qbase/;}
不耗费任何公网流量,前后端通信走内网;
天然免疫DDoS攻击,仅授权小程序/公众号可访问后端,其他人无法访问;
无视后端服务地域影响,没有跨地域延迟,后端无需多地部署;
无需配置「服务器域名」;
后端可直接获取用户信息。
因此,如果云托管服务只有微信小程序/公众号会调用,建议在服务设置中关闭公网访问。
我们约定H5使用的公众号为A公众号
,如果你希望另外一个 B公众号
或者B小程序
的云托管环境也可以被 A公众号
访问,可以按照如下指引操作:
A公众号
和 B公众号
/B小程序
同主体:需要配置资源复用
A公众号
和 B公众号
/B小程序
不同主体:推荐使用「微信开放平台-第三方平台」方式。
A公众号
和 B公众号
/B小程序
不同主体:将B公众号
/B小程序
视为「其他客户端」,通过公网访问。参考文档其他客户端-访问云托管服务。此方式下,B公众号
/B小程序
无法使用云调用/微信令牌,且需要配置「服务器域名」(使用云托管服务的默认公网域名/自定义域名均可)。
如果你对以上有任何建议和期待,欢迎在官方交流群联系我们。
下述使用代码中,我们提供了一个JS模块 mplogin.min.js ,方便你可以直接调用就可以完成登录初始化,节省了你的接入成本。有一些注意点需要提前知晓:
云托管SDK在初始化前,需要自己登录过程,不兼容原生的登录;所以如果你使用了原生登录,请替换掉。
SDK登录初始化时,页面将经过2-4次跳转,最终在页面栈中增加一级,mplogin模块自动处理回退了,如果想自己处理,可以传noback:true
。
mplogin模块可能不太适应部分框架型项目,会出现循环跳转的情况,有部分冲突,请在上线前在各种平台上充分测试,一般传noback:true
可以解决大部分问题。
mplogin不适合时,可参考此文档前后SDK方法,自行实现整个登录初始化过程。
下述方法每个页面的登录初始化是独立的,如果你的项目页面比较多,推荐使用独立登录页形式,减少初始化步骤,降低完成时间。
首先,在网页中引入如下3个JS文件
# 微信公众号SDK,用于使用前端公众号接口https://res.wx.qq.com/open/js/jweixin-1.6.0.js# 微信云服务SDK,用于调用微信云服务资源https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js# 封装的登录授权模块,用于一步完成授权登录步骤https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.1/mplogin.min.js
如果你因为业务原因,需要自己实现授权步骤,请参考此文档前后SDK方法。
然后在js中使用如下代码:
window.onload = async function () { // 使用登录模块,传入信息开始授权登录过程 // 如果首次登录,页面会经历一系列跳转过程,请不要在登录前加业务处理代码,以免登录被中断。 const result = await window.mplogin({ scope: "snsapi_userinfo", // 必填,登录方式:snsapi_userinfo、snsapi_base appid: 'wxaa01testenvid99', // 必填,公众号appid,将以此appid名义进行请求 // redirect: '', // 选填,授权成功后路由的地址,目标地址应能处理授权参数,不填为当前页面 envid: 'prod-testenvid', // 选填,资源方微信云托管环境,如果传递此参数则会返回初始化的cloud操作对象 resourceAppid: 'wxaa02testenvid99', // 选填,如果是资源复用模式,需要填环境共享下资源方微信账号 signature: window.location.href, // 选填,如果需要微信SDK的API方法,则填写要使用的地址,会返回signature签名对象,envid参数不填则无效。 // region: '' // 选填,环境的地域,可选ap-guangzhou、ap-beijing,不填默认为ap-shanghai // traceUser:false // 选填,默认true,是否在将用户访问记录到用户管理中,非上海地域请设置成false // noback: true // 选填,默认noback:false,此时初次跳转授权后,模块将重新回退加载页面。 // 由于CloudSDK在初次登录时需要多个页面跳转,最终带参返回页面在浏览器页面栈中多了一到两层 // 你可以根据业务自行用history处理上述问题,不需要模块介入则填noback:true }) // 登录完成后,结果会以对象形式展示 /* 返回信息结构: ret: number // 登录的状态 |_ -1: 参数错误,一般是appid缺失和scope类型有误 |_ 0: 成功 |_ 1: 当前页面或redirect页面非https协议,授权机制无法作用,请使用https协议 |_ 2: 系统判定有风险,阻止了此次登录,一般是授权耗时太长,导致过期了,清除缓存刷新可解决问题 |_ 3: 未引入微信WEBSDK,无法初始化cloud操作对象,或者因为环境未授权此账号使用。 msg: string // 登录失败的问题描述 cloud: object[function] // envid参数存在并成功初始化后,返回的操作函数对象 signature: object[string] // envid、signature参数存在并成功初始化后,返回的签名信息 info: string // 如果snsapi_userinfo登录,则会返回用户信息的cloudID,可以使用转换接口获取信息,见下文 */ console.log(result) if (result.ret === 0) { // ret为0时,代表登录已经完成,可以进行业务操作 window.app = result.cloud // result.cloud 返回初始化可操作的cloud函数对象,将其放置全局 // 向云托管服务发起调用 const callres = await window.app.callContainer({ path: '/xxx', // 填入业务自定义路径和参数,根目录,就是 / method: 'POST', // 按照自己的业务开发,选择对应的方法 header: { 'X-WX-SERVICE': 'xxx', // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称) } // 其余参数同 wx.request }) console.log(callres) // 使用微信公众号SDK,开始签名,签名信息在result.signature中 // 监听签名注册成功 wx.ready(function () { // 发起网络类型获取,只是测试,可以替换自己想要的API方法 wx.getNetworkType({ success: function (res) { window.alert('当前设备网络类型:'+res.networkType) } }) }) // 发起签名注册,是一个异步操作,成功会触发wx.ready wx.config({ appId: 'wxaa01testenvid99', // 微信公众号appid timestamp: result.signature.timestamp + '', // 时间戳,从返回result.signature中获取 nonceStr: result.signature.nonceStr, // 随机字符串,从返回result.signature中获取 signature: result.signature.signature, // 签名,从返回result.signature中获取 jsApiList: ['getNetworkType'] // 注册的api列表 }) } else { // ret不为0时,代表登录出现错误,一般出现在开发调试中,正式使用一般只有2-系统拦截错误 // 登录出现问题,打印问题描述 window.alert(result.msg) }}
snsapi_userinfo登录,会返回用户信息的cloudID,可参考此文档获取明文信息
如果你想深入了解 callContainer
的原理,建议阅读这篇文章
重庆互联网项目从2004年开始为各行各业提供互联网发展解决方案,专业从事网站、小程序、微信公众号、APP、电商平台、系统等互联网平台开发,帮助企业实现从传统行业到互联网的完美转型。截止目前,重庆互联网合作的企业遍布全国各地,19年的开发经验和完善的售后服务体系获得合作客户的高度认可!
关注重庆互联网官方公众号,即可获取粉丝专享福利!
欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!