uniapp微信小程序授权登录页面

我的微信小程序上线了，AI识图生诗词文案，识别图片生成古诗词，欢迎大家使用。

（用户日访问量太少了，大家帮我踩一下，谢谢！）

以下是我在开发中的一些经验和心得。

通过访问uni.login，实现微信授权登录。全程不获取用户的任何信息。所以也不需要用户授权，直接实现后端登录的功能。

以下是小程序代码：

<template>
    <view class="wrapper">
        <button @click="wechatLogin">微信授权一键登录</button>
    </view>
</template>
<script>
import { mapMutations } from 'vuex';

export default {
    data() {
        return {

        };
    },

    methods: {
        ...mapMutations(['saveLoginStatus', 'saveUserInfo']),

        async wechatLogin() {
            try {
                const loginRes = await uni.login({ provider: 'weixin' });
                const userInfoRes = await uni.getUserInfo({ provider: 'weixin' });

                // 获取到用户信息
                const userInfo = userInfoRes.userInfo;
                // 调用后端接口使用登录凭证（loginRes.code）和用户信息进行登录处理
                this.code = loginRes[1].code;
                this.doLogin();
                // console.log('用户信息', this.code);
            } catch (err) {
                console.log('微信登录失败', err);
            }
        },
        async doLogin() {
            try {
                const response = await this.$api.user.login({ code: this.code });
                if (response.statusCode === 200) {
                    console.log('登录成功!');
                    // 弹窗提示登陆成功
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success',
                        duration: 1000,
                    });
                    // 保存用户信息和token
                    this.saveLoginStatus(response.data);
                    // 获取当前的页面栈，决定需要返回几层
                    const res = getCurrentPages();
                    // console.log(res);
                    if (res.length <= 1) {
                        uni.switchTab({
                            url: '/pages/createtext/createtext',
                        });
                    } else {
                        uni.navigateBack();
                    }
                }
            } catch (error) {
                console.log('登录失败', error);
            }
        },
    },
};
</script>

以下是后端代码，我是用django写的，如果是新用户自动注册并登录，如果是老用户直接登录。

视图函数：

#views.py
import os.path
import requests
from django.http import FileResponse
from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework_simplejwt.exceptions import InvalidToken, TokenError
from rest_framework_simplejwt.views import TokenObtainPairView
from AIwenanquan import settings
from AIwenanquan.settings import MEDIA_ROOT
from users.models import User
from pathlib import Path

# 微信用户一键登录
class WechatLogin(TokenObtainPairView):
    #小程序的信息
    appid = settings.AppId
    appsecret = settings.AppSecret
    jscode2session_url = "https://api.weixin.qq.com/sns/jscode2session"

    def post(self, request, *args, **kwargs):
        # 获取到前端回传过来的code
        code = request.data.get('code')# 这个code有效期为5分钟
        #print('微信登录code', code)
        # 构造向wx发送请求的url
        url = f"{self.jscode2session_url}?appid={self.appid}&secret={self.appsecret}&js_code={code}&grant_type=authorization_code"
        # 向微信服务器发起get请求
        response = requests.get(url)
        # print('微信登录成功', response.json())
        try:
            # 这里就是拿到的openid和session_key
            openid = response.json()['openid']
            session_key = response.json()['session_key']
        except KeyError:
            return Response({'code': 'fail'})
        user = self.create_or_update_user_info(openid)
        user.username = 'weixinyonghu' + str(user.id)
        user.save()
        # 用户登录
        data = {
            'username': user.username,
            'password': openid
        }
        #print(data)
        serializer = self.get_serializer(data=data)

        try:
            serializer.is_valid(raise_exception=True)
        except TokenError as e:
            raise InvalidToken(e.args[0])
        # 自定义登录成功返回的信息
        result = serializer.validated_data
        result['id'] = serializer.user.id
        result['mobile'] = serializer.user.mobile
        result['email'] = serializer.user.email
        result['username'] = serializer.user.username
        result['token'] = result.pop('access')
        return Response(serializer.validated_data, status=status.HTTP_200_OK)
    def create_or_update_user_info(self,openid):
        if openid:
            user_info = User.objects.filter(openid=openid).first()
            if user_info:
                user, created = User.objects.update_or_create(openid=openid)
            else:
                user, created = User.objects.get_or_create(openid=openid)
                # 设置密码为openid
                user.set_password(openid)
                user.save()
            return user
        return None

 models：

from django.db import models
from common.db import BaseModel
# django中自带的用户认证模型
from django.contrib.auth.models import AbstractUser

#用户模型
class User(AbstractUser, BaseModel):
    #AbstractUser是django自带的users模型，BaseModel是在db中定义的通过字段，以下是自定义用户模型
    mobile = models.CharField(verbose_name='手机号',default='',max_length=11)
    avatar = models.CharField(max_length=255,verbose_name='用户头像',blank=True,null=True)
    openid = models.CharField(max_length=255,blank=True,verbose_name='微信openid' )
    class Meta:
        db_table = 'users'
        verbose_name = '用户表'
        #后台显示的名字
        verbose_name_plural = verbose_name

url：

from django.urls import path
from rest_framework import routers
from .views import *

urlpatterns = [

# 微信认证登录
    path('wxlogin/', WechatLogin.as_view()),

]
route = routers.SimpleRouter()
urlpatterns += route.urls