Django+微信小程序开发待办清单：小程序与Token

4280 views, 2023/10/17 updated Go to Comments

上一章中，我们已经从微信接口服务中取到了用户的 openid ，并和 Django 服务器的本地用户关联上了。

但是这还没完啊，小程序客户端还不知道发生了啥，得给它也颁发个密码之类的凭证吧，以便后续发起业务请求时表明自己的身份。这类凭证的形式很多（甚至可以自定义个密钥），为了方便和主流起见，本文就直接采用 JSON Web Token 了。（下文称 Token）

Django 后端

首先安装 simplejwt 库。这是个基于 DRF 的库，用它来操作 Token 非常之方便。

虚拟环境里执行：

(venv) > pip install djangorestframework-simplejwt

按照库文档的指示，在 Django 全局配置中增加下面的代码，指定通过 Token 的形式进行身份认证：

# backend/backend/settings.py

...

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    )
}

接下来处理视图。对原有的 WeixinLogin() 类进行修改，并且新增 UserData() 视图类：

# backend/weixin/views.py

...
from rest_framework_simplejwt.tokens import RefreshToken
from rest_framework.permissions import IsAuthenticated


# 获取用户数据
class UserData(APIView):
    # 鉴权方式
    permission_classes = [IsAuthenticated]

    def get(self, request, format=None):
        return Response({'code': 'Authenticated.'})


# 微信登录
class WeixinLogin(APIView):
    def post(self, request, format=None):
        ...
        try:
            ...
        except KeyError:
            ...
        else:
            ...

            refresh = RefreshToken.for_user(user)

            return Response({
                    'code': 'success',
                    'refresh': str(refresh),
                    'access': str(refresh.access_token)
                })

视图类 UserData() 通过 permission_classes ，指定任何通过此类的请求必须是已登录用户。然后定义了一个简单的用于测试的 GET 请求。
视图类 WeixinLogin() 新增了一行代码，用于给当前用户生成一个有效期为 5 分钟的 Token，并将 Token 返回给小程序前端。

access 即为 Token 。refresh 是用于 Token 失效后，重新获取新 Token 的令牌。不过本文为了简单起见，并不会用到这个刷新令牌。

老规矩，给新的视图类安排路由：

# backend/weixin/urls.py

...
from weixin.views import WeixinLogin, UserData

urlpatterns = [
    ...
    path('data/', UserData.as_view(), name='data'),
]

Django 部分这样就可以了。

小程序前端

上一章在生命周期 attached() 中写的代码只是测试的，没太大用处。

因此这里将其大幅修改，变为下面这样：

// frontend/pages/index/index.js

...

lifetimes: {
  attached() {

    // --------------
    // 步骤一：获取code
    // --------------

    wx.login({
      success(res) {
        if (res.code) {

          // --------------
          // 步骤二：用code换取token
          // --------------

          wx.request({
            url: 'http://127.0.0.1:8000/api/weixin/login/',
            method: 'POST',
            data: {
              code: res.code
            },
            success: res => {
              // 在小程序调试器中查看是否收到token
              console.log(res)
              const access = res.data.access
              // 将token保存到缓存
              wx.setStorage({ key: "access", data: access })
              // 保存token的获取时间
              wx.setStorage({
                key: "access_time",
                data: Date.parse(new Date())
              })

              // --------------
              // 步骤三：用token获取用户数据
              // --------------

              wx.request({
                url: 'http://127.0.0.1:8000/api/weixin/data/',
                header: {
                  // 注意字符串 'Bearer ' 尾部有个空格！
                  'Authorization': 'Bearer ' + access
                },
                success: res => {
                  // 在小程序调试器中查看返回值是否正确
                  console.log(res)
                }
              })
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
},