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

微信登录：

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

微信授权登录可分为：

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

公司项目登录场景描述：
只限于在微信客户端打开的网页应用，在微信消息列表直接给好友发送一个网页的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：

文档：微信网页授权

https://mp.weixin.qq.com/wiki...

参考：
https://juejin.im/post/5b5c42...
https://juejin.im/post/5ad54e...