화면에 보이는 것은
authorization code grant type flow를 이용할 때
따라야 하는 단계입니다
먼저 클라이언트 애플리케이션은 실사용자를
인증 서버에 보내 자격 증명을 입력하도록 합니다
그동안 인증 서버는
클라이언트 애플리케이션에게 인증 코드를 보내는데
이 코드는 일시적입니다
그 뒤에는 클라이언트가
인증 코드를 받아
액세스 토큰을 얻기 위해
자신의 클라이언트 자격 증명을 보내야 합니다
그러면 저번 강의에서 생성했던
클라이언트와 사용자 정보를 이용하여
이 flow를 테스트해 봅시다
그러면 첫 번째로 클라이언트 애플리케이션이
인증 코드를 받고
실사용자를
Keycloak 인증 서버로 리다이렉트하기 위해서는
이 인증 endpoint를 사용해야 합니다
그러면 이 값을 가져올게요
이 값을 이용하여 GET 요청을 해야 합니다
복사한 다음에
Postman 애플리케이션으로 가보겠습니다
여기 Postman 애플리케이션 내부에서는
GET URL을 붙여넣은 후
query parameter 몇 개를 채워넣어야 합니다
인증 서버에 보내고 싶은 첫 번째 query parameter는
클라이언트 ID입니다
이 클라이언트 ID 값은
Keycloak 인증 서버로부터 받을 수 있습니다
Clients로 가면
제가 만든 클라이언트 중에
eazybankclient라는 게 있습니다
이 클라이언트의 ID 값을 가져다가
client_id에 붙여넣습니다
그 다음에는 response_type을 채워넣겠습니다
response_type 값은 code여야 합니다
받고자 하는 게 인증 코드이기 때문이죠
response_type 다음에는
scope도 알려줍니다
지금은 scope 값을 OpenID로 합니다
그 다음에는 redirect_uri를 알려줍니다
URL이 아니라 URI입니다
알맞은 값을 주도록 조심하시고
여기에 해당하는 값은
Keycloak 내부에서 설정한 것과 같습니다
저번에 주었던 리다이렉트 URI를 확인해 보겠습니다
Clients 페이지에서
아래로 스크롤하면 리다이렉트가 나옵니다
이 값을 가져갈게요
그리고 여기에 붙여넣어 줍니다
그리고 마지막으로 state_value를 줍니다
이 state_value(상태 값)은 CSRF 토큰으로 기능할 겁니다
아무 값이나 입력하겠습니다
이것으로 GET URL과
query params를 만들었습니다
사실 Postman에서 직접적으로
이것을 호출할 수는 없습니다
왜냐하면 GET URL을 호출함으로써
실사용자는
Keycloak 로그인 페이지로 리다이렉트되기 때문입니다
그러므로 실사용자가 직접 자격 증명을 입력해야 합니다
Postman으로는 그게 가능하지 않으므로
query params를 기반으로 생성된
GET URL을 복사합니다
그리고 같은 URL을 브라우저에 붙여 넣습니다
접근을 시도하는 순간
리소스 서버의 실사용자가
Keycloak의 로그인 페이지로 리다이렉트되는 것을 확인할 수 있습니다
기본적으로는 Keycloak 서버는
본명을 이용한 로그인 페이지를 띄워 줍니다
하지만 이를 변경하고 싶다면
당신이 속한 단체의 CSS 요구사항
또는 디자인 요구사항에 따라
편집이 가능합니다
로그인 페이지 설정에 대해서는
Keycloak 공식 페이지를 참조해 주세요
일단 지금은 실사용자가 서드 파티 UI 애플리케이션으로부터
이 페이지로 리다이렉트된 것이라고 가정합시다
여기에 실사용자는 자신이 Keycloak 인증 서버
또는 EazyBank 애플리케이션에서 등록한
자격 증명을 입력해야 합니다
저희가 생성했던 아이디는
happy@example.com
비밀번호는 12345였습니다
Sign In을 클릭하면
아까 언급한 리다이렉트 URI로
리다이렉트될 겁니다
저는 이제 로컬 호스트 샘플 URL 7080으로
리다이렉트되었는데 이 링크는 존재하지 않습니다
그래서 사이트에 접근하지 못했다고
에러가 뜨는 겁니다
여기서 상태 값이
이전에 입력한 것과 같아야 한다는 점에 주의하세요
여기서 가져와야 할 중요한 정보는
오른쪽으로 스크롤하면
복사해야 할 코드 값이 있습니다
이 코드 값이
authorization code grant type flow에서 할
두 번째 단계에 필요합니다
실제 애플리케이션에서는
인증 서버가 UI 애플리케이션으로
실사용자를 리다이렉트하는 동안
애플리케이션이 액세스 토큰에 대한 POST 요청을 보낼 겁니다
그러면 두 번째 단계도 유효화해 봅시다
이 코드 값을 가져다가
Postman 내부에서 POST 요청을
인증 서버의 URL로 보내서
액세스 토큰을 받아아 합니다
저희가 액세스 토큰을 얻기 위하여
생성해야 하는 URL은 여기서 세 번째
토큰 endpoint입니다
그러면 이 값을 가져올게요
여기에 붙여넣습니다
큰따옴표는 지워 줍니다
이 요청은 POST 요청이기 때문에
Body에서 x-www-form-urlencoded를 선택하여
모든 정보를 보낼 수 있도록 하여야 합니다
넘기고 싶은 정보 중
가장 첫 번째는 클라이언트 ID입니다
그 다음으로 클라이언트 secret을 입력해야 하는데요
Keycloak 인증 서버에서 이 정보를 가져와 봅시다
이게 제 클라이언트 ID입니다
ID를 복사해서 붙여넣고 secret를 볼려면
Credentials 탭으로 가서
이 값을 복사한 다음
여기에 붙여넣어 줍니다
다음으로 필요한 정보는
grant_type입니다
authorization code grant type flow의 이 단계에서
필요한 grant_type은
인증 코드 그 자체입니다
authorization_code라고 입력합니다
이 값을 넘기면
저번 단계에서 받았던 인증 코드를
넘기라는 뜻이 됩니다
마지막으로 리다이렉트 URI가 필요합니다
리다이렉트 URI를 찾아와 볼게요
이게 리다이렉트 URI입니다
이걸 가져와서 붙여넣겠습니다
인증 코드도 가져오겠습니다
이게 저희가 가져와야 할 인증 코드입니다
여기 붙여넣겠습니다
그러면 이제 토큰 URL에 요청을 보내면
액세스 토큰을 받을 수 있을 겁니다
그런데 지금은 에러가 뜨고 있습니다
코드가 유효하지 않다네요
왜 이러냐면
받은 인증 코드는
수 초 이내에 만료되기 때문입니다
제 인증 코드가 만료된 것 같습니다
그러므로 이전 단계부터 다시 거쳐야 합니다
이 GET URL을 붙여 넣어
접근을 시도해보겠습니다
이번에는 아이디와 비밀번호를
입력하라고 하지 않습니다
전에 이미 자격 증명을 입력했기 때문이죠
여기서 오른쪽으로 스크롤하면
복사할 수 있는 코드 값이 있습니다
이 값을 가져다가
붙여넣어서 코드 값을 알려주고
scope이 입력되어 있지 않습니다
scope 값을 openid로 입력합니다
이제 Send 버튼을 클릭해 보겠습니다
이번에는 액세스 토큰
새로고침 토큰과 ID 토큰이 반환되었습니다
여기서 관심이 가는 건 액세스 토큰입니다
이 액세스 토큰을 가져다가
JWT 웹사이트에서 붙여넣어 보겠습니다
그러면 지금은 roles 아래에
사용자나 관리자 역할이 보이지 않습니다
그러면 이 액세스 토큰을 이용하여
리소스 서버 내부에 있는
REST API 서비스에 접근하려 하면
forbidden 에러가 뜨겠죠
Bearer 값 뒤에 액세스 토큰 값을 붙여넣습니다
이번에 받은 액세스 토큰은 그냥 날려 보겠습니다
Send 버튼을 클릭하면
forbidden 에러가 뜹니다
이러면 저희가 받은 액세스 토큰은 유효하긴 하지만
사용자에게 이 API를 호출할 수 있는 역할은 없다는 겁니다
그러면 Keycloak 인증 서버 내에서
저희가 할 수 있는 일이 뭐냐면
Users를 클릭한 다음 happy@example.com로 가서
Role mapping 탭으로 갑니다
이 Assign role 버튼으로
관리자와 사용자 같은 역할을 할당할 수 있죠
Assign 버튼을 클릭하겠습니다
이걸로 실사용자 Happy에게
역할이 할당되었습니다
이제 flow를 다시 실행해 보겠습니다
먼저 제가 생성했던 GET URL을 가져다가
브라우저에 붙여넣고
그러면 코드를 얻을 수 있습니다
이게 코드입니다
코드를 복사해서 여기에 붙여넣고
토큰 URL에 POST 요청을 보내서
액세스 토큰을 얻겠습니다
이제 이 액세스 토큰을 가져다가
MyCard API에 Bearer 값 뒤에
붙여넣어 주면
이번에는 성공적인 응답이 돌아올 겁니다
Send 버튼을 눌러서 호출합니다
이제 보시면 성공 응답이 왔습니다
액세스 토큰이 유효하다는 뜻입니다
이걸로 저희는
Postman의 도움을 받아
서드 파티 UI 애플리케이션이
리소스 서버 내부의
API에 접근하여 한다고 가정하여
authorization code grant type flow를 테스트해 봤습니다
다음 단계로는 Angular UI 애플리케이션에
OAUTH2 프로토콜도 통합시켜 보겠습니다
그렇게 하면 Angular UI application 통하여
리소스 서버 내부의 REST API에 접근할 수 있으며
Keycloak를 활용하여
실사용자의 자격 증명과 인증을
진행할 수 있게 됩니다
들어주셔서 감사하며 다음 강의에서 뵙겠습니다
수고하셨습니다