一、问题
为什么要进行网页授权？
首先我们进行网页授权的需求是，获取用户信息、最主要是获取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.初次授权时先存储页面历史列表的长度
扫描二维码关注公众号，回复：
14834674 查看本文章
// 第一次进入页面
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);
}
}
}