如果在微信客戶端中訪問(wèn)第三方網(wǎng)頁(yè)稼虎，公眾號(hào)可以通過(guò)微信網(wǎng)頁(yè)授權(quán)機(jī)制，來(lái)獲取用戶基本信息招刨，進(jìn)而實(shí)現(xiàn)業(yè)務(wù)邏輯渡蜻。
我們要進(jìn)行授權(quán)，先要經(jīng)過(guò)用戶授權(quán)（靜默授權(quán)和授權(quán)頁(yè)彈出授權(quán)兩種计济，具體看文檔中scope解析）拿到 code 茸苇，再用 code 去換取網(wǎng)頁(yè)授權(quán) access_token, 使用access_token 去拿到用戶的信息。
1. 準(zhǔn)備工作
關(guān)于微信網(wǎng)頁(yè)授權(quán)的官方文檔說(shuō)明：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
先熟悉下流程沦寂，每個(gè)字段的含義学密，以及注意事項(xiàng)。先把域名和環(huán)境配好传藏。才能正式去獲取授權(quán)腻暮。
2. 處理過(guò)程
1彤守、官方文檔中獲取code參數(shù)示例：
scope 為 snsapi_base
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
scope 為 snsapi_userinfo
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
2、我的項(xiàng)目中只需要拿到 openID哭靖，所以采用的授權(quán)作用域?yàn)?scope = snsapi_base（不彈出授權(quán)頁(yè)面具垫，直接跳轉(zhuǎn)，只能獲取用戶 openid ）试幽。
需要注意的是筝蚕，redirect_uri 填自己部署項(xiàng)目的域名（注意該鏈接一定要使用urlencode 轉(zhuǎn)換一下），不然除了第一個(gè)參數(shù)后面的參數(shù)傳不過(guò)去（微信中其他URL中參數(shù)配置也是這樣）铺坞。
獲取地址的步驟和參數(shù)配置我就不贅述了起宽，文檔里說(shuō)的很清楚。在重定向成功后解析code济榨，這里方法貼一下：
/**
* 根據(jù)參數(shù)名 獲取 URL 路徑中的參數(shù)
* @param {String} name 要讀取的參數(shù)名稱
*/
function getUrlParam (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
let url = window.location.href.split('#')[0]
let search = url.split('?')[1]
if (search) {
var r = search.substr(0).match(reg)
if (r !== null) return unescape(r[2])
return null
} else {
return null
}
}
getUrlParam('code') 調(diào)用一下就能拿到 code 結(jié)果坯沪，然后用這個(gè) code 去調(diào)后臺(tái)的接口讓后臺(tái)去微信后臺(tái)拿openID。
或者用這個(gè)方法：
function GetRequest() {
var url = location.search; //獲取url中"?"符后的字符串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
}
}
return theRequest;
}
console.log( GetRequest());
作者：阿布_0caf
鏈接：http://www.reibang.com/p/b5929770f92d
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有擒滑，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處腐晾。
遇到的問(wèn)題
-
提示 redirect_uri 域名與后臺(tái)配置不一致，參考官方文檔（前面的文檔鏈接）如下片段：
報(bào)錯(cuò) redirect_uri 域名與后臺(tái)配置不一致配置
- 后臺(tái) access_token 拿不到丐一，提示和白名單 IP 有關(guān)藻糖，則參考微信返回報(bào)錯(cuò)，將提示的IP加入白名單钝诚。
3. 測(cè)試方案
公眾號(hào)測(cè)試號(hào)
如果需要先測(cè)試颖御，可以參考我寫(xiě)的公眾號(hào)測(cè)試號(hào)的文章：微信開(kāi)發(fā)系列——使用公眾號(hào)測(cè)試號(hào)測(cè)試公眾號(hào)webAPP-
微信開(kāi)發(fā)者工具
打開(kāi)微信開(kāi)發(fā)者工具，將模式切換到公眾號(hào)網(wǎng)頁(yè)版調(diào)試凝颇，在地址欄中輸入要測(cè)試的地址潘拱，進(jìn)行驗(yàn)證。
微信開(kāi)發(fā)者工具調(diào)試模式
