參考官方文檔的介紹，網(wǎng)頁(yè)授權(quán)流程分為四步：
- 引導(dǎo)用戶進(jìn)入授權(quán)頁(yè)面同意授權(quán)拆内，獲取 code兄裂；
- 通過(guò) code 換取網(wǎng)頁(yè)授權(quán) access_token（與基礎(chǔ)支持中的 access_token 不同）夫啊；
- 如果需要椅寺，開(kāi)發(fā)者可以刷新網(wǎng)頁(yè)授權(quán) access_token搜立，避免過(guò)期闪朱；
- 通過(guò)網(wǎng)頁(yè)授權(quán) access_token 和 openid 獲取用戶基本信息（支持 unionid 機(jī)制）怕篷。
網(wǎng)頁(yè)授權(quán)有兩種 scope，以 snsapi_base 為 scope 發(fā)起的網(wǎng)頁(yè)授權(quán)友鼻，是用來(lái)獲取進(jìn)入頁(yè)面的用戶 openid傻昙，同時(shí)是靜默授權(quán)并自動(dòng)跳轉(zhuǎn)到回調(diào)頁(yè)的闺骚。用戶感知的就是直接進(jìn)入了回調(diào)頁(yè)（往往是業(yè)務(wù)頁(yè)面），具體步驟如下：
第一步：用戶同意授權(quán)妆档，獲取 code
訪問(wèn)頁(yè)面的時(shí)候僻爽，重定向到授權(quán)頁(yè)面（https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect），授權(quán)完成頁(yè)面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE贾惦。
第二步：通過(guò) code 換取網(wǎng)頁(yè)授權(quán) access_token
本步驟中獲取到網(wǎng)頁(yè)授權(quán) access_token 的同時(shí)胸梆，也獲取到了 openid。
注意：由于公眾號(hào)的 secret 和獲取到的 access_token 安全級(jí)別都非常高须板，必須只保存在服務(wù)端碰镜，不允許傳給客戶端。因此习瑰，服務(wù)器發(fā)起獲取 openid 的接口：
window.onload = function() {
var localUrl = window.location.href;
var code = getQueryString('code');
var APPID = 'xxxxxxx';
if(code == null || code == '' ) {
var scopeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=" + encodeURIComponent(localUrl) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
window.location.href = scopeUrl;
} else {
console.log(code)
// 調(diào)用服務(wù)端的通過(guò) code 獲取 openid 接口
getWebOpenId(code).then(function(res) {
console.log(res.result.openid)
}); }
}
第三步：服務(wù)端獲取 openid
相關(guān)代碼如下所示：
// appid 和 appsecret 存儲(chǔ)在服務(wù)端
var appId = config.appId,
appSecret = config.appSecret;
// 公眾號(hào)授權(quán)網(wǎng)頁(yè)通過(guò) code 獲取 openid
router.post('/getCode', function(req, res) {
console.log(req.body);
var url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appId + '&secret='+ appSecret +'&code=' + req.body.code + '&grant_type=authorization_code';
axios.get(url)
.then(function(response) {
console.log('response', response.data);
res.json(response.data)
})
.catch(function(err) {
console.log(err)
res.json(err)
})
.then(function() {
})
})
獲取的 openid 如下圖所示：
