• Day112.尚医通：手机验证码登录功能

    目录

    一、手机验证码接口实现

    1、在service下创建service_user模块

    2、实现登录注册接口

    一、手机验证码登录生成token

    1、单点登录方案：

    2、JWT工具：

    3、实现JWP整合

    二、申请、集成阿里云短信服，搭建接口

    三、完成登录接口

    四、前端页面实现

    一、手机验证码接口实现

    1、在service下创建service_user模块

    详见课件

    1. # 服务端口
    2. server.port=8203
    3. # 服务名
    4. spring.application.name=service-user
    5.  
    6. # 环境设置：dev、test、prod
    7. spring.profiles.active=dev
    8.  
    9. # mysql数据库连接
    10. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    11. spring.datasource.url=jdbc:mysql://localhost:3306/yygh_user?characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8
    12. spring.datasource.username=root
    13. spring.datasource.password=********
    14.  
    15. #返回json的全局时间格式
    16. spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
    17. spring.jackson.time-zone=GMT+8
    18.  
    19. #mybatis日志
    20. mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
    21.  
    22. #mongo 配置
    23. #spring.data.mongodb.uri=mongodb://192.168.86.86:27017/test
    24.  
    25. # nacos服务地址
    26. spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
    27.  
    28. #配置mapper xml文件的路径
    29. mybatis-plus.mapper-locations=classpath:com/atguigu/yygh/user/mapper/xml/*.xml

    2、实现登录注册接口

    1. 分析接口

    *参数：LoginVo，请求 

    *返回值：map(登录标识、用户名)

    2. controller

    1. @Api(tags = "用户接口")
    2. @RestController
    3. @RequestMapping("/api/user")
    4. public class UserInfoApiController {
    5.  
    6.     @Autowired
    7.     private UserInfoService userInfoService;
    8.  
    9.     @ApiOperation(value = "会员登录")
    10.     @PostMapping("login")
    11.     public R login(@RequestBody LoginVo loginVo, HttpServletRequest request) {
    12.         loginVo.setIp(IpUtils.getIpAddr(request));
    13.         Map map = userInfoService.login(loginVo);
    14.         return R.ok().data(map);
    15.     }
    16.  
    17.  
    18. }

    3. service

    1. @Service
    2. public class UserInfoServiceImpl extends
    3.         ServiceImpl implements UserInfoService {
    4.  
    5.     //会员登录
    6.     @Override
    7.     public Map login(LoginVo loginVo) {
    8.         //1.数据校验
    9.         String phone = loginVo.getPhone();
    10.         String code = loginVo.getCode();
    11.         if(StringUtils.isEmpty(phone)||StringUtils.isEmpty(code)){
    12.             throw new YyghException(20001,"注册信息有误");
    13.         }
    14.         //2. TODO 校验验证码
    15.  
    16.         //3.根据手机号查询用户信息
    17.         QueryWrapper wrapper = new QueryWrapper<>();
    18.         wrapper.eq("phone",phone);
    19.         UserInfo userInfo = baseMapper.selectOne(wrapper);
    20.  
    21.         //4.用户信息为空，走注册功能
    22.         if(userInfo==null){
    23.             userInfo = new UserInfo();
    24.             userInfo.setPhone(phone);
    25.             userInfo.setStatus(1); //0锁定 1正常
    26.             baseMapper.insert(userInfo);
    27.         }
    28.         //5.判断用户是否被锁定
    29.         if(userInfo.getStatus()==0){
    30.             throw new YyghException(20001,"用户已被锁定");
    31.         }
    32.         //6.补全用户信息
    33.         //返回页面显示名称
    34.         Map map = new HashMap<>();
    35.         String name = userInfo.getName();
    36.         if(StringUtils.isEmpty(name)) {
    37.             name = userInfo.getNickName();
    38.         }
    39.         if(StringUtils.isEmpty(name)) {
    40.             name = userInfo.getPhone();
    41.         }
    42.         //7. TODO 用户登录
    43.  
    44.         map.put("token", "");
    45.         map.put("name", name);
    46.         return map;
    47.     }
    48.  
    49. }

    一、手机验证码登录生成token

    1、单点登录方案：

    1.Session广播(广播风暴、浪费带宽)

    2.Redis+cookie

    3. token+cookie

    2、JWT工具：

    JWT（Json Web Token）是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。

    JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源。比如用在用户登录上

    JWT最重要的作用就是对 token信息的防伪作用。

    原理：一个JWT由三个部分组成：公共部分、私有部分、签名部分。最后由这三者组合进行base64编码得到JWT。

    3、实现JWP整合

    1. common_utils模块添加依赖

    1.         
    2.         <dependency>
    3.             <groupId>io.jsonwebtokengroupId>
    4.             <artifactId>jjwtartifactId>
    5.         dependency>

    2. 添加JWT工具类

    1. public class JwtHelper {
    2.     private static long tokenExpiration = 24*60*60*1000;
    3.     private static String tokenSignKey = "123456";
    4.  
    5.     public static String createToken(Long userId, String userName) {
    6.         String token = Jwts.builder()
    7.                 .setSubject("YYGH-USER")
    8.                 .setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))
    9.                 .claim("userId", userId)
    10.                 .claim("userName", userName)
    11.                 .signWith(SignatureAlgorithm.HS512, tokenSignKey)
    12.                 .compressWith(CompressionCodecs.GZIP)
    13.                 .compact();
    14.         return token;
    15.     }
    16.     public static Long getUserId(String token) {
    17.         if(StringUtils.isEmpty(token)) return null;
    18.         Jws claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
    19.         Claims claims = claimsJws.getBody();
    20.         Integer userId = (Integer)claims.get("userId");
    21.         return userId.longValue();
    22.     }
    23.     public static String getUserName(String token) {
    24.         if(StringUtils.isEmpty(token)) return "";
    25.         Jws claimsJws
    26.                 = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
    27.         Claims claims = claimsJws.getBody();
    28.         return (String)claims.get("userName");
    29.     }
    30.     
    31.     public static void main(String[] args) {
    32.         String token = JwtHelper.createToken(1L, "55");
    33.         System.out.println(token);
    34.         System.out.println(JwtHelper.getUserId(token));
    35.         System.out.println(JwtHelper.getUserName(token));
    36.     }
    37. }

    3. 完善service方法，实现接口功能、

    1.     //会员登录
    2.     @Override
    3.     public Map login(LoginVo loginVo) {
    4.         ...
    5.         //7. TODO 用户登录
    6.         String token = JwtHelper.createToken(userInfo.getId(), userInfo.getName());
    7.  
    8.         map.put("token", token);
    9.         map.put("name", name);
    10.         return map;

    二、申请、集成阿里云短信服，搭建接口

    官方文档：Java SDK - 短信服务 - 阿里云

    1. 开通鼎信短信服务 鼎信 (参考课件)

    需要申请签名、模板

    2. 在service模块下创建子模块service_msm

    导入依赖：

    1.     <dependencies>
    2.         
    3.         <dependency>
    4.             <groupId>com.alibabagroupId>
    5.             <artifactId>fastjsonartifactId>
    6.         dependency>
    7.         
    8.         <dependency>
    9.             <groupId>com.aliyungroupId>
    10.             <artifactId>aliyun-java-sdk-coreartifactId>
    11.         dependency>
    12.     dependencies>

    application.properties

    1. # 服务端口
    2. server.port=8204
    3. # 服务名
    4. spring.application.name=service-msm
    5.  
    6. spring.redis.host=192.168.86.86
    7. spring.redis.port=6379
    8. spring.redis.database= 0
    9. spring.redis.timeout=1800000
    10.  
    11. spring.redis.lettuce.pool.max-active=20
    12. spring.redis.lettuce.pool.max-wait=-1
    13. #最大阻塞等待时间(负数表示没限制)
    14. spring.redis.lettuce.pool.max-idle=5
    15. spring.redis.lettuce.pool.min-idle=0
    16. #最小空闲
    17.  
    18. #返回json的全局时间格式
    19. spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
    20. spring.jackson.time-zone=GMT+8
    21.  
    22. # nacos服务地址
    23. spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

     添加网关配置

    1. #设置路由id
    2. spring.cloud.gateway.routes[3].id=service-msm
    3. #设置路由的uri
    4. spring.cloud.gateway.routes[3].uri=lb://service-msm
    5. #设置路由断言,代理servicerId为auth-service的/auth/路径
    6. spring.cloud.gateway.routes[3].predicates= Path=/*/msm/**

    3. 实现controller

    1. @Api(description = "发送验证码")
    2. @RestController
    3. @RequestMapping("/api/msm")
    4. public class MsmController {
    5.     @Autowired
    6.     private MsmService msmService;
    7.     @Autowired
    8.     private RedisTemplate redisTemplate;
    9.  
    10.     @ApiOperation(value = "发送验证码短信")
    11.     @GetMapping(value = "/send/{phone}")
    12.     public R send(@PathVariable String phone) {
    13.         //1.根据手机号查询redis，获取验证码进行校验
    14.         String redisCode = redisTemplate.opsForValue().get(phone);
    15.         if(redisCode!=null){
    16.             return R.ok();
    17.         }
    18.         //2。获取新的验证码，封装验证码
    19.         String code = RandomUtil.getFourBitRandom();
    20.         Map paramMap = new HashMap<>();
    21.         paramMap.put("code",code);
    22.  
    23.         //3.调用接口发送短信
    24.         boolean isSend = msmService.send(phone,paramMap);
    25.  
    26.         //4.将验证码存入Redis，时效五分钟
    27.         if(isSend){
    28.             redisTemplate.opsForValue().set(phone,code,5, TimeUnit.MINUTES);
    29.             return R.ok();
    30.         }else {
    31.             return R.error().message("发送短信失败");
    32.         }
    33.     }
    34. }

    4. service

    1. @Service
    2. public class MsmServiceImpl implements MsmService {
    3.     //发送验证码短信
    4.     @Override
    5.     public boolean send(String phone, Map paramMap) {
    6.         //1.手机号验空
    7.         if(StringUtils.isEmpty(phone)){
    8.             return false;
    9.         }
    10.  
    11.         //3.创建请求对象存入参数  AccessKey id、秘钥
    12.         DefaultProfile profile =
    13.                 DefaultProfile.getProfile("default", "LTAI5tMGtK....", "baAdNzxAjnIMKU3....");
    14.         IAcsClient client = new DefaultAcsClient(profile);
    15.  
    16.         CommonRequest request = new CommonRequest();
    17.         //request.setProtocol(ProtocolType.HTTPS);
    18.         request.setMethod(MethodType.POST);
    19.         request.setDomain("dysmsapi.aliyuncs.com");
    20.         request.setVersion("2017-05-25");
    21.         request.setAction("SendSms");
    22.  
    23.         request.putQueryParameter("PhoneNumbers", phone);
    24.         //要与申请的签名相同
    25.         request.putQueryParameter("SignName", "我的谷粒在线教育网站");
    26.         request.putQueryParameter("TemplateCode", "SMS_183195440");
    27.         request.putQueryParameter("TemplateParam", JSONObject.toJSONString(paramMap));
    28.  
    29.         try {
    30.             //4.使用客户端对象方法发送请求，获取响应
    31.             CommonResponse response = client.getCommonResponse(request);
    32.  
    33.             //5.从响应中获取最终结果
    34.             System.out.println(response.getData());
    35.             return response.getHttpResponse().isSuccess();
    36.  
    37.         } catch (ClientException e) {
    38.             e.printStackTrace();
    39.             throw new YyghException(20001,"短信发送失败");
    40.         }
    41.     }
    42. }

    三、完成登录接口

    1. user模块导入redis配置

    1. #redis
    2. spring.redis.host=192.168.86.86
    3. spring.redis.port=6379
    4. spring.redis.database= 0
    5. spring.redis.timeout=1800000
    6.  
    7. spring.redis.lettuce.pool.max-active=20
    8. spring.redis.lettuce.pool.max-wait=-1
    9. #最大阻塞等待时间(负数表示没限制)
    10. spring.redis.lettuce.pool.max-idle=5
    11. spring.redis.lettuce.pool.min-idle=0

    2. 修改service方法

    1. @Autowired
    2.     RedisTemplate redisTemplate;
    3.  
    4.     //会员登录
    5.     @Override
    6.     public Map login(LoginVo loginVo) {
    7.         //1.数据校验
    8.         String phone = loginVo.getPhone();
    9.         String code = loginVo.getCode();
    10.         if(StringUtils.isEmpty(phone)||StringUtils.isEmpty(code)){
    11.             throw new YyghException(20001,"注册信息有误");
    12.         }
    13.         //2. TODO 校验验证码
    14.         //2.1 根据手机号从redis取出验证码
    15.         String rediscode = redisTemplate.opsForValue().get(phone);
    16.         //2.2 对比验证码
    17.         //2.2 对比验证码，注意字符串空指针
    18.         if(!code.equals(rediscode)){
    19.             throw new YyghException(20001,"验证码有误");
    20.         }
    21.         //3.根据手机号查询用户信息
    22.         QueryWrapper wrapper = new QueryWrapper<>();
    23.         wrapper.eq("phone",phone);
    24.         UserInfo userInfo = baseMapper.selectOne(wrapper);
    25.  
    26.         //4.用户信息为空，走注册功能
    27.         if(userInfo==null){
    28.             userInfo = new UserInfo();
    29.             userInfo.setPhone(phone);
    30.             userInfo.setStatus(1); //0锁定 1正常
    31.             baseMapper.insert(userInfo);
    32.         }
    33.         //5.判断用户是否被锁定
    34.         if(userInfo.getStatus()==0){
    35.             throw new YyghException(20001,"用户已被锁定");
    36.         }
    37.         //6.补全用户信息
    38.         //返回页面显示名称
    39.         Map map = new HashMap<>();
    40.         String name = userInfo.getName();
    41.         if(StringUtils.isEmpty(name)) {
    42.             name = userInfo.getNickName();
    43.         }
    44.         if(StringUtils.isEmpty(name)) {
    45.             name = userInfo.getPhone();
    46.         }
    47.         //7. TODO 用户登录
    48.         String token = JwtHelper.createToken(userInfo.getId(), userInfo.getName());
    49.  
    50.         map.put("token", token);
    51.         map.put("name", name);
    52.         return map;
    53.     }

    四、前端页面实现

    1.创建API接口方法

    userinfo.js

    1. import request from '@/utils/request'
    2.  
    3. const api_name = `/api/user`
    4.  
    5. export default {
    6.     //登录验证
    7.     login(userInfo) {
    8.         return request({
    9.             url: `${api_name}/login`,
    10.             method: `post`,
    11.             data: userInfo
    12.         })
    13.     }
    14. }

    msm.js

    1. import request from '@/utils/request'
    2.  
    3. const api_name = `/api/msm`
    4.  
    5. export default {
    6.     //发送验证短信
    7.     sendCode(mobile) {
    8.         return request({
    9.             url: `${api_name}/send/${mobile}`,
    10.             method: `get`
    11.         })
    12.     }
    13. }

    2. 修改layouts/myheader.vue

    1. <template>
    2.     <div class="header-container">
    3.         <div class="wrapper">
    4.             
    5.             <div class="left-wrapper v-link selected">
    6.                 <img style="width: 50px" width="50" height="50" src="~assets/images/logo.png">
    7.                 <span class="text">尚医通 预约挂号统一平台span>
    8.             div>
    9.             
    10.             <div class="search-wrapper">
    11.                 <div class="hospital-search animation-show">
    12.                     <el-autocomplete class="search-input small" prefix-icon="el-icon-search" v-model="state"
    13.                         :fetch-suggestions="querySearchAsync" placeholder="点击输入医院名称" @select="handleSelect">
    14.                         <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 span>
    15.                     el-autocomplete>
    16.                 div>
    17.             div>
    18.             
    19.             
    20.             <div class="right-wrapper">
    21.                 <span class="v-link clickable">帮助中心span>
    22.                 <span v-if="name == ''" class="v-link clickable" @click="showLogin()" id="loginDialog">登录/注册span>
    23.                 <el-dropdown v-if="name != ''" @command="loginMenu">
    24.                     <span class="el-dropdown-link">
    25.                         {{ name }}<i class="el-icon-arrow-down el-icon--right">i>
    26.                     span>
    27.                     <el-dropdown-menu class="user-name-wrapper" slot="dropdown">
    28.                         <el-dropdown-item command="/user">实名认证el-dropdown-item>
    29.                         <el-dropdown-item command="/order">挂号订单el-dropdown-item>
    30.                         <el-dropdown-item command="/patient">就诊人管理el-dropdown-item>
    31.                         <el-dropdown-item command="/logout" divided>退出登录el-dropdown-item>
    32.                     el-dropdown-menu>
    33.                 el-dropdown>
    34.             div>
    35.         div>
    36.  
    37.         
    38.         <el-dialog :visible.sync="dialogUserFormVisible" style="text-align: left;" top="50px" :append-to-body="true"
    39.             width="960px" @close="closeDialog()">
    40.             <div class="container">
    41.  
    42.                 
    43.                 <div class="operate-view" v-if="dialogAtrr.showLoginType === 'phone'">
    44.                     <div class="wrapper" style="width: 100%">
    45.                         <div class="mobile-wrapper" style="position: static;width: 70%">
    46.                             <span class="title">{{ dialogAtrr.labelTips }}span>
    47.                             <el-form>
    48.                                 <el-form-item>
    49.                                     <el-input v-model="dialogAtrr.inputValue" :placeholder="dialogAtrr.placeholder"
    50.                                         :maxlength="dialogAtrr.maxlength" class="input v-input">
    51.                                         <span slot="suffix" class="sendText v-link" v-if="dialogAtrr.second > 0">{{
    52.                                             dialogAtrr.second }}s span>
    53.                                         <span slot="suffix" class="sendText v-link highlight clickable selected"
    54.                                             v-if="dialogAtrr.second == 0" @click="getCodeFun()">重新发送 span>
    55.                                     el-input>
    56.                                 el-form-item>
    57.                             el-form>
    58.                             
    59.                             <div class="send-button v-button" @click="btnClick()"> {{ dialogAtrr.loginBtn }}div>
    60.                         div>
    61.                         <div class="bottom">
    62.                             <div class="wechat-wrapper" @click="weixinLogin()"><span class="iconfont icon">span>
    63.                             div>
    64.                             <span class="third-text"> 第三方账号登录 span>
    65.                         div>
    66.                     div>
    67.                 div>
    68.                 
    69.  
    70.                 
    71.                 <div class="operate-view" v-if="dialogAtrr.showLoginType === 'weixin'">
    72.                     <div class="wrapper wechat" style="height: 400px">
    73.                         <div>
    74.                             <div id="weixinLogin">div>
    75.                         div>
    76.                         <div class="bottom wechat" style="margin-top: -80px;">
    77.                             <div class="phone-container">
    78.                                 <div class="phone-wrapper" @click="phoneLogin()"><span class="iconfont icon">span>
    79.                                 div>
    80.                                 <span class="third-text"> 手机短信验证码登录 span>
    81.                             div>
    82.                         div>
    83.                     div>
    84.                 div>
    85.                 
    86.  
    87.                 <div class="info-wrapper">
    88.                     <div class="code-wrapper">
    89.                         <div><img src="//img.114yygh.com/static/web/code_login_wechat.png" class="code-img">
    90.                             <div class="code-text"><span class="iconfont icon">span>微信扫一扫关注
    91.                             div>
    92.                             <div class="code-text"> “快速预约挂号”div>
    93.                         div>
    94.                         <div class="wechat-code-wrapper"><img src="//img.114yygh.com/static/web/code_app.png"
    95.                                 class="code-img">
    96.                                 <span class="iconfont icon">span><div class="code-text"> 扫一扫下载div>
    97.                             <div class="code-text"> “预约挂号”APPdiv>
    98.                         div>
    99.                     div>
    100.                     <div class="slogan">
    101.                         <div>xxxxxx官方指定平台div>
    102.                         <div>快速挂号 安全放心div>
    103.                     div>
    104.                 div>
    105.             div>
    106.         el-dialog>
    107.     div>
    108. template>

    3. JS实现

    4. 测试

     

  • 相关阅读:
    jpa 连接sqlserver 发布tomcat报错 SunJSSE
    Flutter-无限循环滚动标签
    OceanBase 分布式数据库【信创/国产化】- OceanBase Demo 环境搭建
    关于操作系统中对进程管理的认识
    自动驾驶行业观察之2023上海车展-----车企发展趋势(2)
    Linux CentOS7 lrzsz工具
    HTTP协议
    RustDay04------Exercise[11-20]
    【git】超详细使用指令
    深度学习 神经网络（5）逻辑回归二分类-Pytorch实现乳腺癌预测
  • 原文地址：https://blog.csdn.net/a111042555/article/details/126007649