一、问题
为什么要进行网页授权?
首先我们进行网页授权的需求是,获取用户信息、最主要是获取openid唯一值,可以用于用户登录、支付等功能,这时候就需要进行网页授权获取用户的信息以及openid。
二、静默授权/非静默授权
在操作之前可以先提前看看网页授权官方文档
静默授权
- snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid;
- 用来获取进入页面的用户的openid的,并且自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)。
非静默授权
- snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 );
- 用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
三、使用uniapp进行网页授权(h5)
网页授权之前,需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。
1.提前准备
appid:公众号的唯一标识
redirect_uri :授权后重定向的回调链接地址
scope:授权方式
const appid = "xxxxxxxxxxx";//公众号的唯一标识
const redirect_uri = "http://xxx.xxxx.xxx";//授权后重定向的回调链接地址
const scope = "snsapi_userinfo";//非静默授权:snsapi_userinfo 静默授权:snsapi_base
2.授权
在onLaunch生命周期操作
1.不存在openid进行获取code
onLaunch(e){
const openid = uni.getStorageSync(OPENID);
//不存在code
if(!openid){
//获取code
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`);
}
}
2.通过code换取用户信息
执行了第一步的获取code后就会跳转至 redirect_uri/?code=CODE&state=STATE,此时url地址会带有code参数
拿到code后调用就后端的getWxAuthorize接口获取
async onLaunch(e){
const openid = uni.getStorageSync('OPENID');
if((e&&e.query&&e.query.code)&&!openid){
//请求后端接口获取用户的信息
let result = await getWxAuthorize({code:e.query.code,scope:"snsapi_userinfo"});
//保存用户的openid
uni.setStorageSync('OPENID',result.data.openid);
}
}
尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。
3.使用node获取用户信息接口(此处主要是2.中的getWxAuthorize接口)
如果只需要了解前端的步骤,此步骤可以忽略
appid:公众号的唯一标识
secret:公众号的appsecret
大概的流程如下:
const axios = require("axios");
const appid = "xxxxxxxxxxx";//公众号的唯一标识
const secret = "xxxxxxxxxxx";//公众号的appsecret
function setAuthorize(params){
return new Promise(async(resolve)=>{
let userinfo = {};
//通过code换取网页授权access_token
let result = await axios(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${params.code}&grant_type=authorization_code`);
result = result.data;
console.log("access_token结果",result )
if(result.errcode)resolve({code:403,msg:''})
userinfo.openid = result.openid;
// scope=snsapi_userinfo弹出网页授权
if(params.scope=='snsapi_userinfo'){
// 获取用户信息
let info = await axios(`https://api.weixin.qq.com/sns/userinfo?access_token=${result.access_token}&openid=${result.openid}&lang=zh_CN`);
info = info.data;
console.log("用户信息",info)
if(info.errcode)resolve({code:403,msg:''});
userinfo = info;
}
//----------------------------------------
//对数据库进行新增用户或者更新用户信息操作
//----------------------------------------
resolve({code:0,msg:'',data:userinfo})
})
}
3.完整的uniapp代码
async onLaunch(e){
const openid = uni.getStorageSync('OPENID');
if(!(e&&e.query&&e.query.code)!openid){
//不存在code 不存在openid
//获取code
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((e&&e.query&&e.query.code)&&!openid){
//存在code 不存在openid
//请求后端接口获取用户的信息
let result = await getWxAuthorize({code:e.query.code,scope:"snsapi_userinfo"});
//保存用户的openid
uni.setStorageSync('OPENID',result.data.openid);
}
}
可能会存在的问题:
授权后回调页面,此处如果再返回,会跳转到空白页
1.初次授权时先存储页面历史列表的长度
// 第一次进入页面
uni.setStorageSync("historyLength",history.length);
2.在code回调页面之后,进行history.go返回到1.初始页面
const historyLength = uni.getStorageSync("historyLength");
history.go(-(history.length -historyLength));
此处需要留意通过code获取用户信息这个步骤最好放在回到初始页面的时候进行。
更新完整代码
import {getWxAuthorize} from "@/api/wx.js";
export default {
async onLaunch(e){
const openid = uni.getStorageSync('OPENID');
const code = uni.getStorageSync('CODE');
if(!code&&!(e&&e.query&&e.query.code)!openid){
//不存在存储的code 不存在地址参数code 不存在openid
//存储当前初始页面历史列表数量
uni.setStorageSync("historyLength",history.length);
//获取code
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((e&&e.query&&e.query.code)&&!openid){
//存在地址参数code 不存在openid
uni.setStorageSync('CODE',e.query.code);
const historyLength = uni.getStorageSync("historyLength");
//跳转回初始页面
history.go(-(history.length -historyLength));
}else if(code&&!openid){
//存在存储的code 不存在openid
uni.removeStorageSync('CODE');
//请求后端接口获取用户的信息
let result = await getWxAuthorize({code,scope:"snsapi_userinfo"});
//保存用户的openid
uni.setStorageSync('OPENID',result.data.openid);
}
}
}