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

它提供了手动签发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的思路,很多地方不严谨,仅供参考

原文地址:https://www.cnblogs.com/PyKK2019/p/10880657.html

时间: 2024-08-03 09:24:27

微信小程序登录对接Django后端实现JWT方式验证登录的相关文章

微信小程序支付(java后端)

第一步 进入小程序,下单,请求下单支付,调用小程序登录API来获取Openid(https://mp.weixin.qq.com/debug/w ... .html#wxloginobject),生成商户订单,这些都是在小程序端完成的业务. 小程序端代码 // pages/pay/pay.js var app = getApp(); Page({     data: {},     onLoad: function (options) {         // 页面初始化 options为页面跳

微信小程序上传图片(前端+PHP后端)

一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style='width:600rpx; height:600rpx' /> 二.js文件 Page({ /** * 页面的初始数据 */ data: { //初始化为空 source

微信小程序 - 获取用户信息的几种方式

1. 老接口(上线使用-测试用button先获取用户信息) 1 // 登录 2 wx.login({ 3 success: res => { 4 // 发送 res.code 到后台换取 openId, sessionKey, unionId 5 // 也就是发送到后端,后端通过接口发送到前端,前端接收用户信息等.... 6 wx.setStorageSync('code', res.code); 7 console.log(wx.getStorageSync('code')) 8 9 // 获

微信小程序 textarea 层级过高的解决方式

建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码 <template> <view class="ui-textarea"> <textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{

flask与微信小程序登录(后端)

开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + flask + 微信小程序实现用户快速注册登录方案(本文主要进行后端逻辑的梳理,小程序端逻辑只写了必要的部分,如有需要,请点击连接阅读官方开发文档) 官方给出的微信小程序登录时序图如下: 这个流程分为两大部分: 小程序使用 wx.login() API 获取 code,并由开发者后端服务器换取open_id 和 session_key,小程序使用 wx.getUs

Django+小程序技术打造微信小程序助手

Django+小程序技术打造微信小程序助手 深入Django视图层,实践与理论相结合,带你系统地梳理视图层知识点 分层次介绍Django视图层的重要知识点,包括 HTTP请求和应答在Django框架中相应的Request对象/Response对象:Django的路由以及RESTful API设计:Django的文件管理:类视图简化视图层逻辑等等重要知识点:最后有关于视图层的实战内容. 3-1 Request&Response对象 3-2 Django的RESTful URL设计 3-3 实现个人

微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.checkbox多项选择器组件.switch开关选择组件.navigator页面连接组件等. Ⅰ.登录设计 登录表单中,需输入账号.密码进行登录,在账号.密码输入框中都有友好的提示信息:登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态:在登录按钮下面提供手机快速注册.企业用户注册.找回密码链

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微