专栏首页程序员的碎碎念微信小程序和Django服务端通信

微信小程序和Django服务端通信

我在这里详细表述一遍:微信小程序和具有权限认证、CSRF机制的Django服务端通信的一个可行的例子。。

本教程基于Django预设,在cookies的命名和csrftoken的接收上可能和其他语言框架的有所不同。

首先要知道一些基本知识:当微信小程序在会话期间想要再次向服务端请求时,不需要再次登录,只需要把sessionid放进cookie中传递过去就可以了,以便防止跨域请求,还要携带上csrftoken。微信小程序不像浏览器那样在二次请求时会自动搬运cookiescookies需要我们自己写上。

总体交流过程

1,微信小程序使用wx.login()获取到code后发送给服务端

2,服务端向微信服务器请求得到openidsession_key,进行处理注册登录后,通过session记录用户登录状态,最后返回给微信小程序的cookiescsrftokensessionid

3,微信小程序二次请求时在请求上方移动cookiecookie中存放上次请求得到的csrftokensessionid,并且请求头部中还要有一个X-CSRFToken键值对。

关键部分的详细操作

第一步:微信小程序本地缓存csrftoken和sessionid

首先在第一次登录请求时就要把csrftokensessionid获取下来,并分别保存在缓存中。(为什么要分别保存?因为等下二次请求时要分别用到)

wx.login({
  success: res => {
    if (res.code) {
      wx.request({
        url: xxx,
        method: 'POST',
        data: { 'code': res.code },
        success: res => {
          if (res.statusCode == 200) { //服务端处理正常,登录成功
            //wx.setStorageSync("cookies", res.header["Set-Cookie"]); //存进去的是所有cookie串在一起的字符串,包括csrftoken和sessionid,但我们不要用这个方式,原因见下文介绍
            wx.setStorageSync('csrftoken', res.cookies[0])
            wx.setStorageSync('sessionid', res.cookies[1])
          }
        },
      });
    }
  }
});

在上面你看到了,我在保存csrftokensessionid到缓存时,使用的是res.cookies,而不是res.header["Set-Cookie"],本来微信小程序接收到的cookies就是和res.header["Set-Cookie"]一样的,但在二次提交时这个东西并没有想象中那样可以直接使用。。

第二步:微信小程序二次请求时携带cookie和X-CSRFToken

本地缓存中已经有csrftokensessionid了,二次请求时要先处理后续两种样东西:

1,csrftokensessionid合并后的cookie

2,纯的,没有cookie信息的csrftoken

其实第一项中的cookie本来是可以直接用res.header["Set-Cookie"]这个得到的cookies字符串就可以了的,但不知道为什么,这个串联中的csrftokensessionid这两个cookie并非用分号;和间隔替换的,否则用一个逗号,隔开,这个cookie发送到后端的英文识别不出来的..

所以需要这样设计:

let cookie = wx.getStorageSync("csrftoken") + '; ' + wx.getStorageSync("sessionid")

而纯粹的,没有cookie信息的csrftoken又是怎么回事?

用过ajaxDjango服务端发送请求的人都知道,在headers中是要X-CSRFToken填充键值对的,而在Django的模板语言中,我们经常可以直接用X-CSRFToken:'{{ csrftoken }}'这样的简单方式来生成纯粹的csrftoken,但微信小程序可没有这个模板语言,而在我们保存的cookie中的那个csrftoken是携带着其他信息的,所以要我们去截取纯粹的csrftoken

截取方式:

csrftoken = wx.getStorageSync("csrftoken").split(';')[0].split('=')[1]

对这个截取方式不理解的可以展开wx.getStorageSync("csrftoken")看一下就明白了,其实就是对这个字符串先按分号分割然后取第一个元素再按等号分割后取第二个元素,也就是纯粹的csrftoken

所以我们在二次请求时,应该这样:

wx.request({
  url: xxx,
  data: "",
  method: 'POST',
  header: {
    'cookie': wx.getStorageSync("csrftoken") + '; ' + wx.getStorageSync("sessionid"),
    'X-CSRFToken': wx.getStorageSync("csrftoken").split(';')[0].split('=')[1]
  }
})

至此,我们就实现了微信小程序携带cookiecsrftoken向Django服务端请求的需求。

注意:微信小程序wx.requestcookie是单数,也是header单数。

本文分享自微信公众号 - 程序员的碎碎念(gh_53e607dd4782),作者:米国队长

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序和服务器通信-WebSocket

    接上一篇文章的话题,我们这次来讲一下如何建立一个基于node.js的WebSocket服务器,并在小程序中使用这个提供实时服务的服务器。

    一斤代码
  • 通过微信小程序看前端

    摘要: 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知。整个朋友圈瞬间便像炸开了锅似的,各种揣测、介绍...

    shaonbean
  • 开源团队管理微信小程序【含服务端和客户端】

    用户5997198
  • 微信小程序网络通信(一)

    先调用 wx.login(Object object) 获取临时登录凭证,及code,然后wx.request()方法将登录凭证发送到开发者服务器,开发者服务器...

    mySoul
  • 微信小程序 nginx https 反向代理后端服务

    张琳兮
  • 微信小程序 nginx https 反向代理后端服务

    张琳兮
  • 【微信小程序】c# 实现获取openid、session_key 服务端

    田超
  • 一斤代码深入理解系列(三):微信小程序和服务器通信

    如果你的小程序需要和远程的服务进行交互,比如访问你自己的或别人提供的远程API来操作数据(增删改查),那么你就需要一种和远程服务器进行通信的机制来...

    极乐君
  • [kbone-ui]打通 H5/微信小程序 多端UI库

    一开始做 kbone-ui 的初衷是为了减少 kbone 的上手难度,需要提供多端的样式统一的 UI 组件库。现在,微信这边已经有了 weui 公共样式库来支持...

    binnie

扫码关注云+社区

领取腾讯云代金券