第十六篇商城系统-认证系统构建

Posted 波波烤鸭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第十六篇商城系统-认证系统构建相关的知识,希望对你有一定的参考价值。

商城认证服务

一、搭建认证服务环境

  结合我们前面介绍的商城的架构我们需要单独的搭建一个认证服务。

1.创建项目

  首先创建一个SpringBoot项目,然后添加对应的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.12</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.msb.mall</groupId>
    <artifactId>mall-auth-server</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>mall-auth_server</name>
    <description>认证服务</description>
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>2020.0.1</spring-cloud.version>
    </properties>
    <dependencies>
        <!-- 公共依赖 -->
        <dependency>
            <groupId>com.msb.mall</groupId>
            <artifactId>mall-commons</artifactId>
            <version>0.0.1-SNAPSHOT</version>
            <exclusions>
                <exclusion>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>$spring-cloud.version</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

2.注册中心配置

  我们需要把认证服务注册到Nacos中,添加对应的依赖,然后完成对应的配置

# Nacos服务注册
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.56.100:8848
  application:
    name: mall-auth_server
  # 统一的全局的--设置服务器响应给客户端的日期时间格式
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
  thymeleaf:
    cache: false # 关闭Thymeleaf的缓存
server:
  port: 30000

放开Nacos注册中心

然后启动测试

3.登录和注册页面

  然后我们整理登录和注册的相关资源,首先把登录和注册的模板文件拷贝进项目

然后把对应的静态文件拷贝到nginx中。

然后我们需要在host文件中添加对应的配置

修改Nginx的反向代理的配置

然后重启Nginx的服务

然后修改网关服务

最后调整登录和注册页面的静态资源文件的路径.

注册服务的名称:msb-auth,启动对应的服务,测试

登录页面

注册页面

4.注册功能

4.1 手机验证码

  先处理验证码的页面,使其能够倒数操作

JS代码

$(function()
				$("#sendCode").click(function()
					if($(this).hasClass("d1"))
						// 说明正在倒计时
					else
						// 给指定的手机号发送验证码
						timeoutChangeStyle()
					

				);
			)
			var num = 10
			function timeoutChangeStyle()
				$("#sendCode").attr("class","d1")
				if(num == 0)
					// 说明1分钟到了,可以再次发送验证码了
					$("#sendCode").text("发送验证码")
					num= 10;
					$("#sendCode").attr("class","")
				else
					setTimeout('timeoutChangeStyle()',1000)
					$("#sendCode").text(num+"s后再次发送")
				

				num --;
			

4.2 短信验证接口

  通过阿里云的短信服务来实现。我们直接购买0元15次就可以了。https://www.aliyun.com/

进入到对应的管理控制台,查看对应的信息

通过短信供应商提供的相关的编程语言的开发模板开发即可

供应商提供了对应的HttpUtils工具类,我们需要下载保存到我们自己的项目中。

然后封装对应的发送验证码的接口

package com.msb.mall.third.utils;

import lombok.Data;
import org.apache.http.HttpResponse;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.util.HashMap;
import java.util.Map;

/**
 * 短信组件
 */
@ConfigurationProperties(prefix = "spring.cloud.alicloud.sms")
@Data
@Component
public class SmsComponent 

    private String host;
    private String path;
    private String method = "POST";
    private String appCode;

    /**
     * 发送短信验证码
     * @param phone 发送的手机号
     * @param code 发送的短信验证码
     */
    public void sendSmsCode(String phone,String code)
        Map<String, String> headers = new HashMap<String, String>();
        //最后在header中的格式(中间是英文空格)为Authorization:APPCODE 83359fd73fe94948385f570e3c139105
        headers.put("Authorization", "APPCODE " + appCode);
        //根据API的要求,定义相对应的Content-Type
        headers.put("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
        Map<String, String> querys = new HashMap<String, String>();
        Map<String, String> bodys = new HashMap<String, String>();
        bodys.put("content", "code:"+code);
        bodys.put("phone_number", phone);
        bodys.put("template_id", "TPL_0000");


        try 
            HttpResponse response = HttpUtils.doPost(host, path, method, headers, querys, bodys);
            System.out.println(response.toString());
            //获取response的body
            //System.out.println(EntityUtils.toString(response.getEntity()));
         catch (Exception e) 
            e.printStackTrace();
        
    


添加对应的属性信息

4.3 短信功能

  然后我们将短信功能串联起来

4.3.1 third服务

  我们需要在第三方服务中提供对外的接口服务

@RestController
public class SMSController 

    @Autowired
    private SmsComponent smsComponent;

    /**
     * 调用短信服务商提供的短信API发送短信
     * @param phone
     * @param code
     * @return
     */
    @GetMapping("/sms/sendcode")
    public R sendSmsCode(@RequestParam("phone") String phone,@RequestParam("code") String code)
        smsComponent.sendSmsCode(phone,code);
        return R.ok();
    

4.3.2 认证服务

  我们需要在认证服务中通过feign来调用third中提供的短信服务,同时给客户端提供访问的接口

        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-loadbalancer</artifactId>
        </dependency>

放开注解

然后声明Feign的接口

定义对应的Controller

@Controller
public class LoginController 


    @Autowired
    private ThirdPartFeginService thirdPartFeginService;

    @ResponseBody
    @GetMapping("/sms/sendCode")
    public R sendSmsCode(@RequestParam("phone") String phone)
        // 生成随机的验证码
        String code = UUID.randomUUID().toString().substring(0, 5);
        thirdPartFeginService.sendSmsCode(phone,code);
        return R.ok();
    

4.3.3 客户端

  然后我们需要在页面中通过jQuery的异步提交来发送短信

4.3.4 验证码存储

  当我们把验证码通过短信的形式发送给你客户手机,然后我们需要把手机号和对应的验证码存储起来,后面可能会集群部署,这时我们把这个信息存在在Redis中。

添加配置

存储数据

搞定

4.3.5 60秒间隔

  针对验证码发送的间隔必须是60秒以上,这时我们可以在保存到Redis中的数据的值我们加上发送的时间来处理

模板页面也需要做出对应的处理

4.4 注册数据验证

  表单提交的注册数据我们通过JSR303来验证。

首先定义VO对象

package com.msb.mall.vo;

import lombok.Data;
import org.hibernate.validator.constraints.Length;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Pattern;

/**
 * 注册用户的VO对象
 */
@Data
public class UserRegisterVo 

    @NotEmpty(message = "账号不能为空")
    @Length(min = 3,max = 15,message = "账号必须是3~15位")
    private String userName; // 账号

    @NotEmpty(message = "密码不能为空")
    @Length(min = 3,max = 15,message = "密码必须是3~15位")
    private String password; // 密码

    @NotEmpty(message = "手机号不能为空")
    @Pattern(regexp = "^[1][3-9][0-9]9$",message = "手机号不合法")
    private String phone;  // 手机号

    @NotEmpty(message = "验证码不能为空")
    private String code;  // 验证码


然后就是控制器的逻辑代码

    @PostMapping("/sms/register")
    public String register(@Valid UserRegisterVo vo, BindingResult result, Model model)
        if(result.hasErrors())
            // 表示提交的数据不合法
            List<FieldError> fieldErrors = result.getFieldErrors();
            Map<String,String> map = new HashMap<>();
            for (FieldError fieldError : fieldErrors) 
                String field = fieldError.getField();
                String defaultMessage = fieldError.getDefaultMessage();
                map.put(field,defaultMessage);
            
            model.addAttribute("error",map);
            return "/reg";
        
        // 表单提交的注册的数据是合法的

        return "redirect:/login.html";
    

然后就是页面代码处理

验证码的校验

4.5 完整的注册功能

会员服务处理

控制器

   /**
     * 会员注册
     * @return
     */
    @PostMapping("/register")
    public R register(@RequestBody MemberReigerVO vo)
        try 
            memberService.register(vo);
        catch (UsernameExsitException exception)
            return R.error(BizCodeEnume.USERNAME_EXSIT_EXCEPTION.getCode(),
                    BizCodeEnume.USERNAME_EXSIT_EXCEPTION.getMsg());
        catch (PhoneExsitExecption exsitExecption) 
            return R.error(BizCodeEnume.PHONE_EXSIT_EXCEPTION.getCode(),
                    BizCodeEnume.PHONE_EXSIT_EXCEPTION.getMsg以上是关于第十六篇商城系统-认证系统构建的主要内容,如果未能解决你的问题,请参考以下文章

第十六篇 JS实现全选操作

Python 学习 第十六篇:networkx

Python学习第十六篇——异常处理

开始写游戏 --- 第十六篇

第十六篇:计算属性

第十六篇 人类世界