作者:重庆互联网小徐 发布时间:2024-01-08 浏览:20703 赞(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年的开发经验和完善的售后服务体系获得合作客户的高度认可!
关注重庆互联网官方公众号,即可获取粉丝专享福利!

欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!