微信公眾號(hào)授權(quán)登錄的超詳細(xì)步驟
第一步：用戶同意授權(quán)，獲取code
在確保公眾賬號(hào)擁有授權(quán)作用域（scope參數(shù)）的權(quán)限的前提下，引導(dǎo)關(guān)注者打開(kāi)如下頁(yè)面：
尤其注意：如果鏈接的參數(shù)順序不對(duì)，授權(quán)頁(yè)面將無(wú)法正常訪問(wèn)
https://open.weixin.qq.com/connect/oauth2/authorize ?appid=APPID // 公眾號(hào)的唯一標(biāo)識(shí) &redirect_uri=REDIRECT_URI // 授權(quán)后重定向的回調(diào)鏈接地址， 使用 urlEncode 對(duì)鏈接進(jìn)行處理 &response_type=code // 返回類型，填寫(xiě)code &scope=SCOPE // 應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁(yè)面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁(yè)面，可通過(guò)openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息 ） &state=STATE#wechat_redirect // 重定向后會(huì)帶上state參數(shù)，開(kāi)發(fā)者可以填寫(xiě)a-zA-Z0-9的參數(shù)值，最多128字節(jié)。#wechat_redirect 是 無(wú)論直接打開(kāi)還是做頁(yè)面302重定向時(shí)候，必須帶此參數(shù) 若提示“該鏈接無(wú)法訪問(wèn)”，請(qǐng)檢查參數(shù)是否填寫(xiě)錯(cuò)誤，是否擁有scope參數(shù)對(duì)應(yīng)的授權(quán)作用域權(quán)限。
參考鏈接(請(qǐng)?jiān)谖⑿趴蛻舳酥写蜷_(kāi)此鏈接體驗(yàn)):
尤其注意：跳轉(zhuǎn)回調(diào)redirect_uri，應(yīng)當(dāng)使用https鏈接來(lái)確保授權(quán)code的安全性。
// 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
用戶同意授權(quán)后
如果用戶同意授權(quán)，頁(yè)面將跳轉(zhuǎn)至
redirect_uri/?code=CODE&state=STATE。
第二步：通過(guò)code換取網(wǎng)頁(yè)授權(quán)access_token
公眾號(hào)可通過(guò)下述接口來(lái)獲取網(wǎng)頁(yè)授權(quán)access_token。如果網(wǎng)頁(yè)授權(quán)的作用域?yàn)閟nsapi_base，則本步驟中獲取到網(wǎng)頁(yè)授權(quán)access_token的同時(shí)，也獲取到了openid，snsapi_base式的網(wǎng)頁(yè)授權(quán)流程即到此為止。
尤其注意：由于公眾號(hào)的secret和獲取到的access_token安全級(jí)別都非常高，必須只保存在服務(wù)器，不允許傳給客戶端。后續(xù)刷新access_token、通過(guò)access_token獲取用戶信息等步驟，也必須從服務(wù)器發(fā)起。
// 請(qǐng)求方法
// 獲取code后，請(qǐng)求以下鏈接獲取access_token：
https://api.weixin.qq.com/sns/oauth2/access_token
?appid=APPID // 公眾號(hào)的唯一標(biāo)識(shí)
&secret=SECRET // 公眾號(hào)的appsecret
&code=CODE // 填寫(xiě)第一步獲取的code參數(shù)
&grant_type=authorization_code // 填寫(xiě)為authorization_code
// 返回說(shuō)明
// 正確時(shí)返回的JSON數(shù)據(jù)包如下：
{
"access_token":"ACCESS_TOKEN", // 網(wǎng)頁(yè)授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同
"expires_in":7200, // access_token接口調(diào)用憑證超時(shí)時(shí)間，單位（秒）
"refresh_token":"REFRESH_TOKEN", // 用戶刷新access_token
"openid":"OPENID", // 用戶唯一標(biāo)識(shí)
"scope":"SCOPE" // 用戶授權(quán)的作用域，使用逗號(hào)（,）分隔
}
第三步：刷新access_token（如果需要）
access_token擁有較短的有效期，當(dāng)access_token超時(shí)后，可以使用refresh_token進(jìn)行刷新，refresh_token有效期為30天，當(dāng)refresh_token失效之后，需要用戶重新授權(quán)。
// 請(qǐng)求方法
// 獲取第二步的refresh_token后，請(qǐng)求以下鏈接獲取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token
?appid=APPID // 公眾號(hào)的唯一標(biāo)識(shí)
&grant_type=refresh_token // 填寫(xiě)為refresh_token
&refresh_token=REFRESH_TOKEN // 填寫(xiě)通過(guò)access_token獲取到的refresh_token參數(shù)
//返回說(shuō)明
//正確時(shí)返回的JSON數(shù)據(jù)包如下：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
第四步：拉取用戶信息(需scope為 snsapi_userinfo)
如果網(wǎng)頁(yè)授權(quán)作用域?yàn)閟nsapi_userinfo，則此時(shí)開(kāi)發(fā)者可以通過(guò)access_token和openid拉取用戶信息了。
//請(qǐng)求方法
//http：GET（請(qǐng)使用https協(xié)議）
https://api.weixin.qq.com/sns/userinfo
?access_token=ACCESS_TOKEN // 網(wǎng)頁(yè)授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同
&openid=OPENID // 用戶的唯一標(biāo)識(shí)
&lang=zh_CN // 國(guó)家地區(qū)語(yǔ)言版本
//返回說(shuō)明
//正確時(shí)返回的JSON數(shù)據(jù)包如下：
{
"openid": "OPENID",
"nickname": NICKNAME,
"sex": 1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2" ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
附：檢驗(yàn)授權(quán)憑證（access_token）是否有效
// 請(qǐng)求方法 // http：GET（請(qǐng)使用https協(xié)議） https://api.weixin.qq.com/sns/auth ?access_token=ACCESS_TOKEN &openid=OPENID
示例：
<script>
// 1、授權(quán)
export default {
onLoad() {
this.wx_login();
},
methods: {
//微信登錄
wx_login(){
let appId= 'wxe1*******2d0d3d';
let Host = encodeURIComponent('https://ceshi.com/pages/guide/getOpenid');
console.log(Host);
window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?
appid=${appId}
&redirect_uri=${Host}
&response_type=code
&scope=snsapi_userinfo
&state=STATE#wechat_redirect`
},
},
}
// getOpenid頁(yè)面獲取openid
export default {
onLoad(option) {
var arr = window.location.search;
var code = arr.split('=')[1].split('&')[0];
this.$http.post("/api/WxPay/getOpenid",{
code:code
}).then(res=>{
if(res.code == 1){
uni.setStorageSync('openid', res.data.openid);
this.$goBack(3,'/pages/index/index')
}
})
},
}
</script>
總結(jié)
到此這篇關(guān)于微信公眾號(hào)授權(quán)登錄的文章就介紹到這了,更多相關(guān)微信公眾號(hào)授權(quán)登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要介紹了js處理表格對(duì)table進(jìn)行修飾的一些小技巧,需要的朋友可以參考下2014-05-05
JavaScript滾動(dòng)條屬性scrollTop和scrollHeight
在開(kāi)發(fā)中我們常常會(huì)用到判斷滾動(dòng)條是否觸底的邏輯,我一般都會(huì)在網(wǎng)上搜一段代碼,這段代碼有用到scrollTop、clientHeight、 scrollHeight,這篇文章主要給大家介紹了關(guān)于JavaScript滾動(dòng)條屬性scrollTop和scrollHeight的相關(guān)資料,需要的朋友可以參考下2023-11-11
javascript實(shí)現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動(dòng)的方法,實(shí)例分析了javascript定時(shí)函數(shù)及頁(yè)面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JS中簡(jiǎn)單的實(shí)現(xiàn)像C#中using功能（有源碼下載）
JS中簡(jiǎn)單的實(shí)現(xiàn)像C#中using功能（有源碼下載）...2007-01-01
JavaScript html5 canvas繪制時(shí)鐘效果
這篇文章主要介紹了JavaScript html5繪制時(shí)鐘效果的相關(guān)資料，使用HTML5的canvas標(biāo)簽和Javascript腳本，模擬顯示了一個(gè)時(shí)鐘，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript時(shí)間日期操作實(shí)例小結(jié)【5個(gè)示例】
這篇文章主要介紹了JavaScript時(shí)間日期操作,結(jié)合5個(gè)具體實(shí)例形式分析了javascript針對(duì)日期時(shí)間的各種常見(jiàn)操作技巧,需要的朋友可以參考下2018-12-12
JS三級(jí)聯(lián)動(dòng)代碼格式實(shí)例詳解
這篇文章主要介紹了JS三級(jí)聯(lián)動(dòng)代碼格式實(shí)例詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
用javascript動(dòng)態(tài)注釋掉HTML代碼
用javascript動(dòng)態(tài)注釋掉HTML代碼...2006-09-09
JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
動(dòng)態(tài)創(chuàng)建及刪除select、添加及刪除選項(xiàng)option、獲得選項(xiàng)option的值、獲得選項(xiàng)option的文本等等，感興趣的朋友可以參考下哈2013-06-06