[Keycloak, Docker, Mac] Keycloak에서 client, role, users 등 설정하고 React 연결하기

 

 

저번 포스팅에서 keycloak 설치를 해보았다.
이번엔 프로젝트에 맞춰서
client, role 등 설정해보자.

 

 

 

 

[ 이전 포스팅 - keycloak의 다양한 설치 방법을 알아보고 docker로 설치해보기 ] 

 

[Keycloak, Docker, Mac] 다양한 설치 방법을 알아보고 Keycloak을 Docker로 직접 설치해보자. (1)

 

 

 

 

Keycloak Client 만들기

• Create client
  전 포스팅에서 realm을 만들었는데, 이때 만들었던 realm에 들어가서 설정해야한다. Manage realms를 누르면 만들었던 realm이 보일 것이다. 그럼 그 realm을 누르면 들어가진다.

 

• Client 작성하기
  Client ID는 코드에 쓰이기 때문에 너무 길지 않게 작성하는게 좋다. 

 

• Client 속성 설정
  여기서 중요한 것은 Client authentication이 Off로 설정되어있어야하고 Authentication flow는 Standard flow로 되어있어야한다. 근데 아마 이렇게 설정되어있을 것이다.

 

• Client 로그인 URL 설정
  React 개발 서버가 보통 5173 포트니까 이렇게 넣었다. 만약 프론트에 다른 포트를 사용하고 있다면 맞는 포트를 넣어주면 된다.

 

 

 

 

---

 

 

 

 

Keycloak Role 만들기

• Create role 

 

• 최고 관리자 역할과 일반 관리자 역할 만들기

 

 

 

---

 

 

 

 

Keycloak users 만들기

• Create users
  최고관리자의 권한을 가질 users를 미리 만들었다. 테스트용 사용자로 하나 만들었다. 

 

• super1의 비밀번호 설정하기

 

• super1의 역할 부여하기

 

• 일반관리자 admin도 만들어서 역할 부여하기
  과정은 super1과 동일하다.

 

 

 

---

 

 

 

 

React - Keycloak 연결하기

• React 터미널 들어가서 명령어 입력하기

npm install keycloak-js

 

• keycloak.js 만들기

import Keycloak from "keycloak-js";

const keycloak = new Keycloak({
  url: "http://localhost:8180",
  realm: "invitevip",
  clientId: "invitevip-react",
});

export default keycloak;

React 앱이 어느 Keycloak 서버를 쓰는지, 어느 realm을 쓰는지, 어느 client를 쓰는지 알려주는 설정 파일이다. 

 

 

 

---

 

 

 

 

다음에 할 것
React에서 Keycloak과 관련된 파일을 설정해보겠다.

[Keycloak, React, Docker] React에서 Keycloak을 본격 적용하고 코드를 하나하나 파헤쳐보자.