Python后端-基于Django的博客系统之增加手机验证码登录（九）

原创 已于 2024-09-06 11:07:15 修改 · 1.9k 阅读 · 6
标签
#django #智能手机 #python
于 2024-06-17 11:47:21 首次发布

需求文档

概述

实现基于Redis和第三方短信服务商的短信验证码登录功能。用户可以通过手机号码获取验证码，并使用验证码进行登录。

需求细节
  1. 用户请求验证码
    • 用户在登录页面输入手机号码并请求获取验证码。
    • 系统生成验证码并将其存储在Redis中，同时通过第三方短信服务商发送验证码到用户手机。
  2. 用户提交验证码
    • 用户在登录页面输入手机号码和验证码。
    • 系统验证手机号码和验证码的匹配情况，如果匹配成功，用户登录成功。
功能模块
  1. 短信验证码生成与存储
    • 生成一个随机的6位数字验证码。
    • 验证码和手机号码绑定存储在Redis中，设置验证码有效期（例如5分钟）。
  2. 验证码发送
    • 集成第三方短信服务商API，发送验证码到用户手机。
  3. 验证码验证
    • 校验用户提交的手机号码和验证码是否匹配。
    • 如果匹配成功，允许用户登录。
  4. 用户登录
    • 生成用户会话或JWT令牌，返回给前端。
安全考虑
  • 对于频繁请求验证码的行为进行限制（如一个手机号每分钟只能请求一次，每小时不超过5次）。
  • 验证码存储在Redis中设置合理的过期时间。
  • 确保与第三方短信服务商的API通信使用HTTPS协议。
流程图
  1. 用户请求验证码
    • 用户提交手机号 -> 系统生成验证码 -> 存储到Redis -> 发送验证码到用户手机
  2. 用户提交验证码
    • 用户提交手机号和验证码 -> 系统验证验证码 -> 如果成功，生成会话或JWT令牌 -> 返回登录成功信息

第三方短信服务商

基于aliyun的第三方短信服务商提供5次免费试用功能，开通后配置后台页面如下：

在这里插入图片描述

API地址

调用方式

import urllib, urllib2, sys
import ssl


host = 'https://zwp.market.alicloudapi.com/'
path = '/sms/sendv2'
method = 'GET'
appcode = '你自己的AppCode'
querys = 'mobile=1343994XXXX&content=%E3%80%90%E6%99%BA%E8%83%BD%E4%BA%91%E3%80%91%E6%82%A8%E7%9A%84%E9%AA%8C%E8%AF%81%E7%A0%81%E6%98%AF568126%E3%80%82%E5%A6%82%E9%9D%9E%E6%9C%AC%E4%BA%BA%E6%93%8D%E4%BD%9C%EF%BC%8C%E8%AF%B7%E5%BF%BD%E7%95%A5%E6%9C%AC%E7%9F%AD%E4%BF%A1'
bodys = {
   
   }
url = host + path + '?' + querys

request = urllib2.Request(url)
request.add_header('Authorization', 'APPCODE ' + appcode)
ctx = ssl.create_default_context()
ctx.check_hostname = False
ctx.verify_mode = ssl.CERT_NONE
response = urllib2.urlopen(request, context=ctx)
content = response.read()
if (content):
    print(content)

开启服务

云市场API商品的认证方式主要以下两种方式

  • 简单身份认证Appcode
  • 签名认证

目前先采用简单身份认证，购买4元套餐启动认证，否则请求调用返回403鉴权错误。

在这里插入图片描述

技术实现

技术栈

  • HTML5
  • CSS3
  • JavaScript (使用Vue.js)
  • Axios (用于HTTP请求)

架构概述

  1. 前端部分：使用 Vue.js 编写手机验证码登录页面。
  2. 后端部分：使用 Django 编写 API，处理手机号码和验证码的验证逻辑，并与 Redis 集成存储验证码。

Django + Vue

Django 和 Vue.js 可以很好的集成在一起。Django 处理后端逻辑和 API，而 Vue.js 可以处理前端交互和视图。通过 Django 提供的 API 接口，与 Vue.js 前端进行数据交互。

Vue
  1. 在项目目录下创建 Vue.js 项目
npm install -g @vue/cli
vue create frontend
cd frontend
  1. 创建登录组件

在 src/components/LoginWithSMS.vue 中：

<template>
    <div class="login-container">
        <form
        @submit.prevent="submitLogin">
        <div class="input-group">
            <select id="country_code" v-model="countryCode">

                <!-- 添加其他国家的区号选项 -->
                <option v-for="country in countryCodes" :key="country.code" :value="country.code">{
  
  { country.name }} ({
  
  {
                    country.code }})
                </option>

            </select>
            <input type="text" id="phone_number" v-model="phoneNumber" placeholder="请输入手机号" required>
        </div>
        <div class="input-group">
            <label for="verification_code" style="float: top;">验证码</label>
            <input type="text" class="verification_code" id="verification_code"  v-model="verificationCode"
                   style="width: calc(100%); float: top;" required>
                <button type="button" class="verification_code_button"
                @click="requestVerificationCode" :disabled="isSendingCode" style="float: bottom;">
                {
  
  { buttonText }}
            </button>
        </div>
        <button type="submit">登录</button>
    </form>
    <div v-if="message" class="message">{
  
  { message }}</div>
</div>
        </template>

<script>
import axios from 'axios';
import { countryCodes } from '../assets/countryCodes'; // 导入国家代码数据

export default {
  data() {
    return {
        countryCodes: countryCodes, // 使用导入的国家代码数据
      countryCode: '+86',
      phoneNumber: '',
      verificationCode: '',
      isSendingCode: false,
      countdown: 60,
       message: '', // 添加 message 状态
    };
  },
  computed: {
    buttonText() {
      return this.isSendingCode ? `${this.countdown} 秒后重新获取` :'获取验证码'  ;
    }
  },
  methods: {
    async requestVerificationCode() {
      if (!this.phoneNumber) {
       this.message = '请填写手机号';
        return;
      }
      this.isSendingCode = true;
      try {
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        const response = await axios.post('/api/request_verification_code/', {
          country_code: this.countryCode,
          phone_number: this.phoneNumber,
        }, {
      headers: {
      'Content-Type': 'application/json', // 指定请求的数据格式为 JSON
        'X-CSRFToken': csrftoken
      }
    });
        if (response.data.success) {
          this.isSendingCode = true;
          this.message = '验证码已发送';
          // 开始倒计时
          this.startCountdown();
        } else {
           this.message = '发送验证码失败';
           this.isSendingCode = false;
        }
      } catch (error) {
      console.error(error);
         this.message = '发送验证码失败';
         this.isSendingCode = false;
      }
    },
    async submitLogin() {
      if (!this.phoneNumber || !this.verificationCode) {
        this.message = '请填写完整信息';
        this.isSendingCode = false;
        return;
      }
      try {
      const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        const response = await axios.post('http://localhost:8000/api/login_with_verification_code/', {
          country_code: this.countryCode,
          phone_number: this.phoneNumber,
          verification_code: this.verificationCode,
        }, {
      headers: {
      'Content-Type': 'application/json', // 指定请求的数据格式为 JSON
        'X-CSRFToken': csrftoken
      }
    }
        );
        if (response.data.success) {
           this.message = '登录成功';
          // 可以根据需要进行重定向或其他登录成功操作
        } else {
          this.message = '验证码错误或登录失败';
          this.isSendingCode = false;
        }
      } catch (error) {
        console.error(error);
         this.message = '登录失败';
         this.isSendingCode = false;
      }
    },
    startCountdown() {
      const countdownInterval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(countdownInterval);
          this.countdownTimer = null;
          this.isSendingCode = false;
          this.countdown = 60; // 重置倒计时时间
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.login-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 200px;
  text-align: center;
}

.input-group {
  margin-bottom: 15px;
}


label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], select {
  padding: 8px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.message {
  margin-top: 15px;
  color: red; /* 可以根据需要更改消息的样式 */
}
</style>

配置setting如下:

import { createApp } from 'vue'
import App from './App.vue'
import LoginWithSMS from './components/LoginWithSMS.vue';

createApp(App)
.component('LoginWithSMS', LoginWithSMS)
.mount('#app');
Django

在 Django 中设置 API 来处理手机号码和验证码的验证逻辑，并与 Redis 集成存储验证码。

  1. 创建 Django API 端点

在 myblog 应用中，创建 API 端点以处理验证码请求和登录验证。

from django.urls import path
from .views import request_verification_code, login_with_verification_code

urlpatterns = [
    path('api/request_verification_code/', request_verification_code, name='request_verification_code'),
    path('api/login_with_verification_code/', login_with_verification_code, name='login_with_verification_code'),
]
  1. 创建视图函数

在 blog/views.py 中：

import random
import redis
from django.conf import settings
from django.http import JsonResponse
from django.contrib.auth.models import User
from django.contrib.auth import login
from django.views.decorators.csrf import csrf_exempt
from django.utils.decorators import method_decorator
import json

# 连接Redis
redis_client = redis.StrictRedis(host=settings.REDIS_HOST, port=settings.REDIS_PORT, db=0)

@require_POST
def request_verification_code(request):
    data = json.loads(request.body)
    phone_number = data.get('phone_number')
    if not phone_number:
        return JsonResponse({
   
   'success': False, 'message': '手机号不能为空'}, status=400)
    
    code = str(random.randint(100000, 999999))
    redis_key = f"verification_code:{
     
     phone_number}"
    redis_client.set(redis_key, code, ex=300)  # 5分钟有效期

    # 这里调用第三方短信服务商API发送验证码
    # send_verification_cod
最低0.47元/天 解锁文章
django 发送手机验证码的示例代码
12-24
一、流程分析： 1.用户在项目前端，输入手机号，然后点击【获取验证码】，将手机号发到post到后台。 2.后台验证手机号是否合法，是否已被占用，如果通过验证，则生成验证码，并通过运行脚本，让短信运营商向该手机号，发送该验证码，如果没通过验证，则返回错误信息 3.用户收到短信验证码以后，再次将所有信息post到后台。 4.后台验证各个数据，通过验证则完成实名制认证，如果没通过则返回错误信息。 总结，一次实名验证，需要两次ajax+post 二、对接短信商： 1.在云片网端： 1.注册云片网 地址：https://www.yunpian.com/ 后台管理控制台页面：其中最重要的信息是APIKEY
Python全栈开发案例1000例之在用户登录中加入短信验证码
05-24
本课程主要讲解如下内容： 讲解在云片第三方短信服务商注册账号的流程在云片服务器中申请短信服务：实名认证，签名，模板的申请 创建django项目在用户登录模块中加入短信验证的功能导入模块，发送验证，以及用户接收短信填写之后的验证过程
【django】短信验证码接口设计、互亿无线短信平台、后端逻辑、前端逻辑【16】
python全栈
04-27 1719
一、原理图 二、短信验证码接⼝设计 1、请求⽅式 2、请求参数：路径参数和查询字符串 3、响应结果：JSON 三、短信验证码接⼝定义 class SMScodeView(View): def get(self,request,phone): ''' 匹配并删除图形验证码 发送短信验证码 :param request: :param phone: :return: '''
django-实现登录短信验证
Babysbreath_JTC的博客
04-15 4551
功能演示 核心任务 前端功能: 点击按钮Ajax调用发送验证码功能 输完验证码后Ajax调用验证功能 后端功能: 功能1:发送验证码功能 功能2:验证码检查 后台核心逻辑(不需要手写) 功能3:发短信 功能4:生成短信验证码(随机生成6位数字) 集成Redis 使用Redis代替session缓存, 存储数据! Redis集成到Django中! 扩展功能: 统一接口返...
Django 使用短信验证码登录
她°
03-01 3279
实现页面效果 实现思路 当输入手机号时需要检测该手机号是否注册过，然后点击登录时一起将手机号和验证吗提交给后端，再次校验手机号和验证码。 这里使用form的方式将字段渲染再前端，在form中校验字段。 画页面 首先将字段传入到模板中： views.py： def login_sms(request): if request.method == 'GET': form = LoginSmsForm(request.GET) return render(request,
Django后端-短信验证码登录
zhulianseu的专栏
05-06 2914
本文主要讲一下Django后端实现短信验证码登录。
使用 Django + Vue.js 开发个人博客网站（完整版附源码）—— Python-课程设计-期末项目
WS的小屋
06-14 7999
页面展示： 源码 首页 不同板块 注册页面 登录页面 个人信息 写文章页面 文章详情页面 文章评论 本文主要讲解 Python 后端部分，由于仅仅用到了 vue 作为 js 框架并非前后端分离项目，故前端不单独介绍。 一、项目内容（做什么） 本项目实现了一个网页端的 博客系统 ，该博客系统允许多人注册登录，用户可以在网站上面发布博客，浏览别人发布的博客。 实际意义在于：当一个小组或者一个班级需要进行学习与交流的时候可以用到，大家都可以在上面分享自己的学习心得，然后互相学习，由于本项目分了板
从0开发一个Django博客系统
黑马程序员官方博客
12-21 1466
1. Django默认用户认证系统Django自带用户认证系统它处理用户账号、组、权限以及基于cookie的用户会话。Django认证系统位置django.contrib.auth包含认证框架的核心和默认的模型。Django认证系统同时处理认证和授权认证：验证一个用户是否它声称的那个人，可用于账号登录。授权：授权决定一个通过了认证的用户被允许做什么。Django认证系统包含的内容用户：用户模型类、用户认证。权限：标识一个用户是否可以做一个特定的任务，MIS系统常用到。
Python博客系统源代码，基于Django + Vue.js +MySql，毕业设计
Python代码大全
11-14 1220
本项目实现了一个网页端的 博客系统 ，该博客系统允许多人注册登录，用户可以在网站上面发布博客，浏览别人发布的博客。完整程序代码请在文末地址下载。 1、只要用户有手机号就可以进行注册登录，注册的时候需要 图片验证码 和 手机短信验证码； 2、用户登陆之后可以选择记住我，这样就算下次关闭了浏览器也可以实现 自动登陆； 用户可以修改个人信息，包括 上传头像 等； 3、博客按照类型进行 分类 ，管理员可以在后台管理页面修改具体分为哪几类； 4、用户可以 在线写博客，文本编辑器采用的是 富文本 编辑器，用户使用图形化
Python个人博客项目-3.用户应用开发
热门推荐
Mr数据杨
09-02 2万+
用户管理模块通过Django框架构建，提供了一套包括注册、登录、密码管理、邮箱验证和订阅等在内的全方位用户管理系统。该模块从项目的初始化到应用的配置，逐步实现了一个功能完备、数据管理高效的用户交互平台。模块中的用户模型设计涵盖用户详细信息、订阅记录、邮箱验证与用户浏览数据管理，确保了用户的多样性需求与数据的系统化管理。代码的逻辑清晰，依托Django中的xadmin扩展，实现了用户信息的展示与编辑；而CBV视图的使用，使注册、登录、登出、忘记密码等操作更加简便、友好，符合用户的使用习惯。项目通过多项Djan
191.基于Django框架发送邮件与手机验证码详解
m0_63953077的博客
12-12 2461
基于Django框架发送邮件与手机验证码详解
面试-Django实现注册短信验证码发送
weixin_43673156的博客
04-06 2056
注册的逻辑 注册需要的参数用户名，密码等，主要是图片验证码等输入 输入图片验证码之后，点击获得验证码，这时候要验证图片验证码的正确性 图片验证码正确才会发生短信，用户收到短信之后，输入后，点击注册就可以把数据写入数据库。 图片验证码的作用是防止短信发送的浪费，但是背后真的那么简单吗？想多了，下面讲一下细节。这是代码===> class RegisterForm(forms.Form): username = forms.CharField(label='用户名', max_length=2
Django登录/注册用户为普通表单加入验证码功能
weixin_43573931的博客
09-14 423
Django注册登录添加验证码
django 使用腾讯云SMS短信发送短信验证-----学习心得
weixin_64513070的博客
11-19 1065
django 使用腾讯云SMS短信发送短信验证的学习记录，
Python3版本Django实现免费手机验证码注册
HelloWorld
04-27 1万+
打开网站互亿无线注册一个账号，有50条免费短信 登录进去后会有以下页面 使用图中的APIID和APIKEY开启你的免费手机短信旅程，可以使用接口下载、接口帮助实现Django手机短信验证 开始我的短信教程 1.注册页面加入两个文本框 &amp;lt;li&amp;gt; &amp;lt;label for=&quot;&quot;&amp;gt;手机号码:&am
Django实现同步发送短信验证码和异步发送
qq_66810909的博客
05-26 712
下载： pip install ronglian_sms_sdk 容联云地址:容联云通讯_短信平台、手机验证码、语音验证码、IM即时通讯、云呼叫系统等互联网通信服务 注册账号： 这三个记录下来 添加测试手机号 全部完成 1.非异步 创建一个.py文件 注：这里是在子应用里面创建 然后封装发送短信验证码方法 注这里的 accId accToken appId 就是上面让记得东西 from ronglian_sms_sdk import SmsSDK import...
Django进阶之验证码简单实现
json_li的博客
05-25 1482
是一种方式防止csrf的策略。在用户注册、登录页面的时候使用；为了防止暴力请求，减轻服务器压力。
（超详细）django+html+mysql实现手机验证码登录
最新发布
Everybodynow的博客
12-01 1220
至于这个验证码，网上的教程一般是存储到redis，是一个位于内存空间的轻量化数据库，和mysql相比是不限于存储在硬盘空间的，更方便，不过redis也基本上就是和程序共存亡，在程序结束的时候redis应该也就释放了。而在这里网站给你提供了一个写好的模板，也就是3部分的content，1中的每行都是不一样的API，这里我们先讲发送短信，模板后面再说，上面是两个视图函数，一个是接收手机号，另一个是进行验证。这里就是我们添加模板的API，这里的每一次提交的都是我们在发送短信的API里面使用的内容，
Django项目 | 实现用户注册和登录时的手机号验证
一枚有趣的灵魂~享受编程带来的快乐
11-19 1140
实现用户注册和登录时的手机号验证
python django发送手机号验证码
qq_60954460的博客
09-18 677
手机验证码提示：以下是本篇文章正文内容，下面案例可供参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Carrie_Lei

接咨询接亲自带

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值