參考文檔
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
參數(shù)描述
redirect_url (回調(diào)地址一般為業(yè)務(wù)首頁)
scope 分兩種 一種為用戶無感知只能獲取到用戶的openid(snsapi_base)
第二種 彈出授權(quán)頁 在用戶同意授權(quán)的情況之下會進入回調(diào)頁面并且獲取到用戶openid和(昵稱祭务,頭像等信息)(snsapi_userinfo)
state 非必須參數(shù)? 我這里用的是UUID
第一步獲取code(前端完成)
//生成uuid的函數(shù)
?guid2()?{
??????function?S4()?{
????????return?(((1?+?Math.random())?*?0x10000)?|?0).toString(16).substring(1);
??????}
????????return?(S4()?+?S4()?+?"-"?+?S4()?+?"-"?+?S4()?+?"-"?+?S4()?+?"-"?+?S4()?+?S4()?+?S4());
????},
獲取code
???code(){
???????let?uuid=?this.guid2
??????????let?redirect_uri=encodeURI("自己的回調(diào)地址")
??????????let?appid="自己的appid"
??????????let?url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=${uuid}#wechat_redirect`
??????????location.href?=?url
??????}
頁面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE酒来。
這樣就能獲取到code?
由于安全性的問題這一步一般是由服務(wù)器發(fā)起(前端發(fā)起會出現(xiàn)跨域問題)
第二步:通過code換取網(wǎng)頁授權(quán)access_token
首先請注意送浊,這里通過code換取的是一個特殊的網(wǎng)頁授權(quán)access_token,與基礎(chǔ)支持中的access_token(該access_token用于調(diào)用其他接口)不同刮萌。公眾號可通過下述接口來獲取網(wǎng)頁授權(quán)access_token。如果網(wǎng)頁授權(quán)的作用域為snsapi_base茅信,則本步驟中獲取到網(wǎng)頁授權(quán)access_token的同時,也獲取到了openid,snsapi_base式的網(wǎng)頁授權(quán)流程即到此為止哲戚。
尤其注意:由于公眾號的secret和獲取到的access_token安全級別都非常高,必須只保存在服務(wù)器艾岂,不允許傳給客戶端顺少。后續(xù)刷新access_token、通過access_token獲取用戶信息等步驟,也必須從服務(wù)器發(fā)起脆炎。
請求方法
獲取code后梅猿,請求以下鏈接獲取access_token: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
參數(shù)說明
參數(shù)是否必須說明
appid是公眾號的唯一標(biāo)識
secret是公眾號的appsecret
code是填寫第一步獲取的code參數(shù)
grant_type是填寫為authorization_code
返回說明
正確時返回的JSON數(shù)據(jù)包如下:
{"access_token":"ACCESS_TOKEN","expires_in":7200,"refresh_token":"REFRESH_TOKEN","openid":"OPENID","scope":"SCOPE"}