지금으로서는 클라이언트 애플리케이션에
Keycloak 인증 서버에 등록한 자격 증명으로만
로그인이 가능합니다
GitHub 같은 소셜 로그인 기능은 없습니다
이번 강의에서는 Keycloak을 이용하여 손쉽게
소셜 로그인을 추가하는 방법에 대해 알아보겠습니다
그러기 위해
Keycloak 관리자 콘솔로 가겠습니다
Identity providers에서
사용하고 싶은 소셜 로그인이 무엇인지
선택해야 합니다
이것들은 모두 Keycloak에서 지원하는
소셜 로그인입니다
지금은 GitHub를 선택합니다
여기서 Keycloak은
GitHub에서 받은 클라이언트 ID와 secret을
달라고 하고 있습니다
GitHub로 가면
이전에 OAuth 애플리케이션을 만들었습니다
여기 있는 설정으로 가면 됩니다
설정에서
아래로 스크롤하면 Developer settings 페이지가 있습니다
그리고 OAuth Apps를 클릭하면
EazyBytes라는 OAuth 애플리케이션을 만들었습니다
이 앱을 클릭하면
클라이언트 ID와 클라이언트 secret이 있습니다
클라이언트 ID와 클라이언트 secret을
Keycloak에 줘야 합니다
클라이언트 ID를 주겠습니다
클라이언트 ID를 붙여넣고
똑같이 클라이언트 secret도 줍니다
이제 이 정보를 저장하기 전에
Keycloak로부터 이 리다이렉트 URI를 가져다가
같은 URI를
GitHubd에 있는 callback URL에 입력해야 합니다
여기 있는 콜백 URL을
Keycloak 인증 서버의 것으로 대체할게요
그리고 지금 Angular 앱의 Homepage URL은
8080이 아닌 4200입니다
홈페이지 URL도 바꿨습니다
GitHub에서 일단 저장합니다
그 다음 Keycloak로 가서
Add 버튼을 클릭합니다
이걸로 제 Keycloak 로그인 페이지는
GitHub로도 로그인이 가능해졌을 겁니다
그러면 Angular 애플리케이션으로 갈게요
그리고 Login을 클릭합니다
보이시듯이 이번에는
아이디와 비밀번호 입력란과 함께
GitHub로 로그인하는 선택지도 뜹니다
개인정보 보호 모드로 바꾸고 클릭하겠습니다
개인정보 보호 브라우저에서
Angular 애플리케이션을 열었습니다
로그인을 클릭한 다음 GitHub로 로그인을 클릭합니다
그러면 GitHub의 자격 증명을 요청할 겁니다
지금 저는 GitHub 로그인 페이지로 들어왔습니다
제 아이디인
eazybytes와 제 비밀번호를 입력합니다
그 다음 Sign In을 클릭합니다
여기에서 GitHub는
EazyBytes에서 추가적인 권한을 요청하고 있으며
개인정보가
인증 서버와 공유될 것이며
인증하면 로컬 호스트 8180로 리다이렉트될 것이라며
권한을 요청하고 있습니다
Authorize eazybytes를 클릭하겠습니다
이제 Keycloak 인증 서버는
GitHub로부터 제 개인정보를
처음으로 받았으므로
이름과 성 같은
부가 정보를 입력해 달라고 하고 있습니다
이름은 Eazy
성은 Bytes로 할게요
아이디와 이메일은 GitHub로부터 받아왔습니다
Submit를 누릅니다
그러면 저는 대시보드로 이동됩니다
이제 대시보드에 접근이 가능합니다
그런데 Accounts를 클릭하려 하자
Angular 애플리케이션에서 원하는 역할을
GitHub에서 제 계정에 할당해 주지 않았기 때문에 접근이 안 됩니다
이게 소셜 로그인의 단점입니다
소셜 로그인 인증 서버에 대해서는
저희에게 아무런 권한이 없습니다
이러면 저는 역할을 요구하지 않는
API에만 접근이 가능합니다
Loans를 클릭해 봐도
작동이 안 됩니다. 백엔드 애플리케이션 데이터베이스에는
tutor@eazybytes라는 이메일을 가진
사용자가 등록되어 있지 않기 때문입니다
그래서 아무 데이터도 없으며
빈 데이터만 표시됩니다
그래도 Keycloak 인증 서버를 활용한
소셜 로그인이 쉽다는 건 이해가 되실 겁니다
하지만 소셜 로그인을 이용하면
여러 제한도 있습니다
작은 애플리케이션이나
변화가 없는 애플리케이션이라면 괜찮을 수도 있습니다
또 한 가지
중요한 정보인데
여기서 Users로 가면
eazybytes라는 새로운 사용자가 있으며
이메일은 tutor@eazybytes라는 걸 알 수 있습니다
이 사용자는 GitHub을 이용하여
제가 처음으로 로그인에 성공하였을 때
자동으로 생성된 겁니다
또한 Keycloak 인증 서버는
GitHub로부터 받는 프로필 정보를 저장하며
액세스 토큰 역시 저장하고 있어
실사용자가 여러 번
애플리케이션에 로그인을 시도한다면
액세스 토큰을 활용하여
실사용자가 GitHub을 통해
여러 번 로그인할 필요가 없도록 합니다
이게 바로 Keycloak의 미입니다
Keycloak와 OAuth에 대해 아주 많이 다루었습니다
이 섹션은 아주 내용이 많고 복잡하죠
그래도 고급 주제를 다루는 이 섹션이
재미있게 느껴지셨으면 좋겠습니다
이런 고급 주제들
OAuth, Keycloak, OpenID, PKCE, JWT tokens
SpringSecurity 인증 규칙
SpringSecurity 인증 등은
배울 가치가 있다고 장담합니다
어떠한 개발용 웹 애플리케이션에든
이 기능들을 적용할 수 있습니다
이 기능들은 모두 인증이 되었으며
업계 기준에 맞추어져 있기 때문입니다
마지막으로 말씀드리고 싶은 건
GitHub 코드에 관한 것입니다
이 GitHub 저장소 페이지로 가면
Section 13이라는 폴더가 있으며
이 폴더 안에는
이 섹션에서 다룬 모든
UI와 백엔드 코드가 있습니다
궁금한 게 있으시다면 당신의 코드를
GitHub 저장소 내부의 코드와 비교해 보시면 됩니다
그러면 대부분의 질문은 해결될 겁니다
그래도 해결되지 않는 게 있다면
언제든지 질문을
Q&A 포럼에 올리세요
들어주셔서 감사하며 다음 강의에서 뵙겠습니다, 수고하셨습니다