微信公眾號授權(quán)登錄的超詳細步驟
更新時間：2022年12月09日 11:43:42 作者：sunly_
微信公眾號授權(quán)登錄的使用最為常見,當(dāng)然只是一些會只有登錄,所以選擇點擊授權(quán)登,下面這篇文章主要給大家介紹了微信公眾號授權(quán)登錄的超詳細步驟,需要的朋友可以參考下
第一步：用戶同意授權(quán)，獲取code
在確保公眾賬號擁有授權(quán)作用域（scope參數(shù)）的權(quán)限的前提下，引導(dǎo)關(guān)注者打開如下頁面：
尤其注意：如果鏈接的參數(shù)順序不對，授權(quán)頁面將無法正常訪問
https://open.weixin.qq.com/connect/oauth2/authorize ?appid=APPID // 公眾號的唯一標(biāo)識 &redirect_uri=REDIRECT_URI // 授權(quán)后重定向的回調(diào)鏈接地址， 使用 urlEncode 對鏈接進行處理 &response_type=code // 返回類型，填寫code &scope=SCOPE // 應(yīng)用授權(quán)作用域，snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息 ） &state=STATE#wechat_redirect // 重定向后會帶上state參數(shù)，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值，最多128字節(jié)。#wechat_redirect 是 無論直接打開還是做頁面302重定向時候，必須帶此參數(shù) 若提示“該鏈接無法訪問”，請檢查參數(shù)是否填寫錯誤，是否擁有scope參數(shù)對應(yīng)的授權(quán)作用域權(quán)限。
參考鏈接(請在微信客戶端中打開此鏈接體驗):
尤其注意：跳轉(zhuǎn)回調(diào)redirect_uri，應(yīng)當(dāng)使用https鏈接來確保授權(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)，頁面將跳轉(zhuǎn)至
redirect_uri/?code=CODE&state=STATE。
第二步：通過code換取網(wǎng)頁授權(quán)access_token
公眾號可通過下述接口來獲取網(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 // 公眾號的唯一標(biāo)識
&secret=SECRET // 公眾號的appsecret
&code=CODE // 填寫第一步獲取的code參數(shù)
&grant_type=authorization_code // 填寫為authorization_code
// 返回說明
// 正確時返回的JSON數(shù)據(jù)包如下：
{
"access_token":"ACCESS_TOKEN", // 網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同
"expires_in":7200, // access_token接口調(diào)用憑證超時時間，單位（秒）
"refresh_token":"REFRESH_TOKEN", // 用戶刷新access_token
"openid":"OPENID", // 用戶唯一標(biāo)識
"scope":"SCOPE" // 用戶授權(quán)的作用域，使用逗號（,）分隔
}
第三步：刷新access_token（如果需要）
access_token擁有較短的有效期，當(dāng)access_token超時后，可以使用refresh_token進行刷新，refresh_token有效期為30天，當(dāng)refresh_token失效之后，需要用戶重新授權(quán)。
// 請求方法
// 獲取第二步的refresh_token后，請求以下鏈接獲取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token
?appid=APPID // 公眾號的唯一標(biāo)識
&grant_type=refresh_token // 填寫為refresh_token
&refresh_token=REFRESH_TOKEN // 填寫通過access_token獲取到的refresh_token參數(shù)
//返回說明
//正確時返回的JSON數(shù)據(jù)包如下：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
第四步：拉取用戶信息(需scope為 snsapi_userinfo)
如果網(wǎng)頁授權(quán)作用域為snsapi_userinfo，則此時開發(fā)者可以通過access_token和openid拉取用戶信息了。
//請求方法
//http：GET（請使用https協(xié)議）
https://api.weixin.qq.com/sns/userinfo
?access_token=ACCESS_TOKEN // 網(wǎng)頁授權(quán)接口調(diào)用憑證,注意：此access_token與基礎(chǔ)支持的access_token不同
&openid=OPENID // 用戶的唯一標(biāo)識
&lang=zh_CN // 國家地區(qū)語言版本
//返回說明
//正確時返回的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"
}
附：檢驗授權(quán)憑證（access_token）是否有效
// 請求方法 // http：GET（請使用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頁面獲取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)于微信公眾號授權(quán)登錄的文章就介紹到這了,更多相關(guān)微信公眾號授權(quán)登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄猨s生成隨機數(shù)(指定范圍)的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了js處理表格對table進行修飾的一些小技巧,需要的朋友可以參考下2014-05-05
JavaScript滾動條屬性scrollTop和scrollHeight
在開發(fā)中我們常常會用到判斷滾動條是否觸底的邏輯,我一般都會在網(wǎng)上搜一段代碼,這段代碼有用到scrollTop、clientHeight、 scrollHeight,這篇文章主要給大家介紹了關(guān)于JavaScript滾動條屬性scrollTop和scrollHeight的相關(guān)資料,需要的朋友可以參考下2023-11-11
javascript實現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動的方法
這篇文章主要介紹了javascript實現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動的方法,實例分析了javascript定時函數(shù)及頁面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JS中簡單的實現(xiàn)像C#中using功能（有源碼下載）
JS中簡單的實現(xiàn)像C#中using功能（有源碼下載）...2007-01-01
這篇文章主要介紹了JavaScript html5繪制時鐘效果的相關(guān)資料，使用HTML5的canvas標(biāo)簽和Javascript腳本，模擬顯示了一個時鐘，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript時間日期操作實例小結(jié)【5個示例】
這篇文章主要介紹了JavaScript時間日期操作,結(jié)合5個具體實例形式分析了javascript針對日期時間的各種常見操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS三級聯(lián)動代碼格式實例詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
用javascript動態(tài)注釋掉HTML代碼...2006-09-09
JS操作select下拉框動態(tài)變動(創(chuàng)建/刪除/獲取)
動態(tài)創(chuàng)建及刪除select、添加及刪除選項option、獲得選項option的值、獲得選項option的文本等等，感興趣的朋友可以參考下哈2013-06-06