微信公眾號授權(quán)登錄的超詳細步驟

更新時間：2022年12月09日 11:43:42 作者：sunly_

微信公眾號授權(quán)登錄的使用最為常見,當然只是一些會只有登錄,所以選擇點擊授權(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 // 公眾號的唯一標識
&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)當使用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 // 公眾號的唯一標識
&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", // 用戶唯一標識
  "scope":"SCOPE"  // 用戶授權(quán)的作用域，使用逗號（,）分隔
}

第三步：刷新access_token（如果需要）

access_token擁有較短的有效期，當access_token超時后，可以使用refresh_token進行刷新，refresh_token有效期為30天，當refresh_token失效之后，需要用戶重新授權(quán)。

// 請求方法
// 獲取第二步的refresh_token后，請求以下鏈接獲取access_token： 
https://api.weixin.qq.com/sns/oauth2/refresh_token
?appid=APPID // 公眾號的唯一標識
&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 // 用戶的唯一標識
&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>