H5/web app/第三方网页微信授权登录调研

3次阅读

共计 2159 个字符，预计需要花费 6 分钟才能阅读完成。

微信登录：
用户可使用微信帐号快速登录你的网站，同一用户使用微信登录你的不同应用和公众帐号，会对应同一个 UnionID，以便进行不同业务间的帐号统一
微信授权登录可分为：

扫码登录（一般用于 PC 网页）- 微信开放平台
跳转 APP 授权登录（第三方 APP 使用）- 微信开放平台
微信内置浏览器内登录（一般用于移动端网站，公众号登录）- 微信公众平台
微信小程序内微信登录（小程序内部）- 微信公众平台

公司项目登录场景描述：只限于在微信客户端打开的网页应用，在微信消息列表直接给好友发送一个网页的 URL，用户收到直接点击 URL 直接打开页面
结论：云学院为移动端网站，使用第三种登录方式，微信网页授权
网页授权的两种方式：
1. 静默授权：
用户感知的就是直接进入了回调页（往往是业务页面）
req.scope = @”snsapi_base”
只能获取 access_token 和 openID
2. 非静默授权：
需要用户手动同意，并且由于用户同意过
req.scope = @”snsapi_userinfo”
获取更详细的用户资料，比如头像、昵称、性别等
结论：使用非静默授权
实现步骤：
1、登陆【杏树林公众号】后可以查看到【appId】和【appsecret】信息
2、公众平台官网中的“开发 – 接口权限 – 网页服务 – 网页帐号 – 网页授权获取用户基本信息”的配置选项中，修改授权回调域名

3、引导用户进入授权页面同意授权，此时会调用微信 api 获取 code
4、授权通过后会带上 code 参数请求回调地址
5、后台获取 code, 再次调用微信接口换取网页授权 access_token 和 openid
6、通过网页授权 access_token 和 openid 获取用户基本信息（如果有 unionid 还会获取到 unionid 参数）
示例代码：
async function wxAuth(req, res) {
// 解析 querystring 获取 URL 中的 code 值
let code = req.query.code;
// 通过拿到的 code 和 appID、app_serect 获取返回信息
let resObj = await getAccessToken(code);
// 解析得到 access_token 和 open_id
let access_token = resObj.access_token;
let open_id = resObj.openid;
// 通过上一步获取的 access_token 和 open_id 获取 userInfo 即用户信息
let userObj = await getUserInfo(access_token, open_id);
console.log(userObj);
res.render(path.resolve(__dirname,’userInfo.ejs’), {userObj: userObj});
// res.send(userObj);}

// 通过拿到的 code 和 appID、app_serect 获取 access_token 和 open_id
function getAccessToken(code) {
return new Promise((resolve, reject) => {
let getAccessUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;
https.get(getAccessUrl, (res) => {
var resText = “”;
res.on(‘data’, (d) => {
resText += d;
});
res.on(‘end’, () => {
var resObj = JSON.parse(resText);
resolve(resObj);
});
}).on(‘error’, (e) => {
console.error(e);
});
});
}
// 通过上一步获取的 access_token 和 open_id 获取 userInfo 即用户信息
function getUserInfo(access_token, open_id) {
return new Promise((resolve, reject) => {
let getUserUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;
https.get(getUserUrl, (res) => {
var resText = “”;
res.on(‘data’, (d) => {
resText += d;
});
res.on(‘end’, () => {
var userObj = JSON.parse(resText);
resolve(userObj);
});
}).on(‘error’, (e) => {
console.error(e);
});
})}
demo：