微信小程序登錄對接Django后端實現(xiàn)JWT方式驗證登錄詳解
先上效果圖
點擊授權(quán)按鈕后可以顯示部分資料和頭像,點擊修改資料可以修改部分資料。
流程
1.使用微信小程序登錄和獲取用戶信息Api接口
2.把Api獲取的用戶資料和code發(fā)送給django后端
3.通過微信接口把code換取成openid
4.后端將openid作為用戶名和密碼
5.后端通過JSON web token方式登錄,把token和用戶id傳回小程序
6.小程序?qū)oken和用戶id保存在storage中
下次請求需要驗證用戶身份的頁面時,在header中加入token這個字段
微信小程序代碼
獲取用戶信息的方法這里不展示,可以在微信小程序文檔中看到
登錄方法
login: function(event) { wx.login({ success: res => { console.log(res) //請求后端換取openid的接口 http.request({ url: '/get-openid/', method: 'POST', data: { //將code傳到后端 jscode: res.code }, success: res => { //獲取到openid作為賬號密碼 console.log(res) console.log(app.globalData.userInfo) http.request({ url: '/wx-login/', method: 'POST', data: { openid: res.openid, session_key: res.session_key, nickname: app.globalData.userInfo.nickName, avatar_url: app.globalData.userInfo.avatarUrl, gender: app.globalData.userInfo.gender }, //登錄成功后返回token保存在storage中 success: res => { console.log(res) //token存入storage wx.setStorageSync('jwt_token', res.token) wx.setStorageSync('user_id', res.user_id) this.reFreshUserProfile() //登錄狀態(tài)置為true this.setData({ isLogin: true, hasUserInfo: true }) app.globalData.isLogin = true } }) } }) } }) }
注銷方法
logout: function(res) { this.setData({ isLogin:false, hasUserInfo:false }) app.globalData.isLogin = false wx.removeStorageSync('jwt_token') wx.removeStorageSync('user_id') },
Django后端的實現(xiàn)
首先安裝djangorestframework-jwt
這里不使用他默認(rèn)的登錄接口,如下所示
它提供了手動簽發(fā)token和解密token的功能,因此最好自己實現(xiàn)
手動簽發(fā)token
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER payload = jwt_payload_handler(user) token = jwt_encode_handler(payload)
手動解密token
jwt_decode_handler = api_settings.JWT_DECODE_HANDLER user_dict = jwt_decode_handler(token) user_id = user_dict['user_id']
后端換取openid
class OpenId: def __init__(self, jscode): self.url = 'https://api.weixin.qq.com/sns/jscode2session' self.app_id = env.str('APPID') self.app_secret = env.str('APPSECRET') self.jscode = jscode def get_openid(self): url = self.url + "?appid=" + self.app_id + "&secret=" + self.app_secret + "&js_code=" + self.jscode + "&grant_type=authorization_code" res = requests.get(url) try: openid = res.json()['openid'] session_key = res.json()['session_key'] except KeyError: return 'fail' else: return openid, session_key
后端返回openid接口實現(xiàn)
這里只使用簡單的FBV視圖
注:前端傳來的值無法從request.POST中接收到,只能使用如下方法
@require_http_methods(['POST']) @csrf_exempt def GetOpenIdView(request): data = json.loads(request.body) jscode = data['jscode'] openid, session_key = OpenId(jscode).get_openid() return JsonResponse({ 'openid': openid, 'session_key': session_key })
后端登錄接口實現(xiàn)
如果不存在用戶則自動創(chuàng)建
為了簡單,用戶名和密碼都是openid
@require_http_methods(['POST']) @csrf_exempt def login_or_create_account(request): data = json.loads(request.body) print(data) openid = data['openid'] nickname = data['nickname'] avatar_url = data['avatar_url'] gender = data['gender'] try: user = User.objects.get(username=openid) except User.DoesNotExist: user = None if user: user = User.objects.get(username=openid) else: user = User.objects.create( username=openid, password=openid, nickname=nickname, avatar_url=avatar_url, gender=gender ) jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER payload = jwt_payload_handler(user) token = jwt_encode_handler(payload) res = { 'status': 'success', 'nickname': user.nickname, 'user_id': user.id, 'token': token } return JsonResponse(res)
以上就是簡單的微信小程序登錄對接Django的思路,很多地方不嚴(yán)謹(jǐn),希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 父窗口控制子窗口的行為-打開,關(guān)閉,重定位,回復(fù)
技術(shù)要點可以利用windows的open和closed來對子窗口的控制,需要父窗口和子窗口之間進(jìn)行互動。2010-04-04JavaScript對象數(shù)組如何按指定屬性和排序方向進(jìn)行排序
這篇文章主要介紹了JavaScript對象數(shù)組如何按指定屬性和排序方向進(jìn)行排序的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06Django1.7+JQuery+Ajax驗證用戶注冊集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實現(xiàn)了一個驗證用戶注冊時,用戶名存在不存在的一個小應(yīng)用。注意,驗證存在不存在使用的是Ajax的方式,不用讓用戶點擊按鈕驗證是否存在,需要的朋友可以參考下2017-04-04