微信公众号网页静默授权/非静默授权（uniapp版）

一、问题为什么要进行网页授权？首先我们进行网页授权的需求是，获取用户信息、最主要是获取openid唯一值，可以用于用户登录、支付等功能，这时候就需要进行网页授权获取用户的信息以及openid。二、静默授权/非静默授权在操作之前可以先提前看看网页授权官方文档静默授权snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid；用来获取进入页面的用户的openid的，并且自动跳转到回调

君归乐

7736人浏览 · 2022-03-19 23:15:24

君归乐 · 2022-03-19 23:15:24 发布

一、问题

为什么要进行网页授权？

首先我们进行网页授权的需求是，获取用户信息、最主要是获取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);
		}
	}
}