이번 강의에서는
PKCE flow를 테스트해 보겠습니다
먼저 저번 강의에서의 변경사항을 반영한
Angular UI 애플리케이션을
실행하도록 합니다
지금 실행하는 커맨드는 ng serve입니다
이러면 Angular UI 앱이 포트 4200에서 실행됩니다
또한 Keycloak 서버와
백엔드 서버가 돌아가고 있어야
flow가 처음부터 끝까지 실행될 수 있습니다
브라우저로 왔습니다
이것은 저의 UI 애플리케이션입니다
이게 실사용자에게 보여질 페이지의
기본값입니다
Contact us를 클릭하면 이런 페이지가 뜹니다
Notices를 클릭하면
백엔드 애플리케이션으로부터 나오는
공지사항을 볼 수 있습니다
이러면 백엔드 애플리케이션도
정상적으로 작동하고 있다는 뜻입니다
이제 로그인을 클릭하면
Keycloak library에 있는 함수가
호출될 것이고 그 함수는
Keycloak 로그인 페이지로 사용자를 리다이렉트할 겁니다
한 번 해 봅시다
Login 버튼을 클릭할게요
Keycloak 로그인 페이지로 리다이렉트 되었습니다
그리고 클라이언트 ID나
리다이렉터리와 같은 정보는
모두 Keycloak Angular library로부터
오고 있습니다
여기에는 저번에 등록했던
실사용자 정보를 입력하겠습니다
설정해 놓은 실사용자 정보는
아이디는 happy@example.com, 비밀번호는 12345입니다
이제 개발자 콘솔을 열 건데
에러가 뜰 겁니다
Sign In 버튼을 누릅니다
인증은 성공하였으며
Keycloak 역시 대시보드 페이지로 리다이렉트를 했습니다
그런데 CORS communication 문제가 발생했습니다
왜 이러냐면 Keycloak는 포트 8180에 있는데
Angular 애플리케이션은
다른 포트에 있기 때문입니다
그로 인해 브라우저에서 CORS 문제가 발생하는 겁니다
그래서 응답이 없으며
페이지가 비어 있는 겁니다
이 문제를 해결하기 위해서는
Keycloak 관리자 콘솔로 가서
저희가 생성했던 공개 클라이언트로 갑니다
그리고 Settings에서 아래로 스크롤하면
Web Origins라는 이름의 필드가 있습니다
여기에 *을 입력할 건데
이러면 어느 웹 오리진이나
Keycloak 인증 서버와 소통할 수 있도록 한다는 뜻입니다
하지만 현실에서는
Angular 애플리케이션의 개발자 URL로
리다이렉트 시키면 됩니다
지금으로서는 이 *표를 입력해 둘게요
변경 사항을 저장합니다
다시 Angular 애플리케이션에 접근을 시도하겠습니다
이번에는 로그인을 클릭하면
대시보드로 바로 왔습니다
왜냐하면 브라우저가 리소스 소유자와
자격 증명을 기억하고 있기 때문입니다
그래서 다시 자격 증명을 입력할 필요가 없었던 겁니다
이제 이 계정을 클릭하겠습니다
Account Information은 채워져 있으며
이와 비슷하게 Balance Information 역시 정보가 채워져 있고
Loans Information도 정상
Cards Information도 정상입니다
모든 게 문제 없이 작동 중이네요
그러면 이제 로그아웃 버튼을
클릭하고 무슨 일이 일어나는지 보겠습니다
로그아웃이 발생할 때마다
제 인증 서버는 액세스 토큰을 무효화한 다음
홈페이지로 리다이렉트를 시킵니다
이제 안 좋은 상황을 보겠습니다
실사용자 happy@example.com에 대해
할당되었던 역할을 제거해 봅시다
Role mapping으로 갑시다
사용자가 가지고 있는 관리자 역할을 제거하겠습니다
Remove 버튼을 누릅니다
이제 이 실사용자는 사용자 역할만 있습니다
이 사용자가 접근할 수 있는 곳은 대시보드, myAccount
myBalance, my Loans 그리고 myCards입니다
아직 모든 곳에 접근이 가능하네요
사용자 역할 대신에
관리자 역할을 제거하면 실사용자는
myAccount, myCards APA에는 접근이 안 될 겁니다
그럼 수정하겠습니다
실사용자의 사용자 역할을 없애고
관리자 역할을 다시 할당하겠습니다
이제 다시 애플리케이션으로 로그인합니다
여기 입력해야 하는 자격 증명은
happy@example.com 그리고 비밀번호는 12345
Sign In 버튼을 클릭합니다
대시보드는 실사용자가 접근할 수 있습니다
이제 이 페이지에 있는
다른 탭들에 접근을 시도해 봅시다
개발자 콘솔을 연 채로 하겠습니다
Account에 접근을 시도하면
아무리 여러 번 클릭해도
아무 일도 일어나지 않습니다
이 API에 접근할 권한은 없기 때문입니다
Cards도 마찬가지로
계속 클릭해도 일어나는 일은 없습니다
반면에 Loans는 응답이 있습니다
Balance도 마찬가지입니다
이런 방식으로
Keycloak 인증 서버에서
제공하는 규칙에 따라
여기서도 역할 기반 인증이 이루어집니다
Happy에게 다시 역할을 할당해 줄게요
그런 다음 애플리케이션에서 로그아웃 한 다음
다시 로그인을 시도할 겁니다
저희가 사용해야 하는 자격 증명은
happy@example.com 비밀번호는 12345입니다
Sign In을 클릭합니다
이번에는 Accounts가 클릭이 됩니다
Balance도 마찬가지로
제대로 된 응답이 있습니다
Loans도 해 봅시다
Loans와 Cards도 정상으로 작동합니다
이걸로 성공적으로
EazyBank 웹 퍼블리케이션에
PKCE 인증 flow를 실행했습니다
이제 로그아웃 해도 될 것 같습니다
잘 이해되셨길 바랍니다
부탁이 있는데요
Angular가 익숙치 않아도 괜찮습니다
그래도 PKCE가 어떤 개념인지 이해는 시도하셔서
앞으로 공개 클라이언트나
모바일 애플리케이션에 대해 작업할 때
이 PKCE authorization grant type flow를
클라이언트 애플리케이션에 활용할 수 있으셨으면 좋겠습니다
들어주셔서 감사하며 다음 강의에서 뵙겠습니다
수고하셨습니다