이제 PKCE grant type flow를
Angular UI 애플리케이션 내부에서 시행해 볼 차례입니다
이 작업은 아주 복잡합니다
왜냐하면 제 클라이언트 애플리케이션인
Angular 애플리케이션은
code verifier를 생성해야 합니다
그걸로부터 code challenge를 생성하여
Keycloak 인증 서버로 사용자를 리다이렉트해야 합니다
인증 코드를 받고
그 다음 액세스 토큰 발급도 시도해야 합니다
그 때문에 저희가 이 로직을 직접 작성하려고 하면
아주 어렵게 느껴질 겁니다
이 과정을 더 쉽게 만들기 위해 Angular 앱 내부에는
"Keycloak Angular"라는 library call이 존재합니다
이건 Keycloak Angular library에 대해 찾아볼 수 있는
웹사이트입니다
이 웹사이트의 링크는
저희 GitHub 저장소에도 언급해 두었습니다
페이지 끝을 보면
Angular Keycloak library 라고 쓰여 있으며
이 URL로 이동할 수 있습니다
Keycloak Angular library는 패키지로
개발자가
Keycloak 인증 서버에서
PKCE authorization grant type flow를 실행하고 싶을 때
큰 도움이 됩니다
아래로 스크롤하면
설치 방법이 나와 있습니다
먼저 명령을 설치해야 합니다
npm install
keycloak-angular keycloak-js입니다
이 커맨드를 이용하여
두 개의 패키지를 설치해야 합니다
패키지 설치가 완료되면
Angular 애플리케이션 내부에서 아래로 스크롤하시면 됩니다
이 library들을 어떻게 구축하는지부터모든 과정이 설명되어 있습니다
Keycloak 인증 서버에 연결하여 PKCE를
실행하는 과정에 library를 어떻게 이용할 수 있는지까지
모든 과정이 설명되어 있습니다
저는 그래서 여기 나와 있는 단계를
모두 따른 후 추가로
EazyBank Angular UI 애플리케이션에도 변경한 사항이 있습니다
제가 수정한 게 무엇인지
이해하실 수 있도록 설명드리겠습니다
첫 번째 변경사항은 제가
npm install 명령을 실행했다는 겁니다
그러자 package.json 안에서
Keycloak Angular와
Keycloak js에 관한 엔트리 두 개가 생겼습니다
package.json에 이 정보가 모두 입력되었다면
이 웹 애플리케이션은 누구에게나 공유할 수 있게 됩니다
그러면 공유받은 사람들은
직접 library를 설치할 필요가 없어집니다
그들은 npm install 명령을 실행할 때마다
이 Keycloak library들이
Angular library와 함께 설치될 겁니다
다음으로 변경해야 할 것은
Angular.json에서
일반 JS 의존성(common JS dependency)인
base64-JS와
js-SHA 256을 추가하는 겁니다
이 두 JavaScript 의존성들은
저의 Angular UI 클라이언트 애플리케이션이 code verifier를
SHA256 해시 값으로 변환하고
base64 URL 인코딩을 적용해 줍니다
이 정보는
Angular.json에 일반 JS 의존성으로 추가했습니다
이런 변경사항들은 제가 전부
GitHub 저장소에 올려 놓아서
언제든지 참고하실 수 있으므로 걱정 하지 않으셔도 됩니다
또한 Angular가 익숙치 않으셔서
너무 복잡하게 느껴진다면
이야기를 따라오면서
flow가 어떻게 작동하는지 유심히 보시길 바랍니다
PKCE가 어떤 원리인지
이해하실 수 있도록 말입니다
어쩌면 나중에는 PKCE를
Angular 애플리케이션에서 실행하거나
다른 공개 클라이언트에서 실행할 때
여기서 배운 지식을 활용할 수 있을지도 모르니까요
Angular.json과 package.json에 변경사항을 가했습니다
다음 변경사항은
app.module.ts에 가합니다
우선 첫 번째로
이 APP_INITIALIZER를
Angular core library로부터 불러왔습니다
그 다음 두 개의 class를 불러왔는데
이름은 KeycloakAngularModule과
Keycloak Service입니다. Keycloak Angular library에서 왔습니다
다음으로 app module TypeScript 파일에서
initializeKeycloak라는 이름의
함수를 제가 만들어 놓았습니다
이 함수의 입력에 저희는
KeycloakService를 넣을 겁니다
그리고 method 내부에는
Keycloak 서버에 관한 다양한 초기치 파라메터가 있습니다
이게 제 Keycloak 인증 서버 설정 값입니다
예를 들어 이건 Keycloak 서버 URL입니다
localhost8180이라고 되어 있습니다
realm 명칭도 있습니다
realm은 eazybankdev입니다
그리고 저희 클라이언트 애플리케이션의
클라이언트 ID입니다
Keycloak에서 설정했었던
클라이언트 ID와 같습니다
이런 설정 외에도
initOptions(초기치 설정) 값을 주어야 하는데
클라이언트 애플리케이션이 따라야 하는
PKCEMethod가 무엇인지 뜻합니다
S256이죠
또 리다이렉트 URI는 무엇이죠?
실사용자의 인증이 성공했다면
인증 서버는 어디로 리다이렉트해 주어야 하죠?
이 대시보드 웹페이지로 보내져야 합니다
Keycloak에서 클라이언트 애플리케이션을 생성할 때와
Angular 코드에서의
설정 값이 같도록 주의하세요
이 리다이렉트 URI를 따라가서
공개 클라이언트에서의 설정과 비교해 보면
저는 같은 값을 입력해 놓았습니다
URI 값이 만약 일치하지 않는다면
정상적으로 작동하지 않으니 주의해 주세요
그 다음에는 이 파라메터를 정의하는데
시작 시 사용자 프로필을 로드하는가의 질문에 아니라고 답했습니다
NG 모듈 내부에도 변경사항이 있습니다
첫 번째 변경사항으로
이 Keycloak Angular 모둘을 불러와야 합니다
그 다음 앱의 initializer로 기능할
provider들을 입력해야 합니다
APP_INITIALIZER에 대해 저희가 구축하고 싶은
useFactory 함수는 initializeKeycloak입니다
이게 저희가 가지고 있는 함수 값
initializeKeycloak이며
같은 값을 여기에도 입력해 주어야 합니다
그 다음 multi: true도 입력하고
다음은 의존성입니다
언급하고 넘어갈 것이 있는데
이 Keycloak library 전체가
Keycloak 서비스에 의존한다는 점입니다
저희가 app.module.ts 스크립트 파일에서
변경해야 할 것들이었습니다
궁금한 게 있다면
GitHub 저장소에 있는
스크립트와 당신의 스크립트를 비교해서
제가 이번 섹션에서 사용하는 섹션과
저번 섹션에서 사용했던 스크립트의
차이점을 찾아보시길 바랍니다
변경은 완료했으니
header HTML 파일로 가겠습니다
HTML 파일을 열겠습니다
실사용자가 이용할 수 있는 로그인과
로그아웃 옵션이 있습니다
이전에는 단순히 실사용자를
로그인 경로와 로그아웃 경로를 활용하여
리다이렉트할 뿐이었습니다
하지만 이제는 무얼 할 거냐면
로그인 버튼이나 로그아웃 버튼이 클릭되면
로그인 함수가 호출될 겁니다
사용할 로그인과 로그아웃 함수는
header.component.ts에 있습니다
header.component.ts를 열면
여기에도 변경사항이 많습니다
먼저 이 class들
KeycloakService와 KeycloakProfile을
불러와야 합니다
그 다음
이 헤더 요소 내에는
NgOnInit method가 있어서
실사용자가 로그인된 상태인지
제가 구별하기 쉽도록 했습니다
실사용자가 로그인되어 있다면
authStatus 변수를 “AUTH”로 설정하고
동시에 사용자 프로필 정보를
Keycloak로부터 불러와서
UserProfile 변수에 그 값을 할당하고자 합니다
이 userProfile 변수를
KeycloakProfile 파일로 설정했습니다
이 사용자 프로필로부터
사용자의 이름이 무엇인지 알아내서
대시보드에 띄우려고 하고 있습니다
그리고 마지막으로 이 user 객체 전체를
세션에 userdetails라는 이름으로 입력하려고 합니다
이제 header HTML로부터 호출한
login 함수 안을 보시면
Keycloak library 내부에 있는
로그인 메소드를 단순히 호출하고 있습니다
이 keycloak은 Keycloak 서비스의
변수 이름입니다
KeycloakService class를 보면
login이라는 함수가 있고
저희는 지금 그걸 호출할 뿐입니다
이와 유사하게 사용자가 로그아웃을 클릭했을 때
저희는 Keycloak 서비스 내부에 있는
로그아웃 함수를 호출해야 합니다
아까처럼 사용자를 성공적인 로그아웃 후
리다이렉트해야 하는
리다이렉트 URI를 제공해야 합니다
제가 여기서 언급한 localhost:4200/home은
Keycloak 인증 서버에
입력하는 URI와 같아야 합니다
그러면 성공적인 로그아웃 후 리다이렉트되는 URI를
어떻게 해놓았는지 보면 값이 같습니다
이게 주요한 변경사항의 전부입니다
다만 아직 몇 개의 변경사항이 남아 있는데
그건 다음 강의에서 다루겠습니다
들어주셔서 감사하며
다음 강의에서 이어가겠습니다
수고하셨습니다