springboot中+vue 单点登录的实现,涉及登录和注册功能的实现,以及登录注册对jwt生成token的操作(其中还涉及阿里云短信验证码的实现)

1:首先介绍单点登录的三种方式

sessiong广播机制,cookie+redis实现,token方式实现

下面看这张图,就能明白这三种的原理实现

2:首先登录的流程:如下图

 3: 登录和注册前后台实现:

1:后台代码:

创建service-sso的模块

controller的方法中代码实现:

@RestController
@RequestMapping("/ssosevice/user")
@CrossOrigin
public class EduUserController {
    @Autowired
    private EduUserService eduUserService;
    //登录
    @PostMapping("login")
    public R loginUser(@RequestBody EduUser eduUser) {
        //member对象封装手机号和密码
        //调用service方法实现登录
        //返回token值,使用jwt生成
        String token = eduUserService.login(eduUser);
        return R.ok().data("token",token);
    }
    //注册
    @PostMapping("register")
    public R registerUser(@RequestBody EduUserVo eduUserVo) {
        eduUserService.register(eduUserVo);
        return R.ok();
    }
    //根据token获取用户信息
    @GetMapping("getUserInfo")
    public R getMemberInfo(HttpServletRequest request) {
        //调用jwt工具类的方法。根据request对象获取头信息,返回用户id
        String memberId = JwtUtils.getMemberIdByJwtToken(request);
        //查询数据库根据用户id获取用户信息
        EduUser member = eduUserService.getById(memberId);
        return R.ok().data("userInfo",member);
    }
}

 

vue 前台实现:借鉴项目中 login.vue,register.vue 和utils/requst.js

其中两点注意,

1:把登录后返回到前台的token字符串,在前端存到cookie中,供拦截器从cookie中获取token

2 : 是写拦截器utils/requst.js,把每次请求的token都从cookie中取到,存到header中,这样后台代码就可以从每次请求的request中获取token字符串了

阿里云短信验证码功能

1:首先在阿里云开通短信验证功能,创建模板和签名

编写发送短信接口

1、在service-msm的pom中引入依赖

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
        </dependency>

 

2:contrller 类,验证码失效时间可以存放到redis中然后设置失效时间

@ApiOperation("发送短信接口")
    @GetMapping("send/{phone}")
    public R send(@PathVariable(value = "phone") String phone){
        // 通过把短信验证码存放到redis中实现,利用redis的设置失效时间,来做验证码五分钟有效期
        //1 从redis获取验证码,如果获取到直接返回
        String code = redisTemplate.opsForValue().get(phone);
        if(!StringUtils.isEmpty(code)) {
            return R.ok();
        }
//        // 目前短信需要花钱,所以把这段先注释掉,现在先用验证码是123456
//        //2 如果redis获取 不到,进行阿里云发送
//        //生成随机值,传递阿里云进行发送
//        code = RandomUtil.getSixBitRandom();
//        Map<String,Object> param = new HashMap<>();
//        param.put("code",code);
//        //调用service发送短信的方法
//        boolean isSend = msmService.send(param,phone);
//        if(isSend) {
//            //发送成功,把发送成功验证码放到redis里面
//            //设置有效时间 5分钟
//            redisTemplate.opsForValue().set(phone,code,5, TimeUnit.MINUTES);
//            return R.ok();
//        } else {
//            return R.error().message("短信发送失败");
//        }

        redisTemplate.opsForValue().set(phone,"123456",5, TimeUnit.MINUTES);
        return R.ok();
    }

3:service实现类

    //发送短信的方法
    @Override
    public boolean send(Map<String, Object> param, String phone) {
        if(StringUtils.isEmpty(phone)) return false;

        DefaultProfile profile =
                DefaultProfile.getProfile("default", "LTAI4FvvVEWiTJ3GNJJqJnk7", "9st82dv7EvFk9mTjYO1XXbM632fRbG");
        IAcsClient client = new DefaultAcsClient(profile);

        //设置相关固定的参数
        CommonRequest request = new CommonRequest();
        //request.setProtocol(ProtocolType.HTTPS);
        request.setMethod(MethodType.POST);
        request.setDomain("dysmsapi.aliyuncs.com");
        request.setVersion("2017-05-25");
        request.setAction("SendSms");

        //设置发送相关的参数
        request.putQueryParameter("PhoneNumbers",phone); //手机号
        request.putQueryParameter("SignName","我的网站"); //申请阿里云 签名名称
        request.putQueryParameter("TemplateCode","SMS_180051135"); //申请阿里云 模板code
        request.putQueryParameter("TemplateParam", JSONObject.toJSONString(param)); //验证码数据,转换json数据传递

        try {
            //最终发送
            CommonResponse response = client.getCommonResponse(request);
            boolean success = response.getHttpResponse().isSuccess();
            return success;
        }catch(Exception e) {
            e.printStackTrace();
            return false;
        }
    }

 

 

 

 

猜你喜欢

转载自blog.csdn.net/qq_39564710/article/details/113701748