侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序登录对接Django后端实现JWT方式验证登录详解

微信(小程序)  /  管理员 发布于 5年前   533

先上效果图


点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料。

流程

1.使用微信小程序登录和获取用户信息Api接口
2.把Api获取的用户资料和code发送给django后端
3.通过微信接口把code换取成openid
4.后端将openid作为用户名和密码
5.后端通过JSON web token方式登录,把token和用户id传回小程序
6.小程序将token和用户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()    //登录状态置为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后端的实现

首先安装djangorestframework-jwt

这里不使用他默认的登录接口,如下所示


它提供了手动签发token和解密token的功能,因此最好自己实现

手动签发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接口实现

这里只使用简单的FBV视图

注:前端传来的值无法从request.POST中接收到,只能使用如下方法

@require_http_methods(['POST'])@csrf_exemptdef 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 })

后端登录接口实现

如果不存在用户则自动创建
为了简单,用户名和密码都是openid

@require_http_methods(['POST'])@csrf_exemptdef 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的思路,很多地方不严谨,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • django项目登录中使用图片验证码的实现方法
  • django用户登录验证的完整示例代码
  • Django实现微信小程序的登录验证功能并维护登录态
  • Django框架登录加上验证码校验实现验证功能示例
  • django与小程序实现登录验证功能的示例代码
  • Django实现登录随机验证码的示例代码
  • Django自定义插件实现网站登录验证码功能
  • django 简单实现登录验证给你


  • 上一条:
    操作按钮悬浮固定在微信小程序底部的实现代码
    下一条:
    微信小程序 WXML节点信息查询详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信模板消息改版后发送规则记录(微信订阅消息参数值内容限制说明)(1个评论)
    • 微信支付v3对接所需工具及命令(0个评论)
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(1个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(2个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-10
    • 2023-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客