vue+springboot+阿里云短信服务(集成redis实现验证码登录业务)

阿里云短信服务-介绍

        阿里云短信服务(Short Message Service)是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手,即可发送验证码、通知类和营销类短信;国内验证短信秒级触达,到达率最高可达99%;国际/港澳台短信覆盖200多个国家和地区,安全稳定,广受出海企业选用。

应用场景:

  • 验证码
  • 短信通知
  • 推广短信

购买:

进入阿里云官网,搜索短信服务,选择一个便宜的购买就行了

购买过后可以进入控制台查看:

1》首先要设置签名:短信签名是短信发送者的署名,表示发送方的身份。

 点击左侧国内消息    看到签名管理,点添加申请一个 

2》之后点击 模板管理: 模板是包含了短信发送内容,场景,变量信息。

模板张这样: 

 一般模板审核,一到两个工作日

 3》光标移动到用户头像上,在弹出的窗口中点击【AccessKey管理】

 选择使用子用户AccsessKey,前面那个如果泄露了,它可以操作你账户下的所有功能

 然后去创建一个用户

 然后去给刚创建的用户分配权限,key在用户界面的最下面,往下滑,这样,这个用户的key只有短信服务的权限,若泄露了你也可以点击禁用或者删除

 SpringBoot要做的工作:

1需要的jar

       <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>2.1.0</version>
        </dependency>

2 封装后的发送的工具类(里面的 AccessKey 和密码填写自己的 预留的有双引号 ): 也可以参考官网自己封装 Java SDK

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.profile.DefaultProfile;

/**
 * 短信发送工具类
 */
public class SMSUtils {

	/**
	 * 发送短信
	 * @param signName 签名
	 * @param templateCode 模板
	 * @param phoneNumbers 手机号
	 * @param param 参数
	 */
	public static void sendMessage(String signName, String templateCode,String phoneNumbers,String param){
		DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "", "");
		IAcsClient client = new DefaultAcsClient(profile);

		SendSmsRequest request = new SendSmsRequest();
		request.setSysRegionId("cn-hangzhou");
		request.setPhoneNumbers(phoneNumbers);
		request.setSignName(signName);
		request.setTemplateCode(templateCode);
		request.setTemplateParam("{\"code\":\""+param+"\"}");
		try {
			SendSmsResponse response = client.getAcsResponse(request);
			System.out.println("短信发送成功");
		}catch (ClientException e) {
			e.printStackTrace();
		}
	}

}

生成验证码的工具类

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);//生成随机数,最大为9999
            if(code < 1000){
                code = code + 1000;//保证随机数为4位数字
            }
        }else if(length == 6){
            code = new Random().nextInt(999999);//生成随机数,最大为999999
            if(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;
    }
}

验证码业务需求分析:

使用验证码的好处

通过手机号来区分不同的用户

1.方便快捷,无需注册,直接登录        3.使用短信验证码作为登录凭证,无需记忆密码     3.安全

登录流程:

输入手机号》获取验证码》输入验证码》点击登录》登录成功(若是新用户,把信息保存到表中)

涉及到的表:

处理逻辑:

1、在服务端UserController中注入RedisTemplate对象,用于操作Redis
2、在服务端UserController的sendMsg方法中,将随机生成的验证码缓存到Redis中,并设置有效期为5分钟3、在服务端UserController的login方法中,从Redis中获取缓存的验证码,如果登录成功则删除Redis中的验证码

导入redis架包

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

实现代码+逻辑

         


import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.menghui.common.R;
import com.menghui.entity.User;
import com.menghui.service.UserService;
import com.menghui.utils.SMSUtils;
import com.menghui.utils.ValidateCodeUtils;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.util.Map;
import java.util.concurrent.TimeUnit;

@RestController
@RequestMapping("/user")
@Slf4j
public class UserController {

    @Autowired
    private UserService userService;

    @Autowired
    private RedisTemplate redisTemplate;

    /**
     * 发送手机验证码
     * @param user
     * @return
     */
    @PostMapping("/sendMsg")
    public R<String> sendMsg(@RequestBody User user, HttpSession session){
        // 获取手机号
        String phone = user.getPhone();

        if (StringUtils.isNotEmpty(phone)){
             // 生成随机4位验证码
            String code = ValidateCodeUtils.generateValidateCode(4).toString();
            log.info("code={}",code);
            // 调用阿里云提供的短信服务API完成发送短信
            SMSUtils.sendMessage("梦徽酒店","",phone,code);

            // 将生成的验证码缓存到Redis种,设置有效期2分钟
            redisTemplate.opsForValue().set(phone,code,2, TimeUnit.MINUTES);

            // 没有redis 将生成的验证码爆粗到Session
            // session.setAttribute(phone,code);
            R.error("手机验证码发送成功");
        }
        return R.error("发送失败");
    }

    @PostMapping("/login")
    public R<User> login(@RequestBody Map map, HttpSession session){
        log.info(map.toString());
        // 获取手机号
        String phone = map.get("phone").toString();
        // 获取验证码
        String code = map.get("code").toString();

        String codeInSession = redisTemplate.opsForValue().get(phone).toString();

        // 如果刚刚村的是session则 从session中获取保存的验证码
        //String codeInSession = (String) session.getAttribute(phone);

        // 进行验证码的比对
        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);
                user.setStatus(1);
                userService.save(user);
            }

            // 登录成功,把登录后的用户保存
            session.setAttribute("user",user.getId());
            // 登录成功 删除缓存验证码
            redisTemplate.delete(phone);

            return R.success(user);
        }
        return R.error("登录失败");
    }


}

到这里功能已经实现了,但是在redis的管理工具查看可能会乱码

 这时需要我们加入自定义的Redis序列化器


import org.springframework.cache.annotation.CachingConfigurerSupport;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.connection.lettuce.LettuceConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.GenericJackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;

@Configuration
public class RedisConfig extends CachingConfigurerSupport {

    @Bean
    public RedisTemplate<Object, Object> redisTemplate(RedisConnectionFactory connectionFactory) {
        RedisTemplate<Object, Object> redisTemplate = new RedisTemplate<>();

        //默认的Key序列化器为:JdkSerializationRedisSerializer
        redisTemplate.setKeySerializer(new StringRedisSerializer()); // key序列化
        redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer()); // value序列化

        redisTemplate.setConnectionFactory(connectionFactory);
        return redisTemplate;
    }
}

 🆗

  • 1
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
验证码登录通常包含以下步骤: 1. 在前端页面上展示验证码图片,并在提交表单时将验证码值一并提交到后端。 2. 后端接收到验证码值后,通过比较用户提交的验证码值和生成的验证码值是否一致来判断验证码是否正确。 3. 如果验证码正确,则继续进行登录操作;否则返回错误提示信息。 下面是一个使用VueSpring Boot实现验证码登录的示例代码: 前端页面(使用Element UI库): ```html <template> <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item label="验证码" prop="verifyCode"> <el-input v-model="loginForm.verifyCode" placeholder="请输入验证码"></el-input> <img :src="verifyCodeUrl" @click="refreshVerifyCode" style="cursor: pointer;"> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> </template> <script> import { login } from '@/api/user' export default { data() { return { loginForm: { username: '', password: '', verifyCode: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }], verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }] }, verifyCodeUrl: '/api/verifyCode?timestamp=' + new Date().getTime() } }, methods: { refreshVerifyCode() { this.verifyCodeUrl = '/api/verifyCode?timestamp=' + new Date().getTime() }, login() { this.$refs.loginForm.validate(valid => { if (valid) { login(this.loginForm).then(res => { // 登录成功后的操作 }).catch(error => { // 登录失败后的操作 }) } }) } } } </script> ``` 后端代码: ```java @RestController public class LoginController { @Autowired private RedisTemplate<String, String> redisTemplate; @GetMapping("/api/verifyCode") public void verifyCode(HttpServletRequest request, HttpServletResponse response) throws Exception { // 生成验证码 String verifyCode = VerifyCodeUtils.generateVerifyCode(4); // 将验证码存入Redis中,有效期为5分钟 String key = "verifyCode_" + request.getSession().getId(); redisTemplate.opsForValue().set(key, verifyCode, 5, TimeUnit.MINUTES); // 将验证码图片写入响应流中 response.setContentType("image/jpeg"); ServletOutputStream out = response.getOutputStream(); VerifyCodeUtils.outputImage(100, 40, out, verifyCode); } @PostMapping("/api/login") public Result login(@RequestBody LoginForm form, HttpServletRequest request) { // 校验验证码 String key = "verifyCode_" + request.getSession().getId(); String verifyCode = redisTemplate.opsForValue().get(key); if (StringUtils.isBlank(verifyCode)) { return Result.error("验证码已过期,请重新获取"); } if (!verifyCode.equalsIgnoreCase(form.getVerifyCode())) { return Result.error("验证码不正确"); } // 校验用户名和密码 // ... return Result.ok(); } } ``` 其中,`VerifyCodeUtils`是一个工具类,用于生成验证码图片。`LoginForm`是一个表单类,用于接收前端传递的用户名、密码和验证码值。`Result`是一个自定义的返回结果类,用于返回登录结果和错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值