leyou商城day12 JWT+RSA用户权鉴

02、用户注册:服务端数据校验

刚才虽然实现了注册,但是服务端并没有进行数据校验,而前端的校验是很容易被有心人绕过的。所以我们必须在后台添加数据校验功能:

我们这里会使用Hibernate-Validator框架完成数据校验:

而SpringBoot的web启动器中已经集成了相关依赖:

在这里插入图片描述

1)什么是Hibernate Validator

Hibernate Validator是Hibernate提供的一个开源框架,使用注解方式非常方便的实现服务端的数据校验。

官网:http://hibernate.org/validator/

在这里插入图片描述

hibernate Validator 是 Bean Validation 的参考实现 。

Hibernate Validator 提供了 JSR 303 规范中所有内置 constraint(约束) 的实现,除此之外还有一些附加的 constraint。

在日常开发中,Hibernate Validator经常用来验证bean的字段,基于注解,方便快捷高效。

2)Bean校验的注解

常用注解如下:

Constraint详细信息
@Valid被注释的元素是一个对象,需要检查此对象的所有字段值
@Null被注释的元素必须为 null
@NotNull被注释的元素必须不为 null
@AssertTrue被注释的元素必须为 true
@AssertFalse被注释的元素必须为 false
@Min(value)被注释的元素必须是一个数字,其值必须大于等于指定的最小值
@Max(value)被注释的元素必须是一个数字,其值必须小于等于指定的最大值
@DecimalMin(value)被注释的元素必须是一个数字,其值必须大于等于指定的最小值
@DecimalMax(value)被注释的元素必须是一个数字,其值必须小于等于指定的最大值
@Size(max, min)被注释的元素的大小必须在指定的范围内
@Digits (integer, fraction)被注释的元素必须是一个数字,其值必须在可接受的范围内
@Past被注释的元素必须是一个过去的日期
@Future被注释的元素必须是一个将来的日期
@Pattern(value)被注释的元素必须符合指定的正则表达式
@Email被注释的元素必须是电子邮箱地址
@Length被注释的字符串的大小必须在指定的范围内
@NotEmpty被注释的字符串的必须非空
@Range被注释的元素必须在合适的范围内
@NotBlank被注释的字符串的必须非空
@URL(protocol=,host=, port=,regexp=, flags=)被注释的字符串必须是一个有效的url
@CreditCardNumber被注释的字符串必须通过Luhn校验算法,银行卡,信用卡等号码一般都用Luhn计算合法性

3)给User添加校验

在ly-pojo父工程中导入hibernate校验数据的jar包

<dependency>
    <groupId>org.hibernate.validator</groupId>
    <artifactId>hibernate-validator</artifactId>
</dependency>

我们在User对象的部分属性上添加注解:

package com.leyou.enetity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.time.LocalDateTime;
import java.io.Serializable;
import lombok.Data;
import lombok.EqualsAndHashCode;
import org.hibernate.validator.constraints.Length;

/**
 * <p>
 * 用户表
 * </p>
 *
 * @author yy
 * @since 2022-08-09
 */
@Data
@EqualsAndHashCode(callSuper = false)
public class TbUser implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)

    private Long id;

    /**
     * 用户名
     */
    @Length(min = 4,message = "用户名不少于4")
    private String username;

    /**
     * 密码,加密存储
     */
    @Length(min = 4,message = "密码不少于4")
    private String password;

    /**
     * 注册手机号
     */
    private String phone;

    /**
     * 创建时间
     */
    private LocalDateTime createTime;

    /**
     * 更新时间
     */
    private LocalDateTime updateTime;


}

4)在controller上进行控制

在controller中只需要给User添加 @Valid注解即可。
在这里插入图片描述

5)测试

我们故意填错,然后SpringMVC会自动返回错误信息:

在这里插入图片描述

如果需要自定义返回结果,可以这么写:

 /**
     * 用户注册
     * BindingResult: 封装了所有字段验证失败的错误信息
     */
    @PostMapping("/register")
    public ResponseEntity<Void> register(@Valid User user, BindingResult result, @RequestParam("code") String code){
        if(result.hasErrors()){
            //取出错误信息
            String errorMsg = result.getFieldErrors()
                                        .stream()
                                        .map(FieldError::getDefaultMessage)
                                        .collect(Collectors.joining("|"));

            //自行封装异常信息
            throw new LyException(500,errorMsg);
        }

        userService.register(user,code);
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }

我们在User参数后面跟一个BindingResult参数,不管校验是否通过,都会进入方法内部。如何判断校验是否通过呢?

BindingResult中会封装错误结果,我们通过result.hashErrors来判断是否有错误,然后通过result.getFieldErrors来获取错误信息。

再次测试:

在这里插入图片描述
由于每次编写controller都需加上BindingResult,这边采取通过捕获全局异常来处理改提示方法,将commom中的excepiton改造
在这里插入图片描述
在这里插入图片描述

package com.leyou.commom.excepiton;

import com.leyou.commom.exception.pojo.ExceptionResult;
import com.leyou.commom.exception.pojo.LyException;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.validation.BindException;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.validation.ConstraintViolation;
import javax.validation.ConstraintViolationException;
import java.util.List;
import java.util.Set;
import java.util.stream.Collectors;

/**
 * 全局异常处理器
 * @author yy
 */
@ControllerAdvice
public class LyExceptionController {

    @ExceptionHandler(LyException.class)
    @ResponseBody
    public ResponseEntity<ExceptionResult> handlerException(LyException e){
        return ResponseEntity.status(e.getStatus()).body(new ExceptionResult(e));
    }

    @ExceptionHandler(BindException.class)
    @ResponseBody
    public ResponseEntity<ExceptionResult> bindExceptionHandler(BindException e) {
        List<FieldError> fieldErrors = e.getBindingResult().getFieldErrors();
        String collect = fieldErrors.stream()
                .map(o -> o.getDefaultMessage())
                .collect(Collectors.joining(","));
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ExceptionResult(HttpStatus.BAD_REQUEST.value(),collect));
    }
    // <2> 处理 json 请求体调用接口校验失败抛出的异常
    @ExceptionHandler(MethodArgumentNotValidException.class)
    @ResponseBody
    public ResponseEntity<ExceptionResult> methodArgumentNotValidExceptionHandler(MethodArgumentNotValidException e) {
        List<FieldError> fieldErrors = e.getBindingResult().getFieldErrors();
        String collect = fieldErrors.stream()
                .map(o -> o.getDefaultMessage())
                .collect(Collectors.joining(","));
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ExceptionResult(HttpStatus.BAD_REQUEST.value(),collect));
    }
    // <3> 处理单个参数校验失败抛出的异常
    @ExceptionHandler(ConstraintViolationException.class)
    @ResponseBody
    public ResponseEntity<ExceptionResult> constraintViolationExceptionHandler(ConstraintViolationException e) {
        Set<ConstraintViolation<?>> constraintViolations = e.getConstraintViolations();
        String collect = constraintViolations.stream()
                .map(o -> o.getMessage())
                .collect(Collectors.joining(","));
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ExceptionResult(HttpStatus.BAD_REQUEST.value(),collect));
    }


}

03、API文档:Swagger的介绍

完成了用户中心接口的开发,接下来我们就要测试自己的接口了,而且为了方便前端调用和参考,我们最好提供一份更直观的api文档,这里我们介绍一个工具,叫做swagger-ui

什么是swagger呢?swagger是对Open-API的一种实现。那么,什么是OpenAPI呢?

1)什么是OpenAPI

随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、前后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。 前端和后端的唯一联系,变成了API接口;API文档变成了前后端开发人员联系的纽带,变得越来越重要。

没有API文档工具之前,大家都是手写API文档的,在什么地方书写的都有,而且API文档没有统一规范和格式,每个公司都不一样。这无疑给开发带来了灾难。

OpenAPI规范(OpenAPI Specification 简称OAS)是Linux基金会的一个项目,试图通过定义一种用来描述API格式或API定义的语言,来规范RESTful服务开发过程。目前V3.0版本的OpenAPI规范已经发布并开源在github上 。

官网:https://github.com/OAI/OpenAPI-Specification

2)什么是swagger(丝袜哥)?

OpenAPI是一个编写API文档的规范,然而如果手动去编写OpenAPI规范的文档,是非常麻烦的。而Swagger就是一个实现了OpenAPI规范的工具集。

官网:https://swagger.io/

看官方的说明:

Swagger包含的工具集:

  • Swagger编辑器: Swagger Editor允许您在浏览器中编辑YAML中的OpenAPI规范并实时预览文档。
  • Swagger UI: Swagger UI是HTML,Javascript和CSS资产的集合,可以从符合OAS标准的API动态生成漂亮的文档。
  • **Swagger Codegen:**允许根据OpenAPI规范自动生成API客户端库(SDK生成),服务器存根和文档。
  • **Swagger Parser:**用于解析来自Java的OpenAPI定义的独立库
  • **Swagger Core:**与Java相关的库,用于创建,使用和使用OpenAPI定义
  • Swagger Inspector(免费): API测试工具,可让您验证您的API并从现有API生成OpenAPI定义
  • SwaggerHub(免费和商业): API设计和文档,为使用OpenAPI的团队构建。

04、API文档:Swagger的使用

1)快速入门

SpringBoot已经集成了Swagger,使用简单注解即可生成swagger的API文档。

引入依赖
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.8.0</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.8.0</version>
</dependency>
编写配置
package com.leyou.user.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .host("localhost:8086")
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.leyou.user.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("乐优商城用户中心")
                .description("乐优商城用户中心接口文档")
                .version("1.0")
                .build();
    }
}
启动测试

重启服务,访问:http://localhost:8086/swagger-ui.html

就能看到swagger-ui为我们提供的API页面了:

在这里插入图片描述

可以看到我们编写的4个接口,任意点击一个,即可看到接口的详细信息:

在这里插入图片描述

可以看到详细的接口声明,包括:

  • 请求方式:
  • 请求路径
  • 请求参数
  • 响应等信息

点击右上角的try it out!还可以测试接口:

在这里插入图片描述

填写参数信息,点击execute,可以发起请求并测试:

在这里插入图片描述

2)自定义接口说明

刚才的文档说明中,是swagge-ui根据接口自动生成,不够详细。如果有需要,可以通过注解自定义接口声明。常用的注解包括:

/**
 @Api:修饰整个类,描述Controller的作用
 @ApiOperation:描述一个类的一个方法,或者说一个接口
 @ApiParam:单个参数描述
 @ApiModel:用对象来接收参数
 @ApiProperty:用对象接收参数时,描述对象的一个字段
 @ApiResponse:HTTP响应其中1个描述
 @ApiResponses:HTTP响应整体描述
 @ApiIgnore:使用该注解忽略这个API
 @ApiError :发生错误返回的信息
 @ApiImplicitParam:一个请求参数
 @ApiImplicitParams:多个请求参数
 */

示例:

/**
     * 校验数据是否可用
     * @param data
     * @param type
     * @return
     */
@GetMapping("/check/{data}/{type}")
@ApiOperation(value = "校验用户名数据是否可用,如果不存在则可用")
@ApiResponses({
    @ApiResponse(code = 200, message = "校验结果有效,true或false代表可用或不可用"),
    @ApiResponse(code = 400, message = "请求参数有误,比如type不是指定值")
})
public ResponseEntity<Boolean> checkUserData(
    @ApiParam(value = "要校验的数据", example = "lisi") @PathVariable("data") String data,
    @ApiParam(value = "数据类型,1:用户名,2:手机号", example = "1") @PathVariable(value = "type") Integer type) {
    return ResponseEntity.ok(userService.checkData(data, type));
}

查看文档:

在这里插入图片描述

05、授权中心:有状态认证及无状态认证

1)什么是有状态认证?

有状态认证,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session。

例如登录:用户登录后,我们把登录者的信息保存在服务端session中,并且给用户一个cookie值,记录对应的session。然后下次请求,用户携带cookie值来,我们就能识别到对应session,从而找到用户的信息。

缺点是什么?

  • 服务端保存大量数据,增加服务端压力
  • 服务端保存用户状态,无法进行水平扩展
  • 客户端请求依赖服务端,多次请求必须访问同一台服务器

2)什么是无状态认证

微服务集群中的每个服务,对外提供的都是Rest风格的接口。而Rest风格的一个最重要的规范就是:服务的无状态性,即:

  • 服务端不保存任何客户端请求者信息
  • 客户端的每次请求必须具备自描述信息,通过这些信息识别客户端身份

带来的好处是什么呢?

  • 客户端请求不依赖服务端的信息,任何多次请求不需要必须访问到同一台服务
  • 服务端的集群和状态对客户端透明
  • 服务端可以任意的迁移和伸缩
  • 减小服务端存储压力

3)有状态认证解决方案

集中式(单机版)认证流程

在这里插入图片描述

分布式认证流程(单点登录 CAS)

在这里插入图片描述

4)无状态分布式认证解决方案(*)

无状态认证的流程:

  • 当客户端第一次请求服务时,服务端对用户进行信息认证(登录)
  • 认证通过,将用户信息进行加密形成token,返回给客户端(保存到Cookie中),作为登录凭证
  • 客户端以后每次请求,客户端都携带Cookie中的认证信息的token
  • 服务端对token进行解密,判断是否有效(身份合法性校验)。
  • 服务端从token中解析出登录用户信息(用户ID,用户角色等)

流程图:

在这里插入图片描述

整个无状态认证过程中,最关键的点是什么?

token的安全性!!!

因为token是识别客户端身份的唯一标示,如果加密不够严密,被人伪造那就完蛋了。

采用何种方式加密才是安全可靠呢?

我们将采用JWT + RSA非对称加密

06、授权中心:JWT+RSA鉴权

1)JWT简介

JWT,全称是Json Web Token, 是JSON风格轻量级的授权和身份认证规范,可实现无状态、分布式的Web应用授权;官网:https://jwt.io (JWT,生成Token加密字符串的一个标准或格式!)

在这里插入图片描述

GitHub上jwt的java客户端:https://github.com/jwtk/jjwt

2)JWT数据格式

JWT包含三部分数据:

  • Header:头部,通常头部有两部分信息:

    • 声明类型,这里是JWT
    • 签名算法,自定义

    我们会对头部进行base64编码,得到第一部分数据

    如图所示:头部是不具备安全性的。

在这里插入图片描述

  • Payload:载荷,就是有效数据,一般包含下面信息:

    • 用户身份信息(注意,这里因为采用base64加密,可解密,因此不要存放敏感信息)
    • tokenID:当前这个JWT的唯一标示
    • 注册声明:如token的签发时间,过期时间,签发人等

    这部分也会采用base64加密,得到第二部分数据

    如图所示:载荷也不具备安全性。

在这里插入图片描述

  • Signature:签名,是整个数据的认证信息。一般根据前两步的数据,再加上服务的的密钥(secret)(不要泄漏,最好周期性更换),通过加密算法生成。用于验证整个数据完整和可靠性

如果所示:签名中决定整个token是否安全的关键在盐。

在这里插入图片描述

生成的数据格式:

在这里插入图片描述

可以看到分为3段,每段就是上面的一部分数据

3)登录和鉴权流程:JWT+HS256算法

登录和鉴权流程:
在这里插入图片描述

  • 授权流程:

    • 1、用户请求登录,携带用户名密码到授权中心
    • 2、授权中心携带用户名密码,到用户中心查询用户
    • 3、查询如果正确,生成JWT凭证
    • 4、返回JWT给用户
  • 鉴权流程:

    • 1、用户请求某微服务功能,携带JWT
    • 2、微服务将jwt交给授权中心校验
    • 3、授权中心返回校验结果到微服务
    • 4、微服务判断校验结果,成功或失败
    • 5、失败则直接返回401
    • 6、成功则处理业务并返回

因为JWT签发的token中已经包含了用户的身份信息,并且每次请求都会携带,这样服务的就无需保存用户信息,甚至无需去数据库查询,完全符合了Rest的无状态规范。

但是,上面的流程存在一个问题是,因为JWT校验所需的盐统一存放在授权中心,所以每个微服务每次都需要把JWT交给授权中心进行校验,这样效率就降低了!能不能改善呢?可以的,这时可以使用RSA非对称加密来完善以上流程。

4)RSA非对称加密

加密技术是对信息进行编码和解码的技术,编码是把原来可读信息(又称明文)译成代码形式(又称密文),其逆过程就是解码(解密),加密技术的要点是加密算法,加密算法可以分为两大类,三小类:

  • 可逆加密

    • 对称加密,如AES

      • 基本原理:将明文分成N个组,然后使用密钥对各个组进行加密,形成各自的密文,最后把所有的分组密文进行合并,形成最终的密文。
      • 优势:算法公开、计算量小、加密速度快、加密效率高
      • 缺陷:双方都使用同样密钥,安全性得不到保证
    • 非对称加密,如RSA

      • 基本原理:同时生成两把密钥:私钥和公钥,私钥隐秘保存,公钥可以下发给信任客户端
      • 私钥加密,持有私钥或公钥才可以解密
      • 公钥加密,持有私钥才可解密
      • 优点:安全,难以破解
      • 缺点:算法比较耗时
  • 不可逆加密,如MD5,SHA,HS加密

    • 基本原理:加密过程中不需要使用密钥,输入明文后由系统直接经过加密算法处理成密文,这种加密后的数据是无法被解密的,无法根据密文推算出明文。

RSA算法历史:

1977年,三位数学家Rivest、Shamir 和 Adleman 设计了一种算法,可以实现非对称加密。这种算法用他们三个人的名字缩写:RSA

5)登录和鉴权流程:JWT+RSA

有了非对称加密,我们就可以改变签名和验签的方式了:

  • 生成RSA密钥对,私钥存放在授权中心,公钥下发给微服务
  • 在授权中心利用私钥对JWT签名
  • 在微服务利用公钥验证签名有效性

因为非对称加密的特性,不用担心公钥泄漏问题,因为公钥是无法伪造签名的,但要确保私钥的安全和隐秘

非对称加密后的授权和鉴权流程:

在这里插入图片描述

用户只需要与微服务交互,不用访问授权中心,效率大大提高!

接下来让我们撸起袖子,开始写代码吧!

07、授权中心:准备工作-RSA工具

1)RSA工具类

RSA工具类负责对RSA密钥的创建、读取功能:

package com.leyou.common.auth.utils;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.security.*;
import java.security.spec.InvalidKeySpecException;
import java.security.spec.PKCS8EncodedKeySpec;
import java.security.spec.X509EncodedKeySpec;
import java.util.Base64;

/**
 * @author 黑马程序员
 */
public class RsaUtils {

    private static final int DEFAULT_KEY_SIZE = 2048;
    /**
     * 从文件中读取公钥
     *
     * @param filename 公钥保存路径,相对于classpath
     * @return 公钥对象
     * @throws Exception
     */
    public static PublicKey getPublicKey(String filename) throws Exception {
        byte[] bytes = readFile(filename);
        return getPublicKey(bytes);
    }

    /**
     * 从文件中读取密钥
     *
     * @param filename 私钥保存路径,相对于classpath
     * @return 私钥对象
     * @throws Exception
     */
    public static PrivateKey getPrivateKey(String filename) throws Exception {
        byte[] bytes = readFile(filename);
        return getPrivateKey(bytes);
    }

    /**
     * 获取公钥
     *
     * @param bytes 公钥的字节形式
     * @return
     * @throws Exception
     */
    private static PublicKey getPublicKey(byte[] bytes) throws Exception {
        bytes = Base64.getDecoder().decode(bytes);
        X509EncodedKeySpec spec = new X509EncodedKeySpec(bytes);
        KeyFactory factory = KeyFactory.getInstance("RSA");
        return factory.generatePublic(spec);
    }

    /**
     * 获取密钥
     *
     * @param bytes 私钥的字节形式
     * @return
     * @throws Exception
     */
    private static PrivateKey getPrivateKey(byte[] bytes) throws NoSuchAlgorithmException, InvalidKeySpecException {
        bytes = Base64.getDecoder().decode(bytes);
        PKCS8EncodedKeySpec spec = new PKCS8EncodedKeySpec(bytes);
        KeyFactory factory = KeyFactory.getInstance("RSA");
        return factory.generatePrivate(spec);
    }

    /**
     * 根据密文,生存rsa公钥和私钥,并写入指定文件
     *
     * @param publicKeyFilename  公钥文件路径
     * @param privateKeyFilename 私钥文件路径
     * @param secret             生成密钥的密文
     */
    public static void generateKey(String publicKeyFilename, String privateKeyFilename, String secret, int keySize) throws Exception {
        KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA");
        SecureRandom secureRandom = new SecureRandom(secret.getBytes());
        keyPairGenerator.initialize(Math.max(keySize, DEFAULT_KEY_SIZE), secureRandom);
        KeyPair keyPair = keyPairGenerator.genKeyPair();
        // 获取公钥并写出
        byte[] publicKeyBytes = keyPair.getPublic().getEncoded();
        publicKeyBytes = Base64.getEncoder().encode(publicKeyBytes);
        writeFile(publicKeyFilename, publicKeyBytes);
        // 获取私钥并写出
        byte[] privateKeyBytes = keyPair.getPrivate().getEncoded();
        privateKeyBytes = Base64.getEncoder().encode(privateKeyBytes);
        writeFile(privateKeyFilename, privateKeyBytes);
    }

    private static byte[] readFile(String fileName) throws Exception {
        return Files.readAllBytes(new File(fileName).toPath());
    }

    private static void writeFile(String destPath, byte[] bytes) throws IOException {
        File dest = new File(destPath);
        if (!dest.exists()) {
            dest.createNewFile();
        }
        Files.write(dest.toPath(), bytes);
    }
}

2)测试RSA

我们在ly-common中导入test依赖并编写测试类:

pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
</dependency>

准备存放公钥和私钥的空文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7YW9epN-1660284046332)(assets/image-20200326113731457.png)]

测试类

package com.ithiema;

import com.leyou.common.auth.utils.RsaUtils;
import org.junit.Test;

import java.security.PrivateKey;
import java.security.PublicKey;

public class RsaTest {

    //公钥路径
    public final String publicKeyPath = "D:\\leyou_projects\\javaee148\\software\\rsa-key\\rsa-key.pub";
    //私钥路径
    public final String privateKeyPath = "D:\\leyou_projects\\javaee148\\software\\rsa-key\\rsa-key";

    /**
     * 生成公私钥
     * @throws Exception
     */
    @Test
    public void testGenerteKey() throws Exception {
        RsaUtils.generateKey(publicKeyPath,privateKeyPath,"itheima",2048);
    }

    //读取公钥
    @Test
    public void testGetPublicKey() throws Exception {
        PublicKey publicKey = RsaUtils.getPublicKey(publicKeyPath);
        System.out.println(publicKey);
    }

    //读取私钥
    @Test
    public void testGetPrivateKey() throws Exception {
        PrivateKey privateKey = RsaUtils.getPrivateKey(privateKeyPath);
        System.out.println(privateKey);
    }
}


我们运行generateKey(),然后到指定的目录中查看:

在这里插入图片描述

公钥和私钥已经生成了,接下来我们获取公钥和私钥,我们运行 getKey() 方法,查看控制台:

在这里插入图片描述

08、授权中心:准备工作-JWT工具类

1)依赖导入

我们需要先在ly-common中引入JWT依赖:

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.10.5</version>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-impl</artifactId>
    <version>0.10.5</version>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-jackson</artifactId>
    <version>0.10.5</version>
    <scope>runtime</scope>
</dependency>

2)载荷对象:Payload

JWT中,会保存载荷数据,我们计划存储3部分:

  • id:jwt的id
  • 用户信息:用户数据,不确定,可以是任意类型
  • 过期时间:Date

为了方便后期获取,我们定义一个类来封装:

package com.leyou.common.auth.pojo;

import lombok.Data;

import java.util.Date;

/**
 * @author yy
 */
@Data
public class Payload<T> {
    private String id;
    private T info;
    private Date expiration;
}

3)封装用户信息类:UserInfo

这里我们假设用户信息包含3部分:

  • id:用户id
  • username:用户名
  • role:角色

载荷:UserInfo

package com.leyou.common.auth.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 存放JWt的载荷中的登录用户信息
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserInfo {
    private Long id;//用户ID
    private String username;//用户名称
    private String role;//用户角色
}

4)JWT工具

package com.leyou.common.auth.utils;

import com.leyou.common.utils.JsonUtils;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jws;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.joda.time.DateTime;

import java.security.PrivateKey;
import java.security.PublicKey;
import java.util.Base64;
import java.util.UUID;

/**
 * @author: yy
 **/
public class JwtUtils {

    private static final String JWT_PAYLOAD_USER_KEY = "user";

    /**
     * 私钥加密token
     *
     * @param info   载荷中的数据
     * @param privateKey 私钥
     * @param expire     过期时间,单位分钟
     * @return JWT
     */
    public static String generateTokenExpireInMinutes(Object info, PrivateKey privateKey, int expire) {
        return Jwts.builder()
                //claim: 往Jwt的载荷存入数据
                .claim(JWT_PAYLOAD_USER_KEY, JsonUtils.toString(info))
                //往Jwt的载荷存入数据,设置固定id的key
                .setId(createJTI())
                //往Jwt的载荷存入数据,设置固定exp的key
                .setExpiration(DateTime.now().plusMinutes(expire).toDate())
                //设置token的签名
                .signWith(privateKey, SignatureAlgorithm.RS256)
                .compact();
    }

    /**
     * 私钥加密token
     *
     * @param info   载荷中的数据
     * @param privateKey 私钥
     * @param expire     过期时间,单位秒
     * @return JWT
     */
    public static String generateTokenExpireInSeconds(Object info, PrivateKey privateKey, int expire) {
        return Jwts.builder()
                .claim(JWT_PAYLOAD_USER_KEY, JsonUtils.toString(info))
                .setId(createJTI())
                .setExpiration(DateTime.now().plusSeconds(expire).toDate())
                .signWith(privateKey, SignatureAlgorithm.RS256)
                .compact();
    }

    /**
     * 公钥解析token
     *
     * @param token     用户请求中的token
     * @param publicKey 公钥
     * @return Jws<Claims>
     */
    private static Jws<Claims> parserToken(String token, PublicKey publicKey) {
        return Jwts.parser().setSigningKey(publicKey).parseClaimsJws(token);
    }

    private static String createJTI() {
        return new String(Base64.getEncoder().encode(UUID.randomUUID().toString().getBytes()));
    }

    /**
     * 获取token中的用户信息
     *
     * @param token     用户请求中的令牌
     * @param publicKey 公钥
     * @return 用户信息
     */
    public static <T> Payload<T> getInfoFromToken(String token, PublicKey publicKey, Class<T> userType) {
        Jws<Claims> claimsJws = parserToken(token, publicKey);
        Claims body = claimsJws.getBody();
        Payload<T> claims = new Payload<>();
        claims.setId(body.getId());
        claims.setInfo(JsonUtils.toBean(body.get(JWT_PAYLOAD_USER_KEY).toString(), userType));
        claims.setExpiration(body.getExpiration());
        return claims;
    }

    /**
     * 获取token中的载荷信息
     *
     * @param token     用户请求中的令牌
     * @param publicKey 公钥
     * @return 用户信息
     */
    public static <T> Payload<T> getInfoFromToken(String token, PublicKey publicKey) {
        Jws<Claims> claimsJws = parserToken(token, publicKey);
        Claims body = claimsJws.getBody();
        Payload<T> claims = new Payload<>();
        claims.setId(body.getId());
        claims.setExpiration(body.getExpiration());
        return claims;
    }
}

5)测试

在RsaUtilsTest加入测试方法

生成token

package com.ithiema;

import com.leyou.common.auth.utils.JwtUtils;
import com.leyou.common.auth.utils.Payload;
import com.leyou.common.auth.utils.RsaUtils;
import com.leyou.common.auth.utils.UserInfo;
import org.junit.Test;

import java.security.PrivateKey;
import java.security.PublicKey;

public class JwtTest {

    //公钥路径
    public final String publicKeyPath = "D:\\studyProject\\rsa\\rsa-key.pub";
    //私钥路径
    public final String privateKeyPath = "D:\\studyProject\\rsa\\rsa-key.pri";


    /**
     * 生成token
     * @throws Exception
     */
    @Test
    public void testGenerateToken() throws Exception {
        UserInfo userInfo = new UserInfo(1L,"jack","admin");
        //获取私钥
        PrivateKey privateKey = RsaUtils.getPrivateKey(privateKeyPath);
        String token = JwtUtils.generateTokenExpireInSeconds(userInfo, privateKey, 40);
        System.out.println(token);
    }

    /**
     * 解析token
     */
    @Test
    public void testParseToken() throws Exception {
        String token = "eyJhbGciOiJSUzI1NiJ9.eyJ1c2VyIjoie1wiaWRcIjoxLFwidXNlcm5hbWVcIjpcImphY2tcIixcInJvbGVcIjpcImFkbWluXCJ9IiwianRpIjoiWTJSa1pERXhaakV0TURrek55MDBOMlEyTFdFNU1XSXRPV1V5TnpjeE5HRXlOVGcyIiwiZXhwIjoxNjE1OTUxMzI5fQ.ZEVhrGXFD_pn_YRJkk3Dpg3fZRgFkTxmhF3IeC6CxK5XMbdgjZefXI5bbUOdIgT7khyHCQyV7y7mLHv-SDvVqiEBHSt-rfQicsL5AL3T2IPwYobJQ5whMdHzetZIotvUsibGGBxGt1c1eilLRmyxV7QT01SvFv82jEiOoX8K8QnKLAdSYCgOqF7Hp4X7Ds8vjbVFhSVEyhXpR7qDeZclPTGVc35Uq1TbX4nkDlJHGmWsD-DETsknSzF55E6OjrhOOLc9v5q-HXNzcxM8Zu0CSPTLQ9j0Go4hOUMag0ocSNu3Rmp3MhKjEKDd7edotuE6gCbeOC3i65l98zzXF27ODg";
        //获取公钥
        PublicKey publicKey = RsaUtils.getPublicKey(publicKeyPath);

        Payload<UserInfo> payload = null;

        try {
            payload = JwtUtils.getInfoFromToken(token, publicKey, UserInfo.class);

            //取出登录用户信息
            UserInfo userInfo = payload.getInfo();

            System.out.println("合法用户,内容为:"+userInfo);
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("未登录,不合法用户");
        }
    }
}


控制台:

在这里插入图片描述

解析token

 /**
     * 解析token,获取用户信息
     */
    @Test
    public void testParseToken() throws Exception {
        String token = "eyJhbGciOiJSUzI1NiJ9.eyJ1c2VyIjoAie1wiaWRcIoxLFwibmFtZVwiOlwiamFja1wiLFwicm9sZVwiOlwiYWRtaW5cIn0iLCJqdGkiOiJNREF5WXpFNFl6QXRabUZrTmkwME56UTFMVGczTjJZdE1tSXpZamxoWkdKbVlXVTMiLCJleHAiOjE2MDIzODkzNTN9.eEdnnXBMc0Dhd3tDoYcnwI2RNQa8M6DZ6TKwzRgu9efGobNHFqVaA5f1gbWn1Pfmw6v9tSJL5PdFkoxh3YaRFBnrnkww0G2XlQ3mjwrFlOF4rkInzUj8WQQOCu_Ov6avnIOjy1JSe7K0oo1rXxUWENA5lLFEoNdWbPnUE-EinTGH7CRvHvni-MvzfTKCwN9T-CJ0FpaKN2zpSoOZ-E2McLA-Opj5bw7QkDx8ewTih8ayXCBdHKSq5BR-KRZMihgNG-ApOrqY-gqIRzCK6Bh5Fv27uRPzciL7454P5SIjQTSfWor3Vy_asaHQtVpJHCrK6UbYu9jKdZ7z3YwFQahaiQ";
        //获取公钥
        PublicKey publicKey = RsaUtils.getPublicKey(pubPathKey);

        Payload<UserInfo> infoFromToken = null;
        try {
            infoFromToken = JwtUtils.getInfoFromToken(token, publicKey, UserInfo.class);

            System.out.println("认证成功");
            UserInfo info = infoFromToken.getInfo();
            System.out.println(info);
        }catch (Exception e){
            System.out.println("认证失败:"+e.getMessage());
        }

    }

控制台:

在这里插入图片描述

09、授权中心:搭建授权微服务

授权中心的主要职责:

  • 用户登录鉴权:
    • 接收用户的登录请求,
    • 通过用户中心的接口校验用户名密码
    • 使用私钥生成JWT并返回
  • 用户登录状态校验
    • 判断用户是否登录,其实就是token的校验
  • 用户登出
    • 用户选择退出登录后,要让token失效
  • 用户登录状态刷新
    • 用户登录一段时间后,JWT可能过期,需要刷新有效期

接下来,我们逐一完成上述功能

1)提供用户微服务对外的feign接口模块

因为授权中心微服务需要调用用户微服务的方法,所以需要提供用户微服务Feign接口模块

创建ly-client-user模块
在这里插入图片描述

导入jar包

<dependencies>
    <dependency>
        <groupId>com.leyou</groupId>
        <artifactId>ly-pojo-user</artifactId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
</dependencies>

2)创建项目

在这里插入图片描述

3)导入依赖

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>ly-auth</artifactId>

    <dependencies>
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
            <version>2.1.0.RELEASE</version>
        </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>com.leyou</groupId>
            <artifactId>ly-client-user</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.leyou</groupId>
            <artifactId>ly-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

3)启动类

@SpringBootApplication
@EnableDiscoveryClient
@EnableFeignClients
public class LyAuthApplication {
    public static void main(String[] args) {
        SpringApplication.run(LyAuthApplication.class, args);
    }
}

4)配置文件application.yml

server:
  port: 8087
spring:
  application:
    name: auth-service
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848

5)在网关加入路由规则

spring:
  cloud:
    gateway:
      routes:
        # 其他省略
        - id: auth-service
          uri: lb://auth-service
          predicates:
            - Path=/api/auth/**
          filters:
            - StripPrefix=2

项目结构:

在这里插入图片描述

10、授权中心:用户微服务提供登录Feign接口

1)分析

接下来,我们需要在ly-auth编写一个接口,对外提供登录授权服务。

登录授权流程我们上面已经分析过,基本流程如下::

  • 1、用户请求登录,携带用户名密码到授权中心
  • 2、授权中心携带用户名密码,到用户中心查询用户
  • 3、查询如果正确,生成JWT凭证,查询错误则返回400,
  • 4、返回JWT给用户

2)ly-user编写Controller

用户中心必须对外提供查询接口,方便ly-auth做用户名密码校验。

在ly-user中提供查询用户信息的处理器: UserController

/**
     * 检查用户名和密码是否正确
     */
    @GetMapping("/query")
    public ResponseEntity<User> query(@RequestParam("username") String username,@RequestParam("password") String password){
        User loginUser = userService.query(username,password);
        return ResponseEntity.ok(loginUser);
    }

3)ly-user编写Service

 public User query(String username, String password) {
        //1.查询用户名是否存在
        User user = new User();
        user.setUsername(username);
        QueryWrapper<User> queryWrapper = Wrappers.query(user);
        User loginUser = userMapper.selectOne(queryWrapper);
        
        if(loginUser==null){
            throw new LyException(ExceptionEnum.INVALID_USERNAME_PASSWORD);
        }
        
        //2.判断密码是否正确
        if(!passwordEncoder.matches(password,loginUser.getPassword())){
            throw new LyException(ExceptionEnum.INVALID_USERNAME_PASSWORD);
        }
        
        return loginUser;
    }

4)ly-client-user提供feign接口

package com.leyou.user.client;

import com.leyou.user.pojo.User;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@FeignClient("user-service")
public interface UserClient {

    /**
     * 检查用户名和密码是否正确
     */
    @GetMapping("/query")
    public User query(@RequestParam("username") String username,
                      @RequestParam("password") String password);
}



11、授权中心:授权微服务登录认证方法

1) 提供授权相关配置文件

ly:
  jwt:
    pubKeyPath: D:\studyProject\rsa\ras-key.pub # 公钥地址
    priKeyPath: D:\studyProject\rsa\ras-key.pri # 私钥地址
    cookie:
      expire: 30 #过期时间设置 单位分钟
      cookieName: LY_TOKEN # cookie名称
      cookieDomain: leyou.com # cookie的域

2) 提供解析配置文件的配置类

通过分析spring中bean对象的完整生命周期,来总结一个解析配置文件的方案。

Spring的Bean对象完整生命周期如图:

在这里插入图片描述

Spring Bean在Spring Bean Factory Container中完成其整个生命周期:以下是完成其生命周期所需的各种内容:

  1. Spring容器从XML文件或@Configuration中bean的定义中实例化bean(IOC)。
  2. Spring依据配置中指定的属性,为bean填充所有属性(DI)。
  3. 如果bean实现BeanNameAware接口,spring调用setBeanName()方法,并传递bean的id。
  4. 如果bean实现BeanFactoryAware接口,spring将调用setBeanFactory()方法,并把自己作为参数。
  5. 如果bean实现ApplicationContextAware接口,spring将调用setApplicationContext()方法,并把ApplicationContext实例作为参数。
  6. 如果存在与bean关联的任何BeanPostProcessors(后处理器),则调用preProcessBeforeInitialization()方法。比如Autowired等依赖注入功能是在此时完成。
  7. 如果Bean实现了InitializingBean接口,则调用bean的afterPropertiesSet()方法。
  8. 如果为bean指定了init-method,那么将调用bean的init方法。
  9. 最后,如果存在与bean关联的任何BeanPostProcessors,则将调用postProcessAfterInitialization()方法。
  10. 如果关闭容器,则调用destroy方法

在这里插入图片描述

最终解析配置文件的配置类为:

package com.leyou.auth.config;

import com.leyou.common.auth.utils.RsaUtils;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;
import java.security.PrivateKey;
import java.security.PublicKey;

/**
 * 读取Jwt的配置
 */
@Data
@Component
@ConfigurationProperties(prefix = "ly.jwt")
public class JwtProperties{
    private String pubKeyPath;
    private String priKeyPath;

    private PublicKey publicKey;//公钥对象
    private PrivateKey privateKey;//私钥对象

    //注意:这里不能使用构造方法初始化数据
    @PostConstruct // 定义为初始化方法
    public void initMethod() throws Exception {
        publicKey = RsaUtils.getPublicKey(pubKeyPath);
        privateKey = RsaUtils.getPrivateKey(priKeyPath);
    }


    //接收cookie数据
    private CookiePojo cookie = new CookiePojo();

    @Data
    public class CookiePojo{
        private Integer expire;
        private String cookieName;
        private String cookieDomain;
    }
}

3) 提供认证的处理器

package com.leyou.auth.controller;

import com.leyou.auth.service.AuthService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 授权
 */
@RestController
public class AuthController {
    @Autowired
    private AuthService authService;

    /**
     * 用户登录
     */
    @PostMapping("/login")
    public ResponseEntity<Void> login(
            @RequestParam("username") String username,
            @RequestParam("password") String password,
            HttpServletRequest request,
            HttpServletResponse response){
        authService.login(username,password,request,response);
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }

}


4) 提供认证的service

package com.leyou.auth.service;

import com.leyou.auth.config.JwtProperties;
import com.leyou.common.auth.utils.JwtUtils;
import com.leyou.common.auth.utils.UserInfo;
import com.leyou.common.utils.CookieUtils;
import com.leyou.user.client.UserClient;
import com.leyou.user.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Service
public class AuthService {
    @Autowired
    private UserClient userClient;
    @Autowired
    private JwtProperties jwtProps;


    public void login(String username, String password, HttpServletRequest request, HttpServletResponse response) {
        //1.判断用户名和密码是否正确
        User loginUser = userClient.query(username,password);

        //2.使用JwtUtils工具生成token字符串
        UserInfo userInfo = new UserInfo(loginUser.getId(),loginUser.getUsername(),"admin");

        //3.生成token,写回token给浏览器
        buildTokenAndWriteCookie(response, userInfo);
    }

    /**
     * 生成token,写回token给浏览器
     * @param response
     * @param userInfo
     */
    public void buildTokenAndWriteCookie(HttpServletResponse response, UserInfo userInfo) {
        String token = JwtUtils.generateTokenExpireInMinutes(
                userInfo, 
                jwtProps.getPrivateKey(), 
                jwtProps.getCookie().getExpire());

        //3.把token以Cookie形式写回给浏览器
        CookieUtils.newCookieBuilder()
                .response(response)
                .name(jwtProps.getCookie().getCookieName())
                .value(token)
                .domain(jwtProps.getCookie().getCookieDomain())
                .maxAge(jwtProps.getCookie().getExpire()*60) // 注意:Cookie的时间以秒单位
                .build();
    }
}



5) 启动项目测试

查看浏览器是否保存了Cookie
在这里插入图片描述

12、授权中心:首页判断登录状态

虽然cookie已经成功写入,但是我们首页的顶部,登录状态依然没能判断出用户信息:

在这里插入图片描述

我们思考一下,应该如何判断用户是否登录呢?

1)步骤分析

传统登录校验的步骤:

  • 1)用户请求到达服务端,会自动携带cookie
  • 2)cookie中包含sessionId,tomcat根据sessionId获取session
  • 3)从session中读取用户信息,判断是否存在
  • 4)存在,证明已经登录;不存在,证明登录超时或未登录

我们现在使用的是无状态登录,不存在session,而是把用户身份写入了token,是否需要发请求到服务端进行校验呢?

肯定需要的,因为token需要通过公钥解析才知道是否有效。

分析一下步骤:

  • 1)页面向后台发起请求,携带cookie
  • 2)后台获取cookie中的LY_TOKEN
  • 3)校验token是否有效
    • 无效:登录失效
    • 有效:解析出里面的用户信息,返回到页面

接下来,我们就分步实现上述功能。

2)页面JS代码

首先是页面发起请求,校验cookie。

页面的顶部已经被我们封装为一个独立的Vue组件,在/js/pages/shortcut.js

在这里插入图片描述

打开js,发现里面已经定义好了Vue组件,并且在created函数中,查询用户信息:

在这里插入图片描述

查看网络控制台,发现发起了请求:

在这里插入图片描述

因为token在cookie中,因此本次请求肯定会携带token信息在头中。

3)校验用户登录状态

我们在ly-auth中定义用户的校验接口,通过cookie获取token,然后校验通过返回用户信息。

  • 请求方式:GET
  • 请求路径:/verify
  • 请求参数:无,不过我们需要从cookie中获取token信息
  • 返回结果:UserInfo,校验成功返回用户信息;校验失败,则返回401

controller代码:

  /**
     * 验证并获取登录用户信息
     */
    @GetMapping("/verify")
    public ResponseEntity<UserInfo> verify(HttpServletRequest request,HttpServletResponse response){
        UserInfo userInfo = authService.verify(request,response);
        return ResponseEntity.ok(userInfo);
    }

service代码:

  public UserInfo verify(HttpServletRequest request, HttpServletResponse response) {
        //1.取出Cookie的token
        String token = CookieUtils.getCookieValue(request, jwtProps.getCookie().getCookieName());

        //2.校验token是否合法
        Payload<UserInfo> payload = null;

        try {
            payload = JwtUtils.getInfoFromToken(token, jwtProps.getPublicKey(), UserInfo.class);
        } catch (Exception e) {
            e.printStackTrace();
            throw new LyException(ExceptionEnum.UNAUTHORIZED);
        }

        //3.取出token的用户信息,并返回
        UserInfo userInfo = payload.getInfo();
        return userInfo;
    }

4)测试

在这里插入图片描述

页面效果:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值