【Django+Vue3 线上教育平台项目实战】登录功能模块之短信登录与钉钉三方登录

在这里插入图片描述

文章目录

前言
一、几个关键概念
- 1.HTTP无状态性
- 2.Session机制
- 3.Token认证
- 4.JWT
二、通过手机号验证码登录
- 1.前端短信登录界面
- 2.发送短信接口与短信登录接口
- 3.Vue 设置interceptors拦截器
- 4. 服务端验证采用自定义中间件方式实现
- 5. 操作流程及效果图如下：
三、通过第三方平台进行登录
- 1.准备工作
- 2.前端钉钉登录界面
- 3.后端逻辑处理
- 4.操作流程及效果图如下：

前言

在当今的数字化时代，用户认证是任何在线服务安全性的基石。本文将简明扼要地介绍登录注册流程中的核心概念：HTTP无状态性、Session、Token与JWT，并详细阐述两种实用登录方式—— 手机号登录验证（借助容联云/云通讯服务） 与钉钉第三方登录。我们将探讨这些概念的基本原理，并深入解析两种登录方式的实现流程，旨在帮助开发者提升用户认证的安全性与便捷性。

一、几个关键概念

首先，我们来分析登录注册流程中涉及的几个关键概念及其工作机制，特别是关于HTTP无状态性、Session机制、Token认证，以及它们如何影响 单点登录（SSO） 的实现。

1.HTTP无状态性

HTTP协议本身是无状态的，这意味着服务器不会保留来自先前请求的客户端信息。每次请求都被视为完全独立的，服务器不会记住之前发生了什么。正是由于HTTP的无状态性，服务器无法直接记住用户是否已经登录或注册。这意味着每次用户请求都需要重新验证用户的身份，这在没有额外机制的情况下是不可行的。这种设计虽然简化了服务器的实现，但也要求开发者实现一些机制来跟踪用户会话和状态。

2.Session机制

工作原理：

1. 请求发起：客户端（如浏览器）向服务器发起请求。
2. 验证与生成Session：服务器验证请求（如登录验证），验证通过后，在服务器上创建一个Session对象，并为其分配一个唯一的标识符（如JSESSIONID）。这个Session对象可以存储用户的信息，如用户名、权限等。
3. 返回Session ID：服务器将JSESSIONID作为响应的一部分（通常通过Set-Cookie头部）发送给客户端。
4. 客户端存储：客户端（浏览器）将JSESSIONID存储在Cookie中。
5. 后续请求：在后续的请求中，客户端会自动将JSESSIONID包含在请求头（如Cookie）中发送给服务器。
6. 验证Session：服务器通过JSESSIONID在服务器上查找对应的Session对象，如果找到，则继续处理请求；如果未找到，则可能表示用户未登录或Session已过期。

不适合单点登录的原因：

每个应用或服务都可能有自己的Session管理机制，这使得跨多个应用或服务共享登录状态变得复杂。

3.Token认证

工作原理：

1.请求发起：客户端向服务器发起请求（如登录请求）。
2.验证与生成Token：服务器验证请求（如用户名和密码），验证通过后，生成一个唯一的Token（通常是一个加密的字符串），并将其存储在数据库中（或缓存中）。
3.返回Token：服务器将Token作为响应的一部分发送给客户端。
4.客户端存储：客户端将Token存储在Cookie、LocalStorage或SessionStorage中（取决于具体实现和安全需求）。
5.后续请求：在后续的请求中，客户端将Token包含在请求头（如Authorization: Bearer ）中发送给服务器。
6.验证Token：服务器通过查询数据库（或缓存）来验证Token的有效性，如果Token有效，则继续处理请求。

适合单点登录的原因：

Token可以在多个应用或服务之间共享，只要它们能够访问存储Token的数据库或缓存。
通过适当的认证服务器（如OAuth2.0中的授权服务器），可以实现跨域的单点登录。

4.JWT

JWT（JSON Web Token） 是一种无状态的Token认证机制，它允许服务器在Token中直接包含用户的身份信息和其他必要的验证信息。客户端在每次请求时携带这个Token，服务器通过验证Token来识别用户的身份和权限。

JWT的组成部分：
JWT由三部分组成：头部（Header）、载荷（Payload）和签名（Signature），每一部分都通过Base64编码后进行传输。

头部（Header）：包含了令牌的元数据，如令牌的类型（JWT）和所使用的签名算法（如HMAC SHA256或RSA）。
载荷（Payload）：包含了实际要传输的用户信息和其他元数据。这些信息可以是用户的姓名、角色、权限、到期时间等。载荷是JWT的主体部分，用于传递用户信息。
签名（Signature）：用于验证JWT的完整性和真实性。签名通过对头部和载荷进行哈希运算，并使用私钥（在生成JWT时）或公钥（在验证JWT时）进行加密生成。接收者可以使用公钥对签名进行解密，从而验证JWT的真实性和来源。

加密： base64(头部).base64(载荷).HS256(base64(头部).base64(载和),‘盐’)
解密： HS256(base64(头部).base64(载荷),‘盐’) 生成一个新的签名和传递过来的签名进行对比

根据上述内容，我们可以构建一个简单的jwt工具类用于jwt的加密解密：

from fuguang_back.settings import SECRET_KEY
import jwt
import time

class MyJwt():
    def __init__(self):
        self.secret = SECRET_KEY

    # 加密
    def jwt_encode(self, payload):
        # 载荷、盐、加密方式
        return jwt.encode(payload, self.secret, algorithm='HS256')

    # 解密
    def jwt_decode(self, token):
        # token,盐、解密方式
        return jwt.decode(token, self.secret, algorithms=['HS256'])


mjwt = MyJwt()
# user = {"id":1,"name":"zhangsan","exp":int(time.time()) + 3600}
# token = mjwt.jwt_encode(user)
# print(token)
# token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6InpoYW5nc2FuIiwiZXhwIjoxNzE5OTI0OTQ5fQ.rTPpHAx-92Pz1CmoRdO-yfGlAhAfuMInju2bFi1iixs"
# data = mjwt.jwt_decode(token)
# print(data)
# {'id': 1, 'name': 'zhangsan', 'exp': 1719924949}

二、通过手机号验证码登录

手机号登录流程：

1.在登录界面输入手机号，点击发送验证码
2.写一个发送验证码的接口，获取手机号（正则有效性验证），限制一分钟内只能发一次，查询redis中是否存在，如果存在返回已经发过，不存在调用发送，发送成功后存入redis
3.用户输入验证码点击登录
4.写一个登录接口
获取用户输入的手机号和验证码
通过手机号查询redis获取验证码，如果存在，则对比验证码
通过手机号查询用户表，如果存在获取用户信息生成 jwt token，如果不存在，写入用户表，用户信息生成 jwt token返回给客户端

5.客户端把token存在 localStorage中，以后每次请求在头部携带token。vue设置 interceptors拦截器，对每次请求前统一在头部加token
6.服户端验证采用中间件方式实现。自定义中间件，继承MiddiwareMinxin类重写process_request.方法中
定义白名单，在登录前需要操作的接口放到白名单中
如果不在白名单，获取token，验证
验证是否被修改，是否过期，是否已经退出（点击退出，把token存入redis,加一个过期时间），任何一个问题，return 401没有权限操作，通过继续下一步操作

安全问题及优化
1.token加过期时间 retoken。
登录成功后返回 token(3小时) retoken(4小时)，当快到期的时候客户端携带retoken来换取新的token更新

2.oa系统公司内部使用加ip地址过滤
3.https证书加密

1.前端短信登录界面

在这里插入图片描述

src\components\Login.vue

  <!-- 1-短信登录 -->
  <div class="inp" v-show="user.login_type==1">
    <input v-model="user.account" type="text" placeholder="手机号码" class="user">
    <input v-model="user.code"  type="text" class="code" placeholder="短信验证码">
    <el-button id="get_code" type="primary" @click="sendsms">获取验证码</el-button>
    <div class="rember">
      <label>
        <input type="checkbox" class="no" v-model="user.rememberMe"/>
        <span>记住我</span>
      </label>
      <p>忘记密码</p>
    </div>
    <button class="login_btn" @click="loginmobile">登录</button>
    <p class="go_login" >没有账号 <router-link to="/register">立即注册</router-link></p>
  </div>

// 点击事件：发送短信验证码
const sendsms =()=>{
  //在前端正则验证手机号是否正确
  let reg= /^1[3-9]\d{9}$/
  if (!reg.test(user.account)){
    alert("[前端]手机号校验失败！")
    return false;
  }
  http.get(`/sendsms/?phone=${this.account}`).then((result) => {
    if (result.data.code == "200") {
      alert("发送成功！")
    } else {
      alert(result.data.message)
    }
  }).catch((err) => {
    alert(err)
  });
}
// 点击事件：登录按钮
const loginmobile =()=>{
  http.post("/login/",{"mobile":user.account,"code":user.code}).then(res => {
    if (res.data.code=="200") { //登录成功
      localStorage.setItem('userid',res.data.userid); //客户端存储userid
      localStorage.setItem('token',res.data.token); //客户端存储token
      return router.push("/"); //跳转主页
    } else {
      return router.push("/login"); //登录失败-->调整登录页面
    }
  }).catch((err) => {
    console.log(err);
  });
}

2.发送短信接口与短信登录接口

这里使用容联云服务，来通过短信发送验证码

云通讯后台管理：https://console.yuntongxun.com/member/numbermanager
容联云短信开发手册：https://doc.yuntongxun.com/pe/5f029ae7a80948a1006e776e

参考容联云短信开发手册，构建发送短信的工具类，代码如下：

#tools/common.py
from ronglian_sms_sdk import SmsSDK
import json
accId = '容联云通讯分配的主账号ID'
accToken = '容联云通讯分配的主账号TOKEN'
appId = '容联云通讯分配的应用ID'

# 发送短信
def send_message(mobile,sms_code):
    sdk = SmsSDK(accId, accToken, appId)
    tid = '1'
    mobile = mobile
    datas = (sms_code, )
    resp = sdk.sendMessage(tid, mobile, datas)
    data = json.loads(resp) #json-->对象
    print(data)
    if data['statusCode'] == '000000':
    	return True
    return False

接口：发送短信（验证码）接口、登录接口

# user/views.py
# 发送验证码/获取验证码接口
class SendMobileCodeView(APIView):
    def get(self, request):
        # send_sms前端： /sendsms/?phone=${this.account}/
        phone = request.GET.get('phone')
        print(phone)
        #if not re.match(r"1[3-9]\d{9}$",phone):
        #    return Response({"message":"手机号验证失败！","code":"410"})
        flag = r.get_str("phone")
        if flag:
        	return Response({"message":"一分钟只能发送一次验证码，请稍稍后发送！","code":"200"})
        sms_code = random.randint(1000,9999)
        r.delete_str("sms_code")
        r.setex_str("sms_code",60*5,sms_code) # times：验证码5分钟有效期
        send_message(phone, sms_code) # 发送短信（验证码）
        r.setex_str("phone",60,phone) #同一个手机号60s内只能发送一次验证码
        return Response({"message":"发送成功","code":"200"})

# 手机短信登录接口
class LoginView(APIView):
    def post(self, request):
        myphone = request.data.get("mobile")
        mycode = request.data.get("code")
        sms_code = r.get_str("sms_code") #从redis中取出系统生成的验证码
        
        if mycode == sms_code: #与前端发送来的验证码对比
            user = UsersModel.objects.filter(phone=myphone).first()
            # 获取用户信息 生成 jwt token
            token = mjwt.jwt_encode({"userid":user.id,"exp":int(time.time()) + 3600}) 
            
            return Response({"code":200,"token":token,"userid":user.id})
        else:
            return Response({"code":4001,"message":"验证码错误！"})

3.Vue 设置interceptors拦截器

客户端把token存在 localStorage中，以后每次请求在头部携带token。vue interceptors拦截器，对每次请求前统一在头部添加token

src\http\index.js

import axios from "axios"
import settings from "../settings";
import router from "../router"

const http = axios.create({
    // timeout: 2500,                          // 请求超时，有大文件上传需要关闭这个配置
    baseURL: settings.host,     // 设置api服务端的默认地址[如果基于服务端实现的跨域，这里可以填写api服务端的地址，如果基于nodejs客户端测试服务器实现的跨域，则这里不能填写api服务端地址]
    withCredentials: false,                    // 是否允许客户端ajax请求时携带cookie
})

// 请求拦截器 +token
http.interceptors.request.use((config) => {
    console.log("http请求之前");
    //获取登录后localStorage存储的token
    let token = localStorage.getItem('token') 
    if (token) {
        config.headers.Authorization = token;
    }
    return config;
}, (error) => {
    console.log("http请求错误");
    return Promise.reject(error);
});


// 响应拦截器
http.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (error.code === "ERR_NETWORK") {
        ElMessage.error("网络异常，无法请求服务端信息！");
    }
    if (error.response.status === 401) {
        ElMessage.error("未登录或登录超时！限制本次请求操作！请求登录后继续！");
        return router.push("/login");
    }

    return Promise.reject(error);
});

export default http;

4. 服务端验证采用自定义中间件方式实现

自定义中间件，继承MiddiwareMinxin类重写process_request.方法中

定义白名单，在登录前需要操作的接口放到白名单中
a.如果不在白名单，获取token，验证
b.验证是否被修改，是否过期，是否已经退出（点击退出，把token存入redis,加一个过期时间），任何一个问题，return 401没有权限操作，通过继续下一步操作

from django.http import JsonResponse
from django.utils.deprecation import MiddlewareMixin
from tools.myjwt import mjwt
from tools.myredis import r
import time


class PermitionMiddleware(MiddlewareMixin):
    def process_request(self, request):
        # 1.定义白名单，在登录前需要操作的接口放到白名单中
        wlist = ['/register/', '/login/', '/sendsms/']
        # 获取当前的url
        path = request.path
        # 2.如果不在白名单，获取token，验证
        if path not in wlist:
            try:
                token = request.headers.get('Authorization')
                data = mjwt.jwt_decode(token)
            except:
                return JsonResponse({"code": 401, "mes": "token不存在或者被修改"})
            # data没问题 ↓
            exp = int(data['exp'])
            now = int(time.time())
            # 判断是否过期
            if now > exp:
                return JsonResponse({"code": 401, "mes": "token已经过期不能操作"})
            #是否退出,退出时存token
            value = r.get_str(token)
            if value:
                return JsonResponse({"code": 401, "mes": "用户已经退出，不能操作"})
        # ↑↑↑3.验证是否被修改，是否过期，是否已经退出 （点击退出，把token存入redis, 加一个过期时间），任何一个问题，return 401没有权限操作，通过继续下一步操作

不要忘记在主项目下的settings.py文件下配置写好的自定义中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    # 'user.middleware.PermitionMiddleware', #自定义中间件
]

5. 操作流程及效果图如下：

1.输入手机号，点击发送验证码

2.手机接收验证码

3.输入验证码后，点击登录

三、通过第三方平台进行登录

三方登录，这里以钉钉为例

1.准备工作

钉钉开放平台：https://open.dingtalk.com/

进入钉钉开放平台，注册登录钉钉账号

注册应用，配置回调地址

具体操作流程如下：

1.登录开发者后台

2.创建应用

3.安全设置

4.凭证与基础信息

5.权限管理

2.前端钉钉登录界面

  <!-- 0-密码登录 -->
  <div class="inp" v-if="user.login_type==0">
    <input v-model="user.account" type="text" placeholder="用户名 / 手机号码 / 邮箱" class="user">
    <input v-model="user.password" type="password" class="pwd" placeholder="密码">
    <div class="rember">
      <label>
        <input type="checkbox" class="no" v-model="user.rememberMe"/>
        <span>记住我</span>
      </label>
      <p>忘记密码</p>
    </div>
    <button class="login_btn" @click="show_captcha">登录</button>
    <p class="go_login" >没有账号 <router-link to="/register">立即注册</router-link></p>
    <p><a :href="ddurl">钉钉登录</a></p>
  </div>

onMounted(()=>{
  http.get("dingtalkLogin/").then((result) => {
    ddurl.value = result.data.url;
    console.log(result.data);
  }).catch((err) => {
    alert(err)
  });
})

3.后端逻辑处理

三方登录表：

字段：id、userid（外键）、方式（wb、qq、dd）、uid、token、retoken

处理流程：

1.点击钉钉登录，调用钉钉三方登录接口DingTalkLogin，跳转到钉钉授权页面
2.授权通过，登录成功，根据回调地址进行成功接口的回调
获取code、调用授权接口、获取uid
根据token获取手机号
查询三方登录表
不存在，在用户表中进行注册，同时更新三方登录表

根据uid获取用户信息，生成token，跳转到前端页面

# 钉钉三方登录接口
class DingTalkLogin(APIView):
    def get(self, request):
        from urllib.parse import quote
        params = [
            f"redirect_uri={quote('http://127.0.0.1:8000/user/dingtalkCallback/')}",
            "response_type=code",
            "client_id=dingrcnkswwakld0y5jx",
            "scope=openid",
            "prompt=consent"
        ]
        url = "https://login.dingtalk.com/oauth2/auth?" + ("&".join(params))
        return Response({"url": url})

# 钉钉回调接口(钉钉登录接口 点击登录后调用)
class DingTalkCallback(APIView):
    def get(self, request):
        authCode = request.query_params.get('authCode')
        # 根据authCode获取用户accessToken
        data = {
            "clientId": "钉钉开放平台-Client ID",
            "clientSecret": "钉钉开放平台-Client Secret",
            "code": authCode,
            "grantType": "authorization_code"
        }
        resp = requests.post('https://api.dingtalk.com/v1.0/oauth2/userAccessToken', json=data).json()
        accessToken = resp.get('accessToken')

        # 根据accessToken获取用户信息
        headers = {"x-acs-dingtalk-access-token": accessToken}
        resp = requests.get('https://api.dingtalk.com/v1.0/contact/users/me', headers=headers).json()
        name = resp.get('nick')
        uid = resp.get('openId')
        phone = resp.get('mobile')

        print(name)
        print(uid)
        print(phone)
        # ---
        # 登录，查询三方登录表,是否存在
        Sfuser = SfLoginModel.objects.filter(uid__exact=uid).first()
        print("三方登录表中--->")
        print(Sfuser)
        if Sfuser is None:
            # 注册用户表和三方登录表（先判断用户表是否已有用户信息）
            user = UsersModel.objects.filter(phone__exact=phone).first()
            print(user)
            if user is None:
                userinfo = {"phone":phone,"username":name, "password":"123"}
                userSer = UsersSerializer(data=userinfo)
                if userSer.is_valid():
                    userSer.save()
                else:
                    return Response({"code":10001,"message":userSer.errors})
            # 存在用户，写入三方登录表
            sfinfo = {"type":1,"uid":uid,"token":accessToken,"user":user.id}
            sfSer = SfLoginSerializer(data=sfinfo)
            if sfSer.is_valid():
                sfSer.save()
            else:
                return Response({"code":10001,"message":sfSer.errors})
        else:
            #三方登录表中存有信息，uid->获取用户信息，生成token
            # 根据uid获取用户信息，生成token，跳转到前端页面
            user = Sfuser.user
            Sfuser.token = accessToken
            Sfuser.save()

        # 生成jwt token 并返回前端
        payload = {"userid":user.id, "username":user.username,"exp":int(time.time()) + 3600}
        token = mjwt.jwt_encode(payload)
        payload["exp"] = int(time.time()) + 3600
        retoken = mjwt.jwt_encode(payload)
        query = [f"userid={payload['userid']}",f"username={payload['username']}",f"token={token}",f"retoken={retoken}"]

        
        return HttpResponseRedirect('http://localhost:3000/?' + '&'.join(query))