關(guān)于微信小程序登錄的那些事
前言
最近團(tuán)隊(duì)在開發(fā)一款小程序,都是新手,一邊看文檔,一邊開發(fā)。在開發(fā)中會(huì)遇到各種問(wèn)題,今天把小程序登錄這塊的流程整理下,做個(gè)記錄。
小程序的登錄跟平時(shí)自己APP這種登錄驗(yàn)證還不太一樣,多了一個(gè)角色,那就是微信服務(wù)器。
根據(jù)微信官方提供的登錄流程時(shí)序圖可以清楚的了解小程序登錄需要多少個(gè)步驟,下面我們來(lái)總結(jié)下:
- 小程序啟動(dòng),通過(guò)wx.login()獲取code
- 開發(fā)者服務(wù)器需要提供一個(gè)登錄的接口,參數(shù)就是小程序獲取的code
- 登錄接口收到code后,調(diào)用微信提供的接口進(jìn)行code的驗(yàn)證
- 得到驗(yàn)證結(jié)果,成功后能得到一個(gè)session_key和openid
- 生成一個(gè)自定義的key, 將session_key和openid跟自定義的key關(guān)聯(lián)起來(lái)
- 將自定義的key返回給小程序
- 每次請(qǐng)求都帶上key, 后端根據(jù)key獲取openid識(shí)別當(dāng)前用戶身份
首先code是微信給的,如果你隨意生成code去驗(yàn)證肯定是無(wú)效的,只有微信給的code才有效。code傳到開發(fā)者自己的服務(wù)后,再去問(wèn)微信:
Hi 哥們,我這個(gè)code是有效的還是無(wú)效的啊?
微信會(huì)告訴你是有效還是無(wú)效,有效的情況下還會(huì)給你一個(gè)用戶的標(biāo)識(shí),也就是openid,同時(shí)還會(huì)有一個(gè)sessionkey,也就是會(huì)話的key。sessionkey的有效期默認(rèn)是2小時(shí),當(dāng)用戶一直在使用小程序的話會(huì)自動(dòng)刷新,這個(gè)是由微信這邊來(lái)維護(hù)的。
注意:
- 會(huì)話密鑰 session_key 是對(duì)用戶數(shù)據(jù)進(jìn)行 加密簽名 的密鑰。為了應(yīng)用自身的數(shù)據(jù)安全,開發(fā)者服務(wù)器不應(yīng)該把會(huì)話密鑰下發(fā)到小程序,也不應(yīng)該對(duì)外提供這個(gè)密鑰。
- 臨時(shí)登錄憑證 code 只能使用一次
所以我們要為session_key創(chuàng)建別名,這個(gè)別名關(guān)聯(lián)的哪個(gè)用戶只有我們自己知道,唯一需要做的工作就在這塊。
我推薦2種方式來(lái)做關(guān)聯(lián):
第一種:隨機(jī)生成key, 關(guān)聯(lián)openid,存入redis中,當(dāng)請(qǐng)求帶入key,直接從redis中獲取openid得到當(dāng)前用戶信息,這個(gè)其實(shí)也就是我們自己去維護(hù)了會(huì)話信息
第二種:采用JWT生成token,將openid綁定到token中,將token返回給小程序,請(qǐng)求的時(shí)候帶上token,通過(guò)解析token得到用戶信息。
下面我們以第二種方式來(lái)進(jìn)行講解,會(huì)貼上部分代碼:
小程序中在app.js中的onLaunch方法中增加獲取code方法,并且調(diào)用后端的登錄接口獲取token:
wx.login({ success: function (res) { var code = res.code; if (code) { console.log('app啟動(dòng)獲取用戶登錄憑證:' + code); let params = { "code": code }; let result = config.requestHttp(config.url.userLogin, 'POST', params) result.then(res => { let data = res.data if (data.code == 200) { wx.setStorageSync("login_token", data.data.token); } }).catch(err => { console.log(err) }); } else { console.log('獲取用戶登錄態(tài)失?。? + res.errMsg); } } })
userLogin接口則根據(jù)小程序的code去調(diào)用微信接口驗(yàn)證:
// 小程序獲取SessionKey接口地址 String loginUrl = "https://api.weixin.qq.com/sns/jscode2session"; String url = loginUrl + "?appid=%s&secret=%s&grant_type=%s&js_code=%s"; url = String.format(url, appid, appSecret, grantType, param.getCode()); String result = restTemplate.getForObject(url, String.class); Map<String, Object> map = JsonUtils.toBean(Map.class, result); // 請(qǐng)求成功 if (map.containsKey("session_key")) { String openid = map.get("openid").toString(); // 第一次保存到用戶表,生成JWT TOKEN返回 }
小程序端需要將 wx.request()封裝成一個(gè)通用的方法,所有跟后臺(tái)交互都用這個(gè)方法來(lái)調(diào)用接口,我們可以在這個(gè)方法中設(shè)置登錄之后獲取的Token。這樣每次請(qǐng)求都會(huì)將Token塞到請(qǐng)求頭中,我們?cè)诰W(wǎng)關(guān)中就可以獲取這個(gè)Token進(jìn)行解析驗(yàn)證。
//請(qǐng)求封裝 function requestHttp(url, method, data) { //請(qǐng)求頭設(shè)置 var header = { Authorization: wx.getStorageSync("login_token") } return new Promise((resolve, reject) => { wx.request({ url: config.home_config + url, data: data, header: header, method: method, success: (res => { if (res.data.code === 200) { resolve(res) } else { reject(res) } }), fail: (res => { reject(res) }) }) }) }
Zuul中進(jìn)行驗(yàn)證:
RequestContext ctx = RequestContext.getCurrentContext(); HttpServletRequest request = ctx.getRequest(); String token = request.getHeader("Authorization"); if (StringUtils.isBlank(token)) { ctx.setSendZuulResponse(false); ctx.set("isSuccess", false); ctx.setResponseBody(JsonUtils.toJson(Response.fail("非法請(qǐng)求【缺少Authorization】", ResponseCode.NO_AUTH_CODE))); ctx.getResponse().setContentType("application/json; charset=utf-8"); return null; } // 驗(yàn)證Token是否有效 JWTResult jwResult = JWTUtils.checkToken(token); if (!jwResult.isStatus()) { ctx.setSendZuulResponse(false); ctx.set("isSuccess", false); ctx.setResponseBody(JsonUtils.toJson(Response.fail(jwResult.getMsg(), jwResult.getCode()))); ctx.getResponse().setContentType("application/json; charset=utf-8"); return null; } ctx.addZuulRequestHeader("loginUserId", jwResult.getUid()); return null;
驗(yàn)證成功后將用戶ID設(shè)置到請(qǐng)求頭中,傳遞給后端服務(wù)使用。
使用JWT必然有一個(gè)問(wèn)題是Token的失效問(wèn)題,我這邊失效時(shí)間設(shè)置的為2個(gè)小時(shí),正常的話用戶打開小程序,使用不可能連續(xù)超過(guò)2個(gè)小時(shí),登錄的邏輯是在app.js中做的,只要下次進(jìn)去token就會(huì)重新申請(qǐng)。不過(guò)這個(gè)也可以調(diào)整,比如稍微長(zhǎng)一點(diǎn)。
核心就是用戶的認(rèn)證交給了微信,只要微信告訴我們認(rèn)證成功了,我們就可以自己接管會(huì)話信息了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- 微信小程序?qū)崙?zhàn)之登錄頁(yè)面制作(5)
- 微信小程序 本地存儲(chǔ)及登錄頁(yè)面處理實(shí)例詳解
- 微信小程序中做用戶登錄與登錄態(tài)維護(hù)的實(shí)現(xiàn)詳解
- 微信小程序獲取手機(jī)號(hào)授權(quán)用戶登錄功能
- 微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)
- 微信小程序 后臺(tái)登錄(非微信賬號(hào))實(shí)例詳解
- 微信小程序 新建登錄頁(yè)并實(shí)現(xiàn)tabBar隱藏
- 一步步教會(huì)你微信小程序的登錄鑒權(quán)
- 微信小程序開發(fā)(一) 微信登錄流程詳解
- 微信小程序搭建及解決登錄失敗問(wèn)題
相關(guān)文章
JavaScript實(shí)現(xiàn)小程序圖片裁剪功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)小程序圖片裁剪功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03javascript中動(dòng)態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動(dòng)態(tài)加載js文件多種解決辦法,有需要的朋友可以參考一下2013-11-11Bootstrap組合上、下拉框簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap組合上、下拉框的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實(shí)現(xiàn)代碼,代碼中帶詳細(xì)注釋,需要的朋友可以參考下2015-03-03小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案
在開發(fā)過(guò)程中經(jīng)常會(huì)遇到在微信小程序的頁(yè)面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識(shí)點(diǎn),所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09僅30行代碼實(shí)現(xiàn)Javascript中的MVC
這篇文章主要介紹了僅30行代碼實(shí)現(xiàn)Javascript中的MVC的方法,MVC的基礎(chǔ)是觀察者模式,這是實(shí)現(xiàn)model和view同步的關(guān)鍵,想要深入了解的朋友可以參考本文2016-02-02

Webpack-cli安裝成功后查看webpack -v報(bào)錯(cuò)案例詳解