準(zhǔn)備工作

微信掃碼登錄基于OAu。首先，微信開放平臺(tái)必須首先注冊(cè)開發(fā)者賬戶和審計(jì)的網(wǎng)站應(yīng)用程序。然后你就可以獲得自己網(wǎng)站應(yīng)用程序的域名，比如AppID和應(yīng)用程序秘密，還有www.xxx.com。

//注冊(cè)過程可以按照官網(wǎng)的要求填寫資料。

注冊(cè)官網(wǎng)地址：

批準(zhǔn)流程說明

用戶點(diǎn)擊網(wǎng)頁上方的微信掃描碼登錄時(shí)，我們會(huì)自發(fā)跳轉(zhuǎn)到微信指定的URL，顯示一個(gè)隊(duì)列(QR)碼用戶使用微信清理并授權(quán)登錄，微信指定的URL再次跳轉(zhuǎn)到我們?cè)O(shè)置的域名URL，導(dǎo)入代碼，獲取代碼參數(shù)和AppID、AppSecret等，通過API獲取accet

具體實(shí)現(xiàn)

具體實(shí)施之前，請(qǐng)確保www.xxx.com域名設(shè)置了網(wǎng)頁許可證。特別是注冊(cè)開發(fā)人員賬戶后，在賬戶背景下根據(jù)需要設(shè)置即可。

第一步：請(qǐng)求代碼

用戶點(diǎn)擊微信掃碼登錄，積極跳轉(zhuǎn)。redirect _ uri=；response _ type=code scope=snsapi _ log instate=state # we chat _ redirect

1、注冊(cè)APPID時(shí)獲取。

2、redirect_uri是用戶掃描代碼，同意許可后在微信這邊主動(dòng)跳轉(zhuǎn)的地址，返回這個(gè)地址后，背景中會(huì)有代碼。此redirect_uri必須執(zhí)行一次UrlEncode

3、response_type、scope是固定標(biāo)記法

4.state相當(dāng)于前三。從微信那邊跳起來，就會(huì)原封不動(dòng)地拿回來

最終回到我們域名的地址是這樣的。State=STATE 微信掃描碼效果圖

步驟2:通過代碼獲取access _ code

前臺(tái)收到代碼后，調(diào)用后臺(tái)API，然后在后臺(tái)請(qǐng)求微信API與access _ code交換。最好不要直接在前臺(tái)要求。因?yàn)閟ecret最好不要暴露在前端。因?yàn)椴话踩ecret=Secret code=codegrant _ type=authorization _ code將返回結(jié)果

{

access _ token ' : ' access _ token '、

Expires_in':7200，

refresh _ token ' : ' refresh _ token '、

Openid':'OPENID '、

范圍“:”范圍，

union id ' : ' o6 _ BM asdasdsad 6 _ 2 sgvt 7 hmzopfl '

}參數(shù)說明

參數(shù)

說明

Access_token

接口調(diào)用憑據(jù)

Expires_in

Access_token接口調(diào)用憑據(jù)超時(shí)(秒)

Refresh_token

用戶刷新access_token

Openid

授權(quán)用戶唯一id

范圍

以逗號(hào)(，)分隔的用戶身份驗(yàn)證范圍

Unionid

只有當(dāng)網(wǎng)站應(yīng)用程序通過該用戶的userinfo認(rèn)證時(shí)，才會(huì)顯示此字段。

第三步：通過access_token調(diào)用接口

;openid=OPENID

返回結(jié)果

{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": ";, "privilege":[ "PRIVILEGE1", "PRIVILEGE2" ], "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL" }

參數(shù)	說明
openid	普通用戶的標(biāo)識(shí)，對(duì)當(dāng)前開發(fā)者帳號(hào)唯一
nickname	普通用戶昵稱
sex	普通用戶性別，1為男性，2為女性
province	普通用戶個(gè)人資料填寫的省份
city	普通用戶個(gè)人資料填寫的城市
country	國家，如中國為CN
headimgurl	用戶頭像，最后一個(gè)數(shù)值代表正方形頭像大?。ㄓ?、46、64、96、132數(shù)值可選，0代表640*640正方形頭像），用戶沒有頭像時(shí)該項(xiàng)為空
privilege	用戶特權(quán)信息，json數(shù)組，如微信沃卡用戶為（chinaunicom）
unionid	用戶統(tǒng)一標(biāo)識(shí)。針對(duì)一個(gè)微信開放平臺(tái)帳號(hào)下的應(yīng)用，同一用戶的unionid是唯一的。

我們拿到這些用戶信息，再結(jié)合我們的業(yè)務(wù)就完成了微信掃碼登錄

覺得效果不錯(cuò)的請(qǐng)幫忙加個(gè)關(guān)注點(diǎn)個(gè)贊，經(jīng)常分享前端實(shí)用開發(fā)技巧