欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-25 16:10:24
先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料。 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把code换取成openid 4.后端将openid作为用户名和密码 5.后端通过JSO ......

先上效果图

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

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

流程

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
这里不使用他默认的登录接口,如下所示
微信小程序登录对接Django后端实现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_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
    })

后端登录接口实现

如果不存在用户则自动创建
为了简单,用户名和密码都是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的思路,很多地方不严谨,仅供参考