【原】微信支付之openid獲取

行者的靈感 2021-09-22

展開全文

一、說明

如果用戶在微信客戶端中訪問第三方網(wǎng)頁,，公眾號可以通過微信網(wǎng)頁授權(quán)機(jī)制,，來獲取用戶基本信息，進(jìn)而實現(xiàn)支付等業(yè)務(wù)邏輯,。

1.網(wǎng)頁授權(quán)的兩種scope的區(qū)別

· 以snsapi_base為scope發(fā)起的網(wǎng)頁授權(quán),，是用來獲取進(jìn)入頁面的用戶的openid的，并且是靜默授權(quán)并自動跳轉(zhuǎn)到回調(diào)頁的,。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

· 以snsapi_userinfo為scope發(fā)起的網(wǎng)頁授權(quán),，是用來獲取用戶的基本信息的。但這種授權(quán)需要用戶手動同意,。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

1.參數(shù)說明

參數(shù) 是否必須說明
appid 是公眾號的唯一標(biāo)識
redirect_uri 是授權(quán)后重定向的回調(diào)鏈接地址,，請使用 urlEncode 對鏈接進(jìn)行處理
response_type 是返回類型，請?zhí)顚慶ode
scope 是應(yīng)用授權(quán)作用域,，snsapi_base （不彈出授權(quán)頁面,，直接跳轉(zhuǎn)，只能獲取用戶openid）,，snsapi_userinfo （彈出授權(quán)頁面,，可通過openid拿到昵稱、性別,、所在地,。并且，即使在未關(guān)注的情況下,，只要用戶授權(quán),，也能獲取其信息）
state 否重定向后會帶上state參數(shù)，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值,，最多128字節(jié)
#wechat_redirect 是無論直接打開還是做頁面302重定向時候,，必須帶此參數(shù)
更多內(nèi)容參考微信開發(fā)文檔：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

二、實現(xiàn)（只討論snsapi_base方式獲取openid）

1.第一步,，重定向獲取code（前端頁面）

· 以當(dāng)前打開頁面重定向到它本身為例

    // 儲存記錄 code 值var code;// 記錄用戶的 openidvar openid;// 獲取 code 的重定向鏈接var redirect_uri;// 公眾號 idvar wx_appid;// 組合后的獲取 code 的微信鏈接var wx_code_uri;// 本頁重定向鏈接var me_uri;    //窗口導(dǎo)入事件window.onload = function () {
        code = getUrlParam('code') || sessionStorage.code;
        openid = sessionStorage.openid;
        redirect_uri = encodeURIComponent('http:///');
        wx_appid = 'wx9eca9c23127678f1';
        wx_code_uri = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + wx_appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
        me_uri = 'http:///';document.getElementById("dialogs").innerText = wx_code_uri;var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {//判斷是否為微信瀏覽器內(nèi)getOpenIDAndCode();
        } else {//其他瀏覽器}
    }

· 如果用戶同意授權(quán),，頁面將跳轉(zhuǎn)至：

 redirect_uri鏈接 + /?code=CODE&state=STATE

如：http:///?code=CODE&state=STATE

· 頁面打開時，將通過 getUrlParam('code')方法或瀏覽器緩存sessionStorage獲取code值,， getUrlParam()方法如下：

/**
     * 提取鏈接中的字段值
     * @param {String} name 待搜索的字段名
     * @param {String} url 被檢索的鏈接,，默認(rèn)為當(dāng)前網(wǎng)頁路徑
     * @param {Boolean} raw 是否直接返回取得的結(jié)果（即不進(jìn)行解碼操作）
     * @return 對應(yīng)的字段值，如果該值沒有,，則返回空串
     */function getUrlParam(name, url, raw) {if (!url) {
            url = window.location.search;
        }if (!name || !url) {return '';
        }var param = '';var reg = new RegExp('(^|&|\\?)' + name + '=([^&#]*)(&|$|#)', 'i');var ret = url.match(reg);if (ret) {
            param = raw ? ret[2] : decodeURIComponent(ret[2]);
        }return param;
    };

· 通過 getOpenIDAndCode() 方法,，判斷瀏覽器緩存sessionStorage內(nèi)是否已經(jīng)存在code或openid，如果存在code,，那么通過post請求將code傳給后端接口換取openid等數(shù)據(jù),，本例使用的自定義post方法為 getOpenIDpost()

//判斷openID和codefunction getOpenIDAndCode() {if (!openid) {if (!code) {window.location.replace(wx_code_uri).then(getOpenIDpost());
            } else if (!sessionStorage.code) {
                sessionStorage.code = code;window.location.replace(me_uri).then(getOpenIDpost());
            } else {
                getOpenIDpost();
            }
        }
    }

2.第二步，通過code換取網(wǎng)頁授權(quán)openid,、access_token等數(shù)據(jù)（服務(wù)器端）

· 獲取code后,，請求以下鏈接獲取openid、access_token等：

https://api.weixin.qq.com/sns/oauth2/access_token?appid={公眾號的APPID}&secret={公眾號的32位appsecret}&code={前端傳入的CODE值}&grant_type=authorization_code

· 后端post接口代碼示例如下：

// 獲取 openidapp.post('/getopenid', function (req, res) {const code = req.body.code;
    console.log(code);const access_token_url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.app_id}&secret=${config.app_secret}&code=${code}&grant_type=authorization_code`;request.post({url: access_token_url}, function (error, response, body) {if (error) {
            res.json({error: body});
        } else if (response.statusCode === 200) {if (body.errcode === 40029) {
                res.json({error: body});
            } else {
                body = JSON.parse(body);
                res.json({data: body});
            }
        } else {
            res.json({error: -1});
        }
    });
});

正確返回值body內(nèi)容如下：

{  "access_token":"ACCESS_TOKEN",//網(wǎng)頁授權(quán)接口調(diào)用憑證
  "expires_in":7200,            //access_token接口調(diào)用憑證超時時間,，單位（秒）
  "refresh_token":"REFRESH_TOKEN",//用戶刷新access_token
  "openid":"OPENID",//用戶唯一標(biāo)識
  "scope":"SCOPE" //用戶授權(quán)的作用域,，使用逗號（,）分隔}