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"

获取更详细的用户资料，好比头像、昵称、性别等

结论：使用非静默受权

实现步骤：

一、登录【杏树林公众号】后能够查看到【appId】和【appsecret】信息

二、公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页账号 - 网页受权获取用户基本信息”的配置选项中，修改受权回调域名

三、引导用户进入受权页面赞成受权，此时会调用微信api获取code

四、 受权经过后会带上code参数请求回调地址

五、 后台获取code,再次调用微信接口换取网页受权access_token和openid

六、经过网页受权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...