通過大白話理解微信小程序的授權(quán)登錄
前言
學(xué)習(xí)改文章,您就有清晰的微信小程序授權(quán)思路,前后端遵循開發(fā)規(guī)矩即可
當(dāng)然更加完善的實(shí)現(xiàn)辦法要去看官方文檔的推薦
學(xué)習(xí)前建議看看授權(quán)大白話理解-微信小程序獲取授權(quán)
大白話講步驟:
按照最常見的,點(diǎn)擊一個按鈕進(jìn)行登錄
1. 前端寫一個button 按鈕點(diǎn)擊調(diào)用一個方法
2. 前端點(diǎn)擊button后,該調(diào)用的該方法里面寫wx.login( ) 方法,這時候你會獲得一些數(shù)據(jù)
其中code才是我們需要的
代碼展示

有了code之后,我們應(yīng)該用wx.request( )發(fā)送一個請求把他傳給后端,因?yàn)楹蠖瞬趴梢酝ㄟ^這個code來進(jìn)行登錄憑證
3. 后端怎么進(jìn)行登錄憑證?
- 后端要通過微信提供的接口,然后把從前端拿到的code,再轉(zhuǎn)發(fā)發(fā)送到微信服務(wù)器獲得信息
- 微信服務(wù)器提供的接口是:https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code
后端就是通過這個發(fā)送get請求給微信服務(wù)器的 - 上面的appid , secret , js_code 后面的三個參數(shù)就是要替換的
- appid是應(yīng)用id,通過登錄微信公眾號后臺去獲取的
- secret是應(yīng)用秘鑰,也是通過微信公眾號后臺去獲取的
- js_code就是我們前段發(fā)送wx.request()傳過來的code數(shù)據(jù)
- 為什么這么做?因?yàn)閍ppid,secret是微信給每一個開發(fā)者賬號獨(dú)一無二的"身份證",讓你們合法合規(guī)的去獲取用戶的微信賬號信息,如果你們敢亂來的話,那就…,微信小程序也是實(shí)名了的。嗯…
- 這時候后端通過get請求獲取到了官方給你們返回的用戶信息了(返回的信息里面openid和session_key 等信息),我們就是要取openid和session_key這兩個信息(openid是獨(dú)一無二的)
- 拿到這兩個數(shù)據(jù)后后端服務(wù)器要保存,然后返回一個token給前端(這個token能和openid和session_key關(guān)聯(lián)就可以,但是非常不推薦直接返回openid 和 session_key)
4. 前端拿到后端返回的數(shù)據(jù)了
拿到token,就存進(jìn)storage里面了,有這個token且未過期就代表你是合法的了,你可以結(jié)合微信授權(quán)用戶信息–wx.getUserInfo( )來拿他個人具體信息了

微信服務(wù)器返回的res就是他本人授權(quán)登錄的賬號信息,但是res里面有很多信息,想要她的具體數(shù)據(jù),我們需要哪一些?
1. encrytedData:(這一段非常長的數(shù)據(jù)正是用戶信息嚴(yán)格加密后的數(shù)據(jù))
2. iv:是加密算法的初始向量
我們拿到上面的encrytedData,iv,再加上之前向后端要的能和openid、session_key關(guān)聯(lián)上的token,一并wx.request( )發(fā)給后端
5. 后端拿到數(shù)據(jù)后
用他傳過來的【encrypted 結(jié)合 iv】 對 【openid 和session_key】進(jìn)行解密
然后解密得到重要的數(shù)據(jù),返回給了前端
6. 前端拿到數(shù)據(jù)后:
- 渲染數(shù)據(jù)
- 或進(jìn)一步對數(shù)據(jù)做出處理
以上總結(jié)
- 以上整一個過程就是前后端的執(zhí)行過程,先是wx.login( )登錄,得到了code,然后去微信服務(wù)器上面換取openid 和 session_ky
- 前端得到用戶授權(quán),然后就有了用戶的獨(dú)一無二的encrypted 和 iv,這是用戶的信息
- 把這個encrypted 和 iv 給到后端 ,后端就結(jié)合之前用戶登錄得到的session_key進(jìn)行解密
- 解密后得到他的具體信息,返回前端
在微信文檔里面都有了 — 點(diǎn)我跳轉(zhuǎn)去看

官方文檔安排的明明白白的
疑問2:下載了里面有什么類型的后端代碼?

1.有以上四種類型的代碼,可以直接復(fù)制粘貼來跑,按照他的接口就可以
2. 像Java之類的,百度上面有很成熟好用的解密類,百度就可以下載
總結(jié)
到此這篇關(guān)于通過大白話理解微信小程序的授權(quán)登錄的文章就介紹到這了,更多相關(guān)微信小程序授權(quán)登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js利用clipboardData實(shí)現(xiàn)截屏粘貼功能
這篇文章主要為大家詳細(xì)介紹了js利用clipboardData實(shí)現(xiàn)截屏粘貼功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼
這篇文章主要介紹了js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02
javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見到過吧,實(shí)現(xiàn)的方法也有很多,這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼,純手寫的,感興趣的朋友不要錯過。2015-11-11
chrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猚hrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09

