在微信中訪問一些HTML5網頁時，咱們常看到是否容許訪問用戶公開信息的提示。若是用戶點擊「容許」，網頁就能夠獲取到用戶的頭像以及暱稱等信息。html
若是把在網址拷貝出來，而後在非微信環境打開，就會看到「請在微信客戶端中打開鏈接」的提示。前端
一直很好奇這個是怎麼實現的，是微信提供的功能呢仍是開發人員本身實現的？從頁面展現的效果來看，應該是微信提供的功能。若是是微信提供的功能，該怎麼樣實現這樣的效果呢？恰好咱們有個H5網頁須要獲取用戶的暱稱信息，研究了下微信的相關文檔。後端
前置要求
首先，獲取用戶的暱稱屬於微信H5開發中的「高級功能」，所謂「高級功能」，就是微信收費的內容。開發人員必須進行公衆號認證纔可使用。因此想玩轉本文，先向微信上繳300大洋吧。很崩潰是否是？沒辦法，微信就是這麼強大。認證成功後，就能夠調用相關接口獲取用戶的基本信息了。相關文檔能夠直接訪問 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842api
頁面受權
在前文咱們看到過一個微信受權提示的頁面，這個頁面實際上是微信自動彈出的。當用戶點擊「容許」後，應用才能夠獲取到用戶的基本信息。那麼問題來了，怎麼讓微信彈出這個受權提示頁面呢？其實很簡單，只須要訪問微信特定的一個網址便可。以下代碼所示：安全
const redirectToAuthPage = () => {
const callbackURL = encodeURIComponent(`https://pk.migu.cn/pk/wechat/getUserInfoCallback`)
const state = encodeURIComponent('/pk/page/teachersday/index.html')
const wechatId = 'wx116c7ab3d519b006'
const redirectURI = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`
window.location.href = redirectURI
}
也就是說只要咱們訪問諸如: 服務器
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx116c7ab3d519b006&redirect_uri=https://pk.migu.cn/pk/wechat/getUserInfoCallback&response_type=code&scope=snsapi_userinfo&state=/abc等地址，微信就會自動彈出受權提示。若是不是在微信客戶端內部訪問，就提示「請在微信客戶端中打開鏈接」。微信
這裏網址裏面有幾個須要主要的參數：app
appid 開發者ID，公衆號的惟一標識，在微信公衆號裏面左側菜「基本配置」裏面能夠看到curl
redirect_uri 受權後重定向的回調連接地址，官方要求用urlEncode對連接進行處理flex
state 重定向後會帶上state參數，最多128字節
前兩個參數是必須填寫的，最後一個能夠忽略。可是開發時state會頗有用，能夠傳入一些輔助信息。好比在咱們的頁面中，受權成功後咱們會經過state來讓後臺進行頁面跳轉。
回到上面那個URL地址，當用戶在微信裏面訪問後，首先會彈出受權提示，若是用戶點擊「容許」，頁面會自動重定向到
https://pk.migu.cn/pk/wechat/getUserInfoCallback?code=xxxxxx&state=/abc。
注意這裏的code，它用於在微信中獲取access_token，經過access_token調用其餘API才能夠獲取用戶的基本信息
經過code換取access_token
拿到code後，能夠經過code來換取access_token, 以下所示：
curl https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx116c7ab3d519b006&secret=SECRET_CODE&code=xxxxxx&grant_type=authorization_code
secret爲開發者密鑰，第一次建立密鑰時微信會提示咱們保存。
返回以下結果：
{
"access_token":"13_wNUT-XFU2d4TYuBRt98",
"expires_in":7200,
"refresh_token":"13__46yGQMYzwe2",
"openid":"og7kR1WU05l0hUYpGtQAZNHYJSzE",
"scope":"snsapi_userinfo"
}
經過access_token獲取用戶基本信息
拿到access_token後，就能夠獲取用戶的基本信息了
https://api.weixin.qq.com/sns/userinfo?access_token=13_wNUT-XFU2d4TYuBRt98&openid=og7kR1WU05l0hUYpGtQAZNHYJSzE&lang=zh_CN
返回以下結果：
{
"openid":"og7kR1WU05l0hUYpGtQAZNHYJSzE",
"nickname":"石頭",
"sex":1,
"language":"zh_CN",
"city":"成都",
"province":"四川",
"country":"中國",
"headimgurl": "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[]
}
跳轉到H5頁面
後臺獲取到用戶的暱稱後，能夠經過讀取redirect_uri裏面的state參數來跳轉到前端H5頁面，好比跳轉到
https://pk.migu.cn/test/pk/page/teachersday/index.html?nickName=石頭，前端頁面就能夠很方便的獲取到用戶的暱稱信息。
注意事項
公衆號必需要經過認證，不然沒法獲取用戶基本信息。
公衆號須要到「安全中心」設置好白名單，好比後端服務器的外網IP地址，不然無法訪問微信接口
公衆號須要設置好
JS接口安全域名和回調域名
以上都配置OK了，才能夠正常的調用微信的JS SDK以及獲取用戶的公開基本信息
針對後臺開發同窗，經過code換取的access_token是有時效限制的，大約2個小時會失效。須要經過接口返回的refresh_token來獲取新的access_token。refresh_token的有效期爲30天。以下所示：
curl https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=wx116c7ab3d519b006&grant_type=refresh_token&refresh_token=13__46yGQMYzwe2
返回以下數據：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"og7kR1WU05l0hUYpGtQAZNHYJSzE",
"scope":""
}
同時，微信還提供了一個API接口來校驗access_token是否有效。
curl https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=og7kR1WU05l0hUYpGtQAZNHYJSzE
若是access_token有效，則返回以下數據，不然會提示錯誤信息：
{
"errcode":0,
"errmsg":"ok"
}
若是數據不合法，會返回其餘信息：
{
"errcode":40013,
"errmsg":"invalid appid"
}
總結
本篇小文主要介紹了在微信HTML5網頁中經過受權提示的方式獲取用戶的基本信息。該功能須要微信公衆號進行認證方可以使用，同時須要配置好相應的白名單IP和回調域名。但願對你們的開發有所幫助。
看完本文有收穫？點贊、分享是最大的支持！
本文分享自微信公衆號 - Laravel技術社區（Laravel360）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。