# spring-oauth2-vue-demo

**Repository Path**: bellcode/spring-oauth2-vue-demo

## Basic Information

- **Project Name**: spring-oauth2-vue-demo
- **Description**: 使用spring authorization server 和 vue.js(vue2) 搭建实现oauth2协议框架的authorization code授权模式的认证流程
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/bellcode/spring-oauth2-vue-demo
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2022-08-06
- **Last Updated**: 2024-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# spring-oauth2-vue-demo

#### 介绍
使用spring authorization server 和 vue.js(vue2) 搭建实现oauth2协议框架的authorization code授权模式的认证流程

本demo的后端是基于spring官方给的demo进行修改， 源码地址：
https://github.com/spring-projects/spring-authorization-server

前端是基于vue-oidc-client的vue2版本做了一点修改，源码地址：
https://github.com/soukoku/vue-oidc-client

#### 软件架构
软件架构说明
authorization-server目录是后端java代码，具体架构可参考源码github上相关说明
vue2-oidc-client目录是前端vue.js代码，通过oidc协议访问authorization-server来认证授权 

#### 安装教程
后端
1. cd authorization-server
2. ./gradlew bootRun 

运行后默认监听9000端口，可打开浏览器输入http://127.0.0.1:9000
用户名 user  密码  password
登陆成功后显示 hello user信息

前端
1. cd vue2-oidc-client
2. npm install
3. npm run serve
运行后打开浏览器输入 http://127.0.0.1:8080  (注意不要输入http://localhost:8080)
点击About(Protected) 菜单会自动跳转到 http://127.0.0.1:9000/login页面， 输入用户名密码后会跳回到8080端口的前端展示页面，
显示jwt（sub, azp, access_token) 信息。
4. 点击Signout注销

#### 使用说明

前端关键配置
vue2-oidc-client/src/sample-app/idsrvAuth.ts

```
const authority = "http://127.0.0.1:8080";
```
当authority指向vue开发模式下的端口，即模拟把client和authorization server部署在一个域名下，不会存在跨域问题，
而这同时依赖vue.config.js的代理配置

```
const proxy = 'http://127.0.0.1:9000'
module.exports = {
  devServer: {
    proxy: {
    "/oauth2": {
    target:  proxy,
    changeOrigin : true
   },
   "/userinfo": {
     target : proxy,
     changeOrigin : true
   },
   "/login" : {
     target : proxy,
     changeOrigin : true
   },
   "/logout": {
        target : proxy,
        changeOrigin : true
      }
  }
 },
```

而当authority指向authorization server的监听地址，则模拟client和authorization server部署在不同域名下，需要后端解决跨域问题
```
const authority = "http://127.0.0.1:9000";
```
跨域问题的关键代码

authorization-server/src/main/java/example/OAuth2AuthorizationServerSecurityConfiguration.java 

```
@Bean
	@Order(1)
	public SecurityFilterChain authorizationServerSecurityFilterChain(HttpSecurity http) throws Exception {

		http.cors(withDefaults());

		OAuth2AuthorizationServerConfiguration.applyDefaultSecurity(http);
		http.oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt);
		return http.formLogin(withDefaults()).build();
	}

	@Bean
	CorsConfigurationSource corsConfigurationSource() {
		CorsConfiguration configuration = new CorsConfiguration();

		configuration.setAllowedOrigins(Arrays.asList("http://127.0.0.1:8080"));
		configuration.setAllowedMethods(Arrays.asList("GET","POST","OPTIONS"));
		configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);

		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", configuration);

		return source;
	}
```

authorization-server/src/main/java/example/MyInterceptor.java
这段代码解决跨域后OPTIONS请求失败的问题
```
  @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        //如果是预检请求，手动加上请求状态200
        if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            var origin = request.getHeader("Origin");
            response.addHeader("Access-Control-Allow-Origin",origin);
            response.addHeader("Access-Control-Allow-Headers","authorization");
            return false;
        }

        return true;
    }
```