https://github.com/chanos-dev/vue-.net-keycloak

vue + .net6+ web api + keycloak(sso)
https://github.com/chanos-dev/vue-.net-keycloak

Last synced: 3 days ago
JSON representation

vue + .net6+ web api + keycloak(sso)

• Host: GitHub
• URL: https://github.com/chanos-dev/vue-.net-keycloak
• Owner: chanos-dev
• Created: 2023-04-12T16:44:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-13T16:56:26.000Z (almost 3 years ago)
• Last Synced: 2026-03-29T21:42:38.757Z (3 months ago)
• Language: C#
• Size: 121 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
### vue(FE) + .NET Web API(BE) + Keycloak(SSO)

---

##### Deploy infrastructure services using Docker.

- postgresql docker [docker-compose.yml](./docker/postgresql/docker-compose.yml)

- quay.io/keycloak docker [docker-compose.yml](./docker/keycloak/docker-compose.yml)

---

##### Vue3 + vite framework

```

npm create vite@latest

npm install keycloak-js

```

- `keycloak-js`에서 token 교환 방식이 authorization code의 public type으로 진행이 된다.

  - client secret을 사용하지 않고 token을 교환한다.

    - keycloak-js 라이브러리 [client secret 로직 삭제](https://github.com/keycloak/keycloak/commit/913056b2b2d39707347a39dddb7bdad69fe47cc3)

- [PKCE 설정](#pkce-설정)을 통해 token 교환 시 보안성을 높일 수 있다.

---

##### PKCE 설정

###### Keycloak

- `realm -> clients -> client id 선택`

- `Settings -> Access Type을 public으로 선택`

  - ![keycloak-client-type](./assets/keycloak-client-type.png)

- `Settings -> Advanced Settings -> Proof Key for Code Exchange Code Challenge Method를 S256으로 선택`

  - ![keycloak-client-pkce-method](./assets/keycloak-client-pkce-method.png)

###### keycloak.js

```javascript 

// init method 호출 시 pkceMethod 지정

keycloak.init({ onLoad: 'login-required', pkceMethod: 'S256' })

```