Angular UI 애플리케이션 내부에서
PKCE flow를 시작하려면
우선 저희는
Keycloak 인증 서버 내부에
Angular UI 애플리케이션 정보를 입력해야 합니다
그러기 위해 Keycloak의
관리자 콘솔에 들어가겠습니다
여기를 클릭할게요
관리자 자격 증명을 요청합니다
관리자 아이디는 admin이며
제 비밀번호도 입력했습니다
그 다음 Sign In을 클릭합니다
로그인할 때 시작하는 realm은
기본값인 Master realm으로 되어 있습니다
여러분은 시작 realm을
eazybankdev로 변경해 주세요
저는 여러 수강생이
클라이언트나 사용자
또는 역할을 다른 realm에 생성해 버리는 경우를 봤습니다
그렇게 하면 grant type flow 테스트는 제대로 안 되겠죠
왜냐하면 실사용자
역할, 클라이언트 애플리케이션이 다른 realm이 있기 때문입니다
참고 부탁드립니다
클라이언트를 생성하기 위해서는
여기 있는 Clients 탭을 클릭하고
그 다음 Create client를 클릭합니다
입력하고 싶은 클라이언트 ID는 eazypublicclient인데
제 클라이언트 애플리케이션은
공개 UI 애플리케이션입니다
그래서 이름을
eazypublicclient로 붙이는 겁니다
클라이언트 ID를 정의하였으면
Next 버튼을 클릭합니다
다음으로 해야 하는
중요한 설정은
저희 클라이언트는 접근이 자유로우므로
Client authentication을 꺼야
클라이언트 secret을
Keycloak 인증 서버에 전송할 필요가 없어집니다
그러므로 Client Authentication을 끕니다
그 다음 Direct access grant는 비활성화합니다
저희는 표준 flow만 따를 것입니다
표준은 authorization code flow죠
이제 Save 버튼을 클릭하겠습니다
보시면 이번에는
클라이언트 페이지에 Credentials 탭이 없습니다
이건 공개적인 클라이언트이기 때문입니다
아래로 스크롤하면
리다이렉트 URL를 입력해야 합니다
인증이 성공할 때마다 사용자를
Angular 웹 애플리케이션의 대시보드 페이지로
재다이렉트 한다던지 할 때 쓰이죠
이와 유사하게
로그아웃 리다이렉트 URL도 입력할 수 있습니다
실사용자가 로그아웃을 할 때마다
실사용자를
Angular 애플리케이션의 홈페이지로 리다이렉트하고 싶습니다
그러므로 입력해 주겠습니다
이 정보들을 모두 정의했으면
Save 버튼을 클릭해서 저장하고
다음으로는
Advanced 탭으로 가야 합니다
Advanced 탭에서 proof를 검색해 보면
이 드롭다운이 나오는데
이걸 선택하여 저희가 따를
PKCE challenge method에 대해 이해해 봅시다
저희는 S256 즉
SHA-256 해시 알고리즘을 따를 겁니다
plain도 하나의 선택지이지만
plain은 보안이 떨어집니다
그러므로 저희는
S256 challenge method를 사용하도록 하겠습니다
S256을 선택해 줍니다
그 다음 변경 사항을 저장합니다
이걸로 제 공개 클라이언트는
인증 서버 내부에 준비가 되었습니다
다음 강의에서는
이러한 클라이언트 정보를
Angular UI 애플리케이션 내부에서 활용해 보겠습니다
들어주셔서 감사하며 다음 강의에서 뵙겠습니다, 수고하셨습니다