文件上传—微服务版的单点登陆系统设计及实现

一、简介

1、背景分析

传统的登录系统中，每个站点都实现了自己的专用登录模块。各站点的登录状态相互不认可，各站点需要逐一手工登录。例如：

这样的系统，我们又称之为多点登陆系统。应用起来相对繁琐（每次访问资源服务都需要重新登陆认证和授权）。与此同时，系统代码的重复也比较高。由此单点登陆系统诞生。

2、单点登陆系统

单点登录，英文是 Single Sign On（缩写为 SSO）。即多个站点共用一台认证授权服务器，用户在其中任何一个站点登录后，可以免登录访问其他所有站点。而且，各站点间可以通过该登录状态直接交互。例如：

二、快速入门实践

1、工程结构如下

基于资源服务工程添加单点登陆认证和授权服务，工程结构定义如下：

2、创建认证授权工程

3、添加项目依赖

	<dependencies>
		<!--Spring Boot Web (服务-内置tomcat)-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!--Nacos Discovery (服务注册发现)-->
		<dependency>
			<groupId>com.alibaba.cloud</groupId>
			<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
		</dependency>
		<!--Nacos Config (配置中心)-->
		<dependency>
			<groupId>com.alibaba.cloud</groupId>
			<artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
		</dependency>
		<!--认证、授权-->
		<dependency>
			<groupId>org.springframework.cloud</groupId>
			<artifactId>spring-cloud-starter-oauth2</artifactId>
		</dependency>
	</dependencies>

4、构建项目配置文件

在sca-auth工程中创建bootstrap.yml文件，例如：

server:
  port: 8071
spring:
  application:
    name: sca-auth
  cloud:
    nacos:
      discovery:
        server-addr: localhost:8848
      config:
        server-addr: localhost:8848

5、添加项目启动类

package com.jt;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

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

6、启动并访问项目

项目启动时，系统会默认生成一个登陆密码，例如：

开浏览器输入http://localhost:8071呈现登陆页面，默认用户：user 例如：

其中，默认用户名为user，密码为系统启动时，在控制台呈现的密码。执行登陆测试,登陆成功进入如下界面（因为没有定义登陆页面，所以会出现404）：

三、自定义登陆逻辑

1、业务描述

我们的单点登录系统最终会按照如下结构进行设计和实现，例如：

我们在实现登录时，会在UI工程中，定义登录页面(login.html)，然后在页面中输入自己的登陆账号，登陆密码，将请求提交给网关，然后网关将请求转发到auth工程，登陆成功和失败要返回json数据，在这个章节我们会按这个业务逐步进行实现

2、定义安全配置类

修改SecurityConfig配置类，添加登录成功或失败的处理逻辑，例如:

package com.jt.auth.config;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.authentication.AuthenticationFailureHandler;
import org.springframework.security.web.authentication.AuthenticationSuccessHandler;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    /**初始化密码加密对象*/
    @Bean
    public BCryptPasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }

    /**配置认证管理器(此对象主要负责对客户端输入的用户信息进行认证),
     * 在其它配置类中会用到这个对象*/
    @Bean
    public AuthenticationManager authenticationManagerBean()
            throws Exception {
        return super.authenticationManagerBean();
    }

    /**在这个方法中定义登录规则
     * 1)对所有请求放行(当前工程只做认证)
     * 2)登录成功信息的返回
     * 3)登录失败信息的返回
     * */
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //关闭跨域工具
        http.csrf().disable();
        //放行所有请求
        http.authorizeRequests().anyRequest().permitAll();
        //登录成功与失败的处理
        http.formLogin()
                .successHandler(successHandler())
                .failureHandler(failureHandler());
    }

    @Bean
    public AuthenticationSuccessHandler successHandler(){
//        return new AuthenticationSuccessHandler() {
//            @Override
//            public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
//
//            }
//        }
        return (request,response,authentication) ->{
            //1.构建map对象,封装响应数据
            Map<String,Object> map=new HashMap<>();
            map.put("state",200);
            map.put("message","login ok");
            //2.将map对象写到客户端
            writeJsonToClient(response,map);
        };
    }
    @Bean
    public AuthenticationFailureHandler failureHandler(){
        return (request,response, e)-> {
            //1.构建map对象,封装响应数据
            Map<String,Object> map=new HashMap<>();
            map.put("state",500);
            map.put("message","login failure");
            //2.将map对象写到客户端
            writeJsonToClient(response,map);
        };
    }
    private void writeJsonToClient(HttpServletResponse response,
                                   Object object) throws IOException {
        //1.将对象转换为json
        //将对象转换为json有3种方案:
        //1)Google的Gson-->toJson  (需要自己找依赖)
        //2)阿里的fastjson-->JSON (spring-cloud-starter-alibaba-sentinel)
        //3)Springboot web自带的jackson-->writeValueAsString (spring-boot-starter-web)
        //我们这里借助springboot工程中自带的jackson
        //jackson中有一个对象类型为ObjectMapper,它内部提供了将对象转换为json的方法
        //例如:
        String jsonStr=new ObjectMapper().writeValueAsString(object);
        //3.将json字符串写到客户端
        PrintWriter writer = response.getWriter();
        writer.println(jsonStr);
        writer.flush();
    }
}

底层写好controller，所这边只需要写其配置文件就行

3、定义用户信息处理对象

在spring security应用中底层会借助UserDetailService对象获取数据库信息，并进行封装,最后返回给认证管理器，完成认证操作，例如：

package com.jt.auth.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.AuthorityUtils;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 登录时用户信息的获取和封装会在此对象进行实现,
 * 在页面上点击登录按钮时,会调用这个对象的loadUserByUsername方法,
 * 页面上输入的用户名会传给这个方法的参数
 */
@Service
public class UserDetailsServiceImpl implements UserDetailsService {
    @Autowired
    private BCryptPasswordEncoder passwordEncoder;
    
    //UserDetails用户封装用户信息(认证和权限信息)
    @Override
    public UserDetails loadUserByUsername(String username)
            throws UsernameNotFoundException {
        //1.基于用户名查询用户信息(用户名,用户状态,密码,....)
        //Userinfo userinfo=userMapper.selectUserByUsername(username);
        String encodedPassword=passwordEncoder.encode("123456");
        //2.查询用户权限信息(后面会访问数据库)
        //这里先给几个假数据
        List<GrantedAuthority> authorities =
        AuthorityUtils.createAuthorityList(//这里的权限信息先这么写,后面讲
                "sys:res:create", "sys:res:retrieve");
        //3.对用户信息进行封装(用户名、用户密码、权限)
        return new User(username,encodedPassword,authorities);
    }
}

底层写好controller，所这边只需要写实现类就行

4、网关中登陆路由配置

在网关配置文件中添加登录路由配置，例如：

 - id: router02
   uri: lb://sca-auth  #lb表示负载均衡,底层默认使用ribbon实现
   predicates: #定义请求规则(请求需要按照此规则设计)
      - Path=/auth/login/** #请求路径设计
   filters:
      - StripPrefix=1 #转发之前去掉path中第一层路径

5、基于Postman进行访问测试

启动sca-gateway，sca-auth服务，然后基于postman访问网关,执行登录测试，例如：

6、自定义登陆页面

在sca-resource-ui工程的static目录中定义登陆页面，例如：
启动sca-resource-ui服务后，进入登陆页面，输入用户名jack,密码123456进行登陆测试。

6.1）自定义页面

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>login</title>
</head>
<body>
<div class="container"id="app">
    <h3>Please Login</h3>
    <form>
        <div class="mb-3">
            <label for="usernameId" class="form-label">Username</label>
            <input type="text" v-model="username" class="form-control" id="usernameId" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="passwordId" class="form-label">Password</label>
            <input type="password" v-model="password" class="form-control" id="passwordId">
        </div>
        <button type="button" @click="doLogin()" class="btn btn-primary">Submit</button>
    </form>
</div>

<!--<script src="/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>-->
<!--<script src="/js/vue.js"></script>-->
<!--<script src="/js/axios.min.js"></script>-->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm=new Vue({
        el:"#app",//定义监控点，vue底层会基于此监控点在内存中构建dom树
        data:{ //此对象中定义页面上要操作的数据
            username:"",
            password:""
        },
        methods: {//此位置定义所有业务事件处理函数
            doLogin() {
                //1.定义url
                let url = "http://localhost:9000/auth/login"
                //2.定义参数
                let params = new URLSearchParams()
                params.append('username',this.username);
                params.append('password',this.password);
                debugger
                //3.发送异步请求
                axios.post(url, params).then((response) => {
                    //debugger
                    let result=response.data;
                    console.log("result",result);
                    if (result.state == 200) {
                        alert("login ok");
                        location.href="/fileupload.html"
                    } else {
                        alert(result.message);
                    }//undefined
                })
            }
        }
    });
</script>
</body>
</html>

6.2）测试

http://localhost:8080/login.html

登陆成功后跳转到上传文件页面

7、SpringSecurity 执行流程

四、颁发登陆成功令牌

1、构建令牌配置对象

本次我们借助JWT(Json Web Token-是一种json格式）方式将用户相关信息进行组织和加密，并作为响应令牌(Token)，从服务端响应到客户端，客户端接收到这个JWT令牌之后，将其保存在客户端(例如localStorage)，然后携带令牌访问资源服务器，资源服务器获取并解析令牌的合法性，基于解析结果判定是否允许用户访问资源。

package com.jt.auth.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.oauth2.provider.token.TokenStore;
import org.springframework.security.oauth2.provider.token.store.JwtAccessTokenConverter;
import org.springframework.security.oauth2.provider.token.store.JwtTokenStore;

/**
 * 创建JWT令牌配置类,基于这个类实现令牌对象的创建和解析.
 * JWT令牌的构成有三部分构成:
 * 1)HEADER (头部信息:令牌类型,签名算法)
 * 2)PAYLOAD (数据信息-用户信息,权限信息,令牌失效时间,...)
 * 3)SIGNATURE (签名信息-对header和payload部分进行加密签名)
 */
@Configuration
public class TokenConfig {
  //定义令牌签发口令(暗号),这个口令自己定义即可
  //当客户端在执行登录时，假如有携带这个信息，认证服务器可以签发令牌
  //在对header和PAYLOAD部分进行签名时,需要的一个口令
  private String SIGNING_KEY= "auth";
  
  //初始化令牌生成策略，构建和存储对象(默认生成策略uUID)
  //这里我们采用wT方式生成令用
  @Bean
  public TokenStore tokenStore(){
    return new JwtTokenStore(jwtAccessTokenConverter());
  }

  //构建 JWT 令牌转换器对象,基于此对象创建令牌,解析令牌，将数据进行转换加密
  @Bean
  public JwtAccessTokenConverter jwtAccessTokenConverter(){
    JwtAccessTokenConverter converter=new JwtAccessTokenConverter();
    converter.setSigningKey(SIGNING_KEY);
    return converter;
  }
}

2、定义认证授权核心配置

第一步：在SecurityConfig中添加如下方法（创建认证管理器对象，后面授权服务器会用到）：

/**配置认证管理器(此对象主要负责对客户端输入的用户信息进行认证),
	 * 在其它配置类中会用到这个对象*/
	@Bean
	public AuthenticationManager authenticationManagerBean()
			throws Exception {
		return super.authenticationManagerBean();
	}

第二步：所有零件准备好了开始拼装最后的主体部分，这个主体部分就是授权服务器的核心配置

package com.jt.auth.config;

import lombok.AllArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.oauth2.config.annotation.configurers.ClientDetailsServiceConfigurer;
import org.springframework.security.oauth2.config.annotation.web.configuration.AuthorizationServerConfigurerAdapter;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableAuthorizationServer;
import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerEndpointsConfigurer;
import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerSecurityConfigurer;
import org.springframework.security.oauth2.provider.token.AuthorizationServerTokenServices;
import org.springframework.security.oauth2.provider.token.DefaultTokenServices;
import org.springframework.security.oauth2.provider.token.TokenEnhancerChain;
import org.springframework.security.oauth2.provider.token.TokenStore;
import org.springframework.security.oauth2.provider.token.store.JwtAccessTokenConverter;

import java.util.Arrays;

/**
 * 完成所有配置的组装,在这个配置类中完成认证授权,JWT令牌签发等配置操作
 * 1)SpringSecurity (安全认证和授权)
 * 2)TokenConfig
 * 3)Oauth2(暂时说)
 */

@AllArgsConstructor
@Configuration
@EnableAuthorizationServer //开启认证和授权服务
public class Oauth2Config extends AuthorizationServerConfigurerAdapter {
	//此对象负责完成认证管理
	private AuthenticationManager authenticationManager;

	//TokenStore负责完成令牌创建,信息读取
	private TokenStore tokenStore;

	//负责获取用户详情信息(username,password,client_id,grant_type,client_secret)
	//private ClientDetailsService clientDetailsService;
	//JWT令牌转换器(基于用户信息构建令牌,解析令牌)
	private JwtAccessTokenConverter jwtAccessTokenConverter;

	//密码加密匹配器对象
	private PasswordEncoder passwordEncoder;

	//负责获取用户信息信息
	private UserDetailsService userDetailsService;

	//设置认证端点的配置(/oauth/token),客户端通过这个路径获取JWT令牌
	@Override
	public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
		endpoints
				//配置认证管理器
				.authenticationManager(authenticationManager)
				//验证用户的方法获得用户详情
				.userDetailsService(userDetailsService)
				//要求提交认证使用post请求方式,提高安全性
				.allowedTokenEndpointRequestMethods(HttpMethod.POST,HttpMethod.GET)
				//要配置令牌的生成,由于令牌生成比较复杂,下面有方法实现
				.tokenServices(tokenService());//这个不配置,默认令牌为UUID.randomUUID().toString()
	}

	//定义令牌生成策略
	@Bean
	public AuthorizationServerTokenServices tokenService(){
		//这个方法的目标就是获得一个令牌生成器
		DefaultTokenServices services=new DefaultTokenServices();
		//支持令牌刷新策略(令牌有过期时间)
		services.setSupportRefreshToken(true);
		//设置令牌生成策略(tokenStore在TokenConfig配置了,本次我们应用JWT-定义了一种令牌格式)
		services.setTokenStore(tokenStore);
		
		//设置令牌增强(固定用法-令牌Payload部分允许添加扩展数据,例如用户权限信息)
		//JWT令牌必须设置，假如普通令牌就不要设置了
		TokenEnhancerChain chain=new TokenEnhancerChain();
		chain.setTokenEnhancers(
				Arrays.asList(jwtAccessTokenConverter));
		//令牌增强对象设置到令牌生成
		services.setTokenEnhancer(chain);
		//设置令牌有效期
		services.setAccessTokenValiditySeconds(3600);//1小时
		//刷新令牌应用场景：一般在用户登录系统后，令牌快过期时，系统自动帮助用户刷新令牌，提高用户的体验感
		services.setRefreshTokenValiditySeconds(3600*72);//3天
		//配置客户端详情
		//services.setClientDetailsService(clientDetailsService);
		return services;
	}

	//设置客户端详情类似于用户详情，客户端传递到服务端的信息，是哪些信息时，才会颁发令牌
	@Override
	public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
		clients.inMemory()
				//客户端id
				.withClient("gateway-client")
				//客户端秘钥
				.secret(passwordEncoder.encode("123456"))
				//设置权限
				.scopes("all")//all只是个名字而已和写abc效果相同
				//允许客户端进行的操作  里面的字符串千万不能写错
				.authorizedGrantTypes("password","refresh_token");
	}
	
	// 认证成功后的安全约束配置，由oauth2协议提供
	//这里规定了我们通过什么url访问令牌，检查令牌
	// 而且这些urL不需要认证就可以访问
	@Override
	public void configure(AuthorizationServerSecurityConfigurer security) throws Exception {
		//认证通过后,允许客户端进行哪些操作
		security
				//公开oauth/token_key端点
				.tokenKeyAccess("permitAll()")
				//公开oauth/check_token端点
				.checkTokenAccess("permitAll()")
				//允许提交请求进行认证(申请令牌)
				.allowFormAuthenticationForClients();
	}
}

3、配置网关认证的URL

  - id: router02
      uri: lb://sca-auth
      predicates:
        #- Path=/auth/login/**  #没要令牌之前,以前是这样配置
        - Path=/auth/oauth/**   #微服务架构下,需要令牌,现在要这样配置
      filters:
        - StripPrefix=1

4、Postman访问测试

第一步：启动服务，依次启动sca-auth服务，sca-resource-gateway服务。

第二步：检测sca-auth服务控制台的Endpoints信息，例如:

第三步：打开postman进行登陆访问测试

http://localhost:9000/auth/oauth/token?username=jack&password=123456&client_id=gateway-client&grant_type=password&client_secret=123456

登陆成功会在控制台显示令牌信息，例如：

{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MzA1NzgxNTUsInVzZXJfbmFtZSI6ImphY2siLCJhdXRob3JpdGllcyI6WyJzeXM6cmVzOmNyZWF0ZSIsInN5czpyZXM6cmV0cmlldmUiXSwianRpIjoiZDE0ZTg2ZjctMTQ5Zi00MTI4LWI1YTktNWM0Mjg5ZjU2ZTEzIiwiY2xpZW50X2lkIjoiZ2F0ZXdheS1jbGllbnQiLCJzY29wZSI6WyJhbGwiXX0.QAZY9lFgQ7EJrYZsl2z54tsfXe6Al6P_9WoES6QvS00",
    "token_type": "bearer",
    "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJqYWNrIiwic2NvcGUiOlsiYWxsIl0sImF0aSI6ImQxNGU4NmY3LTE0OWYtNDEyOC1iNWE5LTVjNDI4OWY1NmUxMyIsImV4cCI6MTYzMDgzMzc1NSwiYXV0aG9yaXRpZXMiOlsic3lzOnJlczpjcmVhdGUiLCJzeXM6cmVzOnJldHJpZXZlIl0sImp0aSI6IjdiOGM1NGU5LTM3MjEtNDk4Zi05YmM4LTgzYjA2NzYwZThjNyIsImNsaWVudF9pZCI6ImdhdGV3YXktY2xpZW50In0.rrsGezmQe_zWw7NQVq5wf3eWTtNQGkMSuoPsykgLTRo",
    "expires_in": 3599,
    "scope": "all",
    "jti": "d14e86f7-149f-4128-b5a9-5c4289f56e13"
}

5、登陆页面登陆方法设计

登陆成功以后，将token存储到localStorage中，修改登录页面的doLogin方法，例如：

5.1）页面

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>login</title>
</head>
<body>
<div class="container"id="app">
    <h3>Please Login</h3>
    <form>
        <div class="mb-3">
            <label for="usernameId" class="form-label">Username</label>
            <input type="text" v-model="username" class="form-control" id="usernameId" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="passwordId" class="form-label">Password</label>
            <input type="password" v-model="password" class="form-control" id="passwordId">
        </div>
        <button type="button" @click="doLogin()" class="btn btn-primary">Submit</button>
    </form>
</div>

<!--<script src="/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>-->
<!--<script src="/js/vue.js"></script>-->
<!--<script src="/js/axios.min.js"></script>-->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm=new Vue({
        el:"#app",//定义监控点，vue底层会基于此监控点在内存中构建dom树
        data:{ //此对象中定义页面上要操作的数据
            username:"",
            password:""
        },
        methods: {//此位置定义所有业务事件处理函数
            doLogin() {
                //1.定义url
                let url = "http://localhost:9000/auth/oauth/token"
                //2.定义参数
                let params = new URLSearchParams()
                params.append('username',this.username);
                params.append('password',this.password);
                params.append("client_id","gateway-client");
                params.append("grant_type","password");
                params.append("client_secret","123456");
                debugger
                //3.发送异步请求
                axios.post(url, params).then((response) => {
                    debugger
                    console.log(response.data);
                    let result=response.data;
                    localStorage.setItem("accessToken",result.access_token);
                    //localStorage.setItem("refreshToken",result.refresh_token);
                    //任务调度,刷新令牌
                    //setInterval(()=>{
                    //axios.post(...) //发请求,通过refresh_token再去获取一个新的access_token
                    //localStorage.setItem("accessToken",新的access_token);
                    //},1000*60*59)
                    location.href="/fileupload-sso.html"
                })
            }
        }
    });
</script>
</body>
</html>

5.2）测试

登录后，拿到令牌了

五、单点登陆方案资源服务器配置

1、方案一：redis，token没有特殊信息（uuid）

缺点：访问压力比较大

2、方案二：token带有用户信息（jwt）

六、资源服务器配置（token带特殊含义）

1、添加依赖

打开 sac-resoure 资源服务的pom.xml文件，添加oauth2依赖。

 <!--oauth2依赖 oauth2定义了一种认证授权协议，一种规范，此规范中定义了四种类型的角色：
        1)资源有者(User)
        2)认证授权服务器(jt-auth)
        3)资源服务器(jt-resource)
        4)客户端应用(jt-ui)
        同时，在这种协议中规定了认证授权时的几种模式：
        1)密码模式 (基于用户名和密码进行认证)
        2)授权码模式(就是我们说的三方认证：QQ，微信，微博，。。。。)
        3)...
        -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-oauth2</artifactId>
        </dependency>

2、令牌处理器配置

package com.jt.resource.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.oauth2.provider.token.TokenStore;
import org.springframework.security.oauth2.provider.token.store.JwtAccessTokenConverter;
import org.springframework.security.oauth2.provider.token.store.JwtTokenStore;

/**
 * 创建JWT令牌配置类,基于这个类实现令牌对象的创建和解析.
 * JWT令牌的构成有三部分构成:
 * 1)HEADER (头部信息:令牌类型,签名算法)
 * 2)PAYLOAD (数据信息-用户信息,权限信息,令牌失效时间,...)
 * 3)SIGNATURE (签名信息-对header和payload部分进行加密签名)
 */

@Configuration
public class TokenConfig {
    //定义令牌签发口令(暗号),这个口令自己定义即可
    //在对header和PAYLOAD部分进行签名时,需要的一个口令
    private String SIGNING_KEY= "auth";
    //初始化令牌生成策略(默认生成策略 UUID)
    //这里我们采用JWT方式生成令牌
    @Bean
    public TokenStore tokenStore(){
        return new JwtTokenStore(jwtAccessTokenConverter());
    }
    //构建JWT令牌转换器对象,基于此对象创建令牌,解析令牌
    @Bean
    public JwtAccessTokenConverter jwtAccessTokenConverter(){
        JwtAccessTokenConverter converter=new JwtAccessTokenConverter();
        converter.setSigningKey(SIGNING_KEY);
        return converter;
    }
}

3、资源服务令牌解析配置

package com.jt.resource.config;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer;
import org.springframework.security.oauth2.config.annotation.web.configuration.ResourceServerConfigurerAdapter;
import org.springframework.security.oauth2.config.annotation.web.configurers.ResourceServerSecurityConfigurer;
import org.springframework.security.oauth2.provider.token.TokenStore;
import org.springframework.security.web.AuthenticationEntryPoint;
import org.springframework.security.web.access.AccessDeniedHandler;

import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

/**
 * 资源服务器的配置，在这个对象中重点要实现：
 * 1)JWT令牌解析的配置(客户端带着令牌访问资源时，要对令牌进行解析)
 * 2)启动资源访问的授权配置(不是所有登陆用户可以访问所有资源)
 */
@Configuration  //配置类
@EnableResourceServer //此注解会启动资源服务器的默认配置
@EnableGlobalMethodSecurity(prePostEnabled = true) //执行方法之前启动权限检查
public class ResourceServerConfig extends ResourceServerConfigurerAdapter {
    @Autowired
    private TokenStore tokenStore;
    /**
     * token服务配置
     */
    @Override
    public void configure(ResourceServerSecurityConfigurer resources) throws Exception {
        resources.tokenStore(tokenStore);

    }
    /**
     * 路由安全认证配置
     */
    @Override
    public void configure(HttpSecurity http) throws Exception {
        //1、关闭跨域攻击
        http.csrf().disable();
        //http.exceptionHandling()
                //不携带令牌去访问,会提示请先登录(认证)
                //.authenticationEntryPoint(authenticationEntryPoint())
                //.accessDeniedHandler(accessDeniedHandler());

        //2、放行所有资源的访问(对资源的访问个做认让)
        http.authorizeRequests().anyRequest().permitAll();
    }
    public AuthenticationEntryPoint authenticationEntryPoint() {
        return (request, response, exception) -> {
            Map<String, Object> map = new HashMap<>();
            map.put("state", HttpServletResponse.SC_UNAUTHORIZED);//SC_FORBIDDEN的值是403
            map.put("message", "请先登陆");
            //1设置响应数据的编码
            response.setCharacterEncoding("utf-8");
            //2告诉浏览器响应数据的内容类型以及编码
            response.setContentType("application/json;charset=utf-8");
            //3获取输出流对象
            PrintWriter out=response.getWriter();
            //4 输出数据
            String result=
                    new ObjectMapper().writeValueAsString(map);
            out.println(result);
            out.flush();
        };
    }
    //没有权限时执行此处理器方法
    public AccessDeniedHandler accessDeniedHandler() {
        return (request, response, e) -> {
            Map<String, Object> map = new HashMap<>();
            map.put("state", HttpServletResponse.SC_FORBIDDEN);//SC_FORBIDDEN的值是403
            map.put("message", "没有访问权限,请联系管理员");
            //1设置响应数据的编码
            response.setCharacterEncoding("utf-8");
            //2告诉浏览器响应数据的内容类型以及编码
            response.setContentType("application/json;charset=utf-8");
            //3获取输出流对象
            PrintWriter out=response.getWriter();
            //4 输出数据
            String result=
                    new ObjectMapper().writeValueAsString(map);
            out.println(result);
            out.flush();
        };
    }
}

4、ResourceController 方法配置

在controller的上传方法上添加 @PreAuthorize(“hasAuthority(‘sys:res:create’)”)注解，用于告诉底层框架方法此方法需要具备的权限，例如：

	//@PreAuthorize注解描述的方法表示必须已认证用户且有sys:res:update这个权限才可以访问
  @PreAuthorize("hasAuthority('sys:res:create')")
  @PostMapping("/upload/")
   public String uploadFile(MultipartFile uploadFile) throws IOException {
       ...
   }

//@PreAuthorize注解描述的方法表示必须已认证用户且有sys:res:update这个权限才可以访问

5、启动服务访问测试

第一步：启动服务（sca-auth,sca-resource-gateway,sca-resource)

第二步：执行登陆获取access_token令牌

http://localhost:9000/auth/oauth/token?username=jack&password=123456&client_id=gateway-client&grant_type=password&client_secret=123456

第三步：携带令牌访问资源(url中的前缀"sca"是在资源服务器中自己指定的，你的网关怎么配置的，你就怎么写)

设置请求头(header)，要携带令牌并指定请求的内容类型，例如

设置请求体(body)，设置form-data，key要求为file类型，参数名与你服务端controller文件上传方法的参数名相同，值为你选择的文件，例如

没有权限访问

有权限访问

解析token

http://localhost:9000/auth/oauth/check_token

6、文件上传JS方法设计

6.1）前端网页代码

6.1.1）登录网页

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>login</title>
</head>
<body>
<div class="container"id="app">
    <h3>Please Login</h3>
    <form>
        <div class="mb-3">
            <label for="usernameId" class="form-label">Username</label>
            <input type="text" v-model="username" class="form-control" id="usernameId" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="passwordId" class="form-label">Password</label>
            <input type="password" v-model="password" class="form-control" id="passwordId">
        </div>
        <button type="button" @click="doLogin()" class="btn btn-primary">Submit</button>
    </form>
</div>

<!--<script src="/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>-->
<!--<script src="/js/vue.js"></script>-->
<!--<script src="/js/axios.min.js"></script>-->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm=new Vue({
        el:"#app",//定义监控点，vue底层会基于此监控点在内存中构建dom树
        data:{ //此对象中定义页面上要操作的数据
            username:"",
            password:""
        },
        methods: {//此位置定义所有业务事件处理函数
            doLogin() {
                //1.定义url
                let url = "http://localhost:9000/auth/oauth/token"
                //2.定义参数
                let params = new URLSearchParams()
                params.append('username',this.username);
                params.append('password',this.password);
                params.append("client_id","gateway-client"); //客户端id
                params.append("grant_type","password");//获取令牌类型，密码
                params.append("client_secret","123456");//客户端密码
                debugger
                //3.发送异步请求
                axios.post(url, params).then((response) => {
                    debugger
                    console.log(response.data);
                    let result=response.data;
                    localStorage.setItem("accessToken",result.access_token);
                    //localStorage.setItem("refreshToken",result.refresh_token);
                    //任务调度,刷新令牌
                    //setInterval(()=>{
                    //axios.post(...) //发请求,通过refresh_token再去获取一个新的access_token
                    //localStorage.setItem("accessToken",新的access_token);
                    //},1000*60*59)
                    location.href="/fileupload-sso.html"
                })
            }
        }
    });
</script>
</body>
</html>

6.1.2）上传文件网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载演示</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        ul > li {
            list-style-type: none;
        }
    </style>
</head>
<body>
<h1>文件上传案例演示:</h1>
<form id="fileForm" method="post"
      enctype="multipart/form-data"
      onsubmit="return doUpload()">
    <div>
        <ul>
            <li><input id="uploadFile" type="file" name="uploadFile"></li>
            <li>
                <button type="submit">上传文件</button>
            </li>
        </ul>
    </div>
</form>
</body>
<script>
    //jquery代码的表单提交事件
    function doUpload() {
        debugger //debug窗口打开以后调试代码
        //获得用户选中的所有图片(获得数组)
        let files = document.getElementById("uploadFile").files;
        if (files.length > 0) {
            //获得用户选中的唯一文件(从数组中取出)
            let file = files[0];
            //开始上传这个文件
            //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
            upload(file);
        }
        //阻止表单提交效果
        return false;
    };

    // 将file上传到服务器的方法
    function upload(file) {
        //定义一个表单
        let form = new FormData();
        //将图片添加到表单中
        form.append("uploadFile", file);
        //let url="http://localhost:8881/resource/upload";
        let url = "http://localhost:9000/sca/resource/upload/";
        //异步提交方式1
        // axios.post(url, form, {headers: {"Authorization": "Bearer " + localStorage.getItem("accessToken")}})
        //     .then(function (response) {
        //         alert("upload ok");
        //     })
        //     .catch(function (error) {
        //         if (error.response.status == 401) {
        //             alert("请先登陆");
        //             location.href = "/login-sso.html";
        //         } else if (error.response.status == 403) {
        //             alert("没有这个访问权限");
        //         }
        //     });
        //异步提交方式2
        axios({
            url: "http://localhost:9000/sca/resource/upload/",
            method: "post",
            data: form,
            headers: {
                "Authorization": "Bearer " + localStorage.getItem("accessToken")
            }
        }).then(function (response) {
            console.log("response",response);
            alert("upload ok");
        }).catch(function (error) {
            if (error.response.status == 401) {
                alert("请先登陆");
                location.href = "/login-sso.html";
            } else if (error.response.status == 403) {
                alert("没有这个访问权限");
            }
        });
        //异步提交方式3
        axios({
            url: "http://localhost:9000/sca/resource/upload/",
            method: "post",
            data: form,
            headers: {
                "Authorization": "Bearer " + localStorage.getItem("accessToken")
            }
        }).then(function (response) {
            console.log("response",response);
            alert("upload ok");
        }).catch(function (error) {
            if (error.response.status == 401) {
                alert(response.message);
                location.href = "/login-sso.html";
            } else if (error.response.status == 403) {
                alert(response.message);
            }
        })
    }
</script>
</html>

6.2）测试

http://localhost:8080/login-sso.html

http://localhost:8080/fileupload-sso.html

7、Postman测试刷新令牌

七、总结

1、重难点分析

单点登陆系统的设计架构（微服务架构）
服务的设计及划分(资源服务器，认证服务器，网关服务器，客户端服务）
认证及资源访问的流程(资源访问时要先认证再访问)
认证和授权时的一些关键技术(Spring Security,Jwt,Oauth2)

2、FAQ 分析

为什么要单点登陆（分布式系统，再访问不同服务资源时，不要总是要登陆，进而改善用户体验）
单点登陆解决方案？(市场常用两种: spring security+jwt+oauth2,spring securit+redis+oauth2)
Spring Security 是什么？（spring框架中的一个安全默认，实现了认证和授权操作）
JWT是什么？（一种令牌格式，一种令牌规范，通过对JSON数据采用一定的编码，加密进行令牌设计）
OAuth2是什么？（一种认证和授权规范，定义了单点登陆中服务的划分方式，认证的相关类型）
…

3、Bug 分析

401 : 访问资源时没有认证。
403 : 访问资源时没有权限。
404：访问的资源找不到（一定要检查你访问资源的url）
405: 请求方式不匹配（客户端请求方式是GET，服务端处理请求是Post就是这个问题）
500: 不看后台无法解决？（error,warn）

八、问题总结

1、401 认证异常

2、检查令牌

3、权限校验过程分析

4、postman 上传文件

5、403 访问被拒绝

6、资源请求图标问题