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...