【从零开始分析项目实战】12-阿里云手机验证码登录功能的实现

article/2025/10/13 1:48:48

注：本文章基于黑马程序员相关视频及资料进行编写，代码简单，较容易理解，若有问题或者源码资料获取可以在评论区留言或者联系作者！


文章目录

  • 开篇
  • 一、短信发送
      • （1）短信服务介绍
      • （2）阿里云短信服务
      • （3）短信发送-代码开发：
  • 二、手机验证码登录
      • （1）需求分析
      • （2）代码开发-梳理交互过程
      • （3）代码开发-修改LoginCheckFilter
      • （4）代码开发-发送验证码短信
      • （4）代码开发-移动端用户登录

开篇

在这里插入图片描述

一、短信发送

（1）短信服务介绍

目前市面上有很多第三方提供的短信服务，这些第三方短信服务会和各个运营商（移动，联通，电信）对接，我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信。需要说明的是，这些短信服务一般都是收费服务

常用短信服务：阿里云，华为云，腾讯云，京东，梦网，乐信

阿里云短信服务介绍（Short Message Service）：是广大企业客户快速触达手机用户所优选使用的通信能力，调用API或用群发助手，即可发送验证码，通知类和营销类短信；国内验证短信秒级触达，到达率最高可达99%。应用场景：验证码，短信推广，推广短信

（2）阿里云短信服务

  1. 设置短信签名 ：
    短信签名是发送者的署名，表示发送者的身份

  2. 设置短信模板
    短信模板包含短信发送内容，场景，变量信息
    在这里插入图片描述
    在这里插入图片描述

  3. 创建AccessKey管理
    在这里插入图片描述
    在这里插入图片描述
    创建新的用户，允许编程访问
    在这里插入图片描述
    验证成功后，会生成一个AccessKey ID和AccessKey Secret，将其记录下来；

  4. 给用户添加短信权限（若账号密码泄漏，也只能访问短信服务）：
    在这里插入图片描述

（3）短信发送-代码开发：

使用阿里云短信发送服务，可以参照官方提供的文档即可

具体开发步骤：

  1. 导入maven坐标
<dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId><version>4.5.16</version>
</dependency><dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-dysmsapi</artifactId><version>1.1.0</version>
</dependency>

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.exceptions.ServerException;
import com.aliyuncs.profile.DefaultProfile;
import com.google.gson.Gson;
import java.util.*;
import com.aliyuncs.dysmsapi.model.v20170525.*;public class SendSms {public static void main(String[] args) {DefaultProfile profile = DefaultProfile.getProfile("cn-beijing", "<your-access-key-id>", "<your-access-key-secret>");/** use STS TokenDefaultProfile profile = DefaultProfile.getProfile("<your-region-id>",           // The region ID"<your-access-key-id>",       // The AccessKey ID of the RAM account"<your-access-key-secret>",   // The AccessKey Secret of the RAM account"<your-sts-token>");          // STS Token**/IAcsClient client = new DefaultAcsClient(profile);SendSmsRequest request = new SendSmsRequest();request.setPhoneNumbers("1368846****");//接收短信的手机号码request.setSignName("阿里云");//短信签名名称request.setTemplateCode("SMS_20933****");//短信模板CODErequest.setTemplateParam("张三");//短信模板变量对应的实际值try {SendSmsResponse response = client.getAcsResponse(request);System.out.println(new Gson().toJson(response));} catch (ServerException e) {e.printStackTrace();} catch (ClientException e) {System.out.println("ErrCode:" + e.getErrCode());System.out.println("ErrMsg:" + e.getErrMsg());System.out.println("RequestId:" + e.getRequestId());}}
}

二、手机验证码登录

（1）需求分析

为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能
手机验证码登录的优点：

  • 方便快捷，无须注册，直接登录
  • 使用短信验证码作为登录凭证无须记忆密码
  • 安全

注意：通过手机验证码登录，手机号是区分不同用户的标识；

（2）代码开发-梳理交互过程

  1. 在登录页面输入手机号，点击【获取验证码】按钮，页面发送ajax请求，在服务端用短信服务API给指定手机号发送验证码短信
  2. 在登录页面输入验证码，点击【登录按钮】，发送ajax请求，在服务端处理登录请求

然后就是搭建用户登录的大体框架，和之前一样，创建User实体类，UserService，UserServiceImpl，UserMapper和UserController；
另外的要引入一个工具类ValidateCodeUtils ，可以随机生成验证码：

import java.util.Random;/*** 随机生成验证码工具类*/
public class ValidateCodeUtils {/*** 随机生成验证码* @param length 长度为4位或者6位* @return*/public static Integer generateValidateCode(int length){Integer code =null;if(length == 4){code = new Random().nextInt(9999);//生成随机数，最大为9999if(code < 1000){code = code + 1000;//保证随机数为4位数字}}else if(length == 6){code = new Random().nextInt(999999);//生成随机数，最大为999999if(code < 100000){code = code + 100000;//保证随机数为6位数字}}else{throw new RuntimeException("只能生成4位或6位数字验证码");}return code;}/*** 随机生成指定长度字符串验证码* @param length 长度* @return*/public static String generateValidateCode4String(int length){Random rdm = new Random();String hash1 = Integer.toHexString(rdm.nextInt());String capstr = hash1.substring(0, length);return capstr;}
}

（3）代码开发-修改LoginCheckFilter

前面我们已经完成了LoginCheckFilter过滤器的开发，此过滤器用于检查用户的登陆状态，我们在进行手机验证码登录时，发送的请求需要在此过滤器处理时直接放行；

 String[] urls = new String[]{//不需要拦截的请求"/employee/login","/employee/logout","/backend/**","/fornt/**","/common/**","/user/sendMsg",//移动端发送短信"/user/login"//移动端登录

（4）代码开发-发送验证码短信

通过随机验证码生成工具将验证码生成并暂时保存在HttpSession域中；

    /** 发送手机短信验证码*/@PostMapping("/sendMsg")public R<String> sendMsg(@RequestBody User user, HttpSession httpSession){//获取手机号String phone=user.getPhone();if (!StringUtils.isEmpty(phone)){//生成随机的4位验证码String code = ValidateCodeUtils.generateValidateCode(4).toString();log.info("code={}",code);//调用阿里云提供的短信服务API完成发送短信
//            SMSUtils.sendMessage("锦昊","",phone,code);//需要将生成的验证码保存到sessionhttpSession.setAttribute(phone,code);return R.success("手机验证码短信发送成功");}return R.error("短信发送失败");}

（4）代码开发-移动端用户登录

用户登录的上传给服务端的phone和code数据用Map接受，然后提取出来与session域中的数据进行比对，如果相同，则判断其是否为新用户，并进行新增操作；
/** 移动端用户登录*/@PostMapping("/login")public R<User> login(@RequestBody Map map, HttpSession httpSession) {log.info(map.toString());//获取手机号String phone = map.get("phone").toString();//获取验证码String code = map.get("code").toString();//从session中获取保存的验证码Object codeInSession = httpSession.getAttribute(phone);//进行验证码比对，（页面提交的验证码和session中保存的验证码比对）if (codeInSession != null && codeInSession.equals(code)) {//如果能比对成功，说明登录成功LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(User::getPhone, phone);User user = userService.getOne(queryWrapper);if (user == null) {//判断当前手机号对应的用户是否为新用户，如果为新用户，则自动完成注册user = new User();user.setPhone(phone);userService.save(user);}httpSession.setAttribute("user",user.getId());return R.success(user);}return R.error("登录失败");}

在这里插入图片描述

登录成功后一般都会把用户信息返回给前端

如果感觉内容写的还不错的话，一键三连不迷路！！！！
后面将会更新更多学习内容，一起学习吧！！！！！！
在这里插入图片描述


http://chatgpt.dhexx.cn/article/bnljtK7q.shtml

相关文章

手机验证码登录

手机验证码登录

手机验证码登录 符号说明&#xff1a; []&#xff1a;表示可选或某些条件下流程。 需求说明&#xff1a; 用户可在登录页面使用手机验证码登录&#xff0c;若该手机号未绑定则输入验证码后还需输入用户账号密码进行绑定&#xff0c;绑定后则成功使用验证码登录。 用户可在…
阅读更多...
登录模块（手机验证码）

登录模块（手机验证码）

本人为实习生，第一次写博客，写的不好的大家多多谅解 应公司近期需求，需要单独开发一个后台管理系统。 自己按实际业务写了一个登录接口已经实现，时序图如下 源码牵扯业务量太大，这里只放出部分关键实现源码，整合思路可以配合时序图去理解。 Controller层 package com…
阅读更多...
java十大排序算法

java十大排序算法

十大排序算法在面试java过程中想必或多或少都会有。尤其是在笔试题上&#xff0c;有些大厂就让你现场写个十大排序。是不是一下子整懵了。。。 目录 一、首先先介绍下十大排序算法&#xff1a; 1、算法分类 2 、算法复杂度 3、 相关概念 二、详细分析各个算法 1、冒泡排…
阅读更多...
Go语言十大排序算法

Go语言十大排序算法

文章目录 Go语言十大排序算法0x01 冒泡排序0x02 选择排序0x03 插入排序0x04 希尔排序0x05 归并排序0x06 快速排序0x07 堆排序0x08 计数排序0x09 桶排序0x10 基数排序总结按时间复杂度分类&#xff1a;按稳定性分类按排序方式 Go语言十大排序算法 稳定&#xff1a;如果a原本在b前…
阅读更多...
排序算法——十大排序算法总结与对比

排序算法——十大排序算法总结与对比

一、十大排序算法复杂度对比 二、关于排序算法的总结 1、基数排序仅仅适用于整型数的排序&#xff0c;一般不与另外的排序方法一起比较。 2、关于算法的稳定性&#xff1a;不稳定的算法有 “快希选堆”——快速排序&#xff0c;希尔排序&#xff0c;选择排序和堆排序。 3、关…
阅读更多...
十大排序算法（面试必备）

十大排序算法（面试必备）

目录 简单排序 1、冒泡排序 2、选择排序 3、插入排序 高级排序 4、希尔排序&#xff08;缩小增量排序&#xff09; 5、归并排序 6、快速排序 7、计数排序 8、堆排序 9、桶排序 10、基数排序 总结&#xff1a; 1、十大排序算法对比 2、基数排序、计数排序、桶排序…
阅读更多...
十大排序算法学习

十大排序算法学习

Sort 排序类算法是非常常见的算法&#xff0c;包括了比较类排序与非比较类排序 排序能够解决很多问题&#xff0c;有的编程语言也提供了一些排序算法函数&#xff08;比如C的sort&#xff09;但是掌握基本的排序算法原理以及写法仍然是很重要的&#xff0c;并且排序也是面试常…
阅读更多...
十大排序算法（Java）

十大排序算法（Java）

目录 1.冒泡排序 2.快速排序 3.插入排序 4.希尔排序 5.选择排序 6.堆排序 7.归并排序 8.计数排序&#xff1a;速度快&#xff0c;一般用于整数排序 9.桶排序 10.基数排序 1.冒泡排序 冒泡排序思路&#xff1a;&#xff08;两层for循环&#xff09; 比较相邻的元素。…
阅读更多...
十大排序算法(C++)

十大排序算法(C++)

十大排序算法Sorting algorithm(C) 百度百科&#xff1a; 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。排序算法&#xff0c;就是如何使得记录按照要求排列的方法。排序算法在很多领域得到相当地…
阅读更多...
十大排序算法——C语言实现

十大排序算法——C语言实现

1.冒泡排序 ​ 冒泡排序&#xff08;Bubble Sort&#xff09;也是一种简单直观的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数…
阅读更多...
Python实现十大排序算法

Python实现十大排序算法

1.排序算法概述 非线性时间比较类排序&#xff1a;通过比较来决定元素间的相对次序&#xff0c;由于其时间复杂度不能突破O(nlogn)&#xff0c;因此称为非线性时间比较类排序。 线性时间非比较类排序&#xff1a;不通过比较来决定元素间的相对次序&#xff0c;它可以突破基于比…
阅读更多...
Java实现十大排序算法

Java实现十大排序算法

Java实现十大排序算法 十大排序算法分别为&#xff1a;选择排序、冒泡排序、插入排序、快速排序、归并排序、堆排序、希尔排序、桶排序、计数排序、基数排序。 本篇只是为了方便我在代码中直接复制调用&#xff0c;因此原理和思想解释的并不清楚&#xff0c;想看原理的朋友可…
阅读更多...
十大排序算法（C++版）

十大排序算法（C++版）

十大排序算法 前言一、插入排序二、希尔排序三、冒泡排序四、快速排序五、选择排序六、归并排序七、堆排序八、计数排序九、桶排序十、基数排序总结 前言 什么是排序&#xff1f; 排序&#xff1a;将一组杂乱无章的数据按一定规律顺次排列起来。即&#xff0c;将无序序列排成一…
阅读更多...
十大排序算法详解

十大排序算法详解

十大排序算法详解 参考程序员必知必会的十大排序算法详解 引言 对于排序的分类&#xff0c;可以将排序算法分为两大类&#xff1a;基于比较和非比较的算法。 基于比较的排序算法可以细分为&#xff1a; 基于交换类&#xff1a;冒泡排序、快速排序基于插入类&#xff1a;直接插入…
阅读更多...
JS 实现十大排序算法

JS 实现十大排序算法

文章目录 前言零、十大排序一、冒泡排序&#xff08;bubbleSort&#xff09;二、选择排序&#xff08;selectionSort&#xff09;三、插入排序&#xff08;insertSort&#xff09;四、希尔排序&#xff08;shellSort&#xff09;五、归并排序&#xff08;mergeSort&#xff09;…
阅读更多...
十大经典排序算法Java版（动图演示）

十大经典排序算法Java版（动图演示）

文章目录 0 排序算法说明0.1 内部排序和外部排序0.2 比较类排序和非比较类排序0.3 关于时间复杂度0.4 关于稳定性0.5 名词解释&#xff1a; 1 交换排序——冒泡排序&#xff08;Bubble Sort&#xff09;1.1 什么时候最快1.2 什么时候最慢1.3 算法步骤1.4 动图演示1.5 Java实现 …
阅读更多...
html之如何让button按钮居中

html之如何让button按钮居中

解决措施&#xff1a;使用center或者div的align属性 示例代码&#xff1a; <html> <body><center><button onClick"clickme()">hit me</button></center><script>function clickme(){alert("123");} </scr…
阅读更多...
HTML中让表单和提交按钮居中的方法

HTML中让表单和提交按钮居中的方法

表单&#xff1a; form{ width: 500px; /*设置宽度&#xff0c;方便使其居中*/ margin: 40px auto auto auto; /*上右下左*/ font-size: 25px; 提交按钮&#xff1a;div的align属性 <div align"center"><button onClick"clickme()">提交…
阅读更多...
android中的Button按钮居中（水平垂直中）

android中的Button按钮居中（水平垂直中）

今天发现一个很怪异的事 Android Studio中居然一个简单的按钮水品垂直居中都写不出来 下图为理想效果&#xff1a; 可是当我写原始出代码的时候&#xff08;如下&#xff09;&#xff1a; <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android&quo…
阅读更多...
Vue组件居中：文字居中，按钮居中，图片居中等，如何实现在容器中居中

Vue组件居中：文字居中，按钮居中，图片居中等，如何实现在容器中居中

Vue实现组件在容器中居中显示的办法 本文用实验的方法理解各种方法实现居中的效果。 实现水平居中的样式主要有&#xff1a;text-align: center&#xff0c; margin: auto。 当然还有别的方式也可以实现&#xff0c;也会写在下面。 用三个同样的div来控制变量法看效果&#xf…
阅读更多...
推荐文章

Copyright @ 2022~2023