最近有个需求是需要开发一个公众号网页,需要用户授权,后期可能要小程序并行,当然选择uniApp了。
逻辑是这样的,用户从公众号进入页面唤起授权,用户同意,获取到code,用code换取access_token,然后用access_token拉去用户信息,详细步骤见:developers.weixin.qq.com/doc/offiacc…
在uniApp只需要在应用初始化的时候,判断下当前用户是否授权,没有就跳转授权页,有的话继续执行下一步,我是在授权后存储了下用户的userid,方便判断,你也可以加其他更加严谨的判断方法,具体代码如下:
onLaunch: async function(e) {
console.log('App Launch')
const userId = Storage.get('userId');
const code = Storage.get('WXCODE');
const urlcode = getRequestParams()
function getRequestParams() { // 截取url,判断存不存在code
let url = location.href;
let requestParams = {};
if (url.indexOf('?') !== -1) {
let str = url.substr(url.indexOf('?') + 1); // 截取?后面的内容作为字符串
let strs = str.split('&'); // 将字符串内容以&分隔为一个数组
for (let i = 0; i < strs.length; i++) {
requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
// 将数组元素中'='左边的内容作为对象的属性名,'='右边的内容作为对象对应属性的属性值
}
}
console.log(requestParams, '处理后的对象');
return requestParams;
}
if (!code && !urlcode.code &&!userId) {
// 不存在存储的code 不存在地址参数code 不存在userId
// 跳转授权页面,唤起授权
// uni.$u.route('/pages/splash/splash')
const appid = ''
const redirect_uri = "" // 授权后重定向的回调链接地址,需要在公众号里面配置,不能带端口号,不能是ip地址
const scope = "snsapi_userinfo"; // 非静默授权:snsapi_userinfo 静默授权:snsapi_base
document.location.replace(
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`
);
} else if (urlcode.code && !userId) {
// 存在地址参数code 不存在userId
// 使用这个code 重新拉去用户信息,即请求后端接口
// 尤其注意:
// 由于公众号的 secret 和获取到的access_token安全级别都非常高,
// 必须只保存在服务器,不允许传给客户端。后续刷新access_token、
// 通过access_token获取用户信息等步骤,也必须从服务器发起。
}
},