주니어 개발자의 우여곡절 소셜로그인 도입 과정
안녕하세요, 오픈소스 기술파트에서 근무하고 있는 rogers라고 합니다. 오픈소스 기술파트에서는 오픈소스 관리 서비스인 OLIVE Platform을 제공하고 있습니다. 이번에 더 많은 사용자에게 OLIVE Platfor
tech.kakao.com
소셜 로그인
: 소셜 네트워킹 사이트의 정보를 이용해 타사 애플리케이션과 플랫폼에 손쉽게 로그인할 수 있는 프로세스. 일명, 간편 로그인.
# 오픈소스 기술파트에서는 오픈소스 관리 서비스인 OLIVE Platform을 제공한다.
# 구글, 깃허브, 페이스북은 OAuth2 프로토콜 기반의 인증방식을 지원.
1. OAuth2 주요 용어 설명
| 클라이언트(Client) | 리소스에 접근하려는 애플리케이션 (OLIVE Platform에서는 Spring 서버에 해당) |
| 인증 서버(Authorization Server) | 인증 및 인가를 수행하는 서버로 리소스에 대한 액세스 토큰을 발행 |
| 리소스 서버(Resource Server) | 리소스를 호스팅하는 서버로 액세스 토큰의 유효 여부를 확인하고 해당 리소스에 대한 접근을 허용 |
| 인증 코드(Authorization Code) | 사용자가 로그인에 성공하고 나서 받는 코드이며 이후 액세스 토큰을 발행할 때 필요 |
| 액세스 토큰(Access Token) | 리소스에 접근할 때 필요한 토큰 |
| 클라이언트 ID(Client ID), 클라이언트 보안 비밀번호(Client Secret Password) |
등록된 클라이언트에게 발급하는 정보로 인증하는 데 사용 |
| 권한 범위(Scope) | 리소스 접근 범위 |
| 리다이렉트 URI(Redirect URI) | 인증 서버가 인증 후 응답을 보낼 클라이언트 URI |
2. 앱 등록
: 앱에 관한 정보를 입력하고 클라이언트 ID 및 클라이언트 보안 비밀번호(Client Secret Password)를 얻는 과정.
(위 글에서는 페이스북으로 진행.)
# 준비물 : 페이스북 계정, Meta for Developers 계정, 앱의 페이스북 페이지
# 과정
1. Meta for Developers의 내 앱에 접속한 후 앱 만들기 버튼을 눌러준다.
2. 앱 유형을 비즈니스로 선택한다.
3. 앱 이름 및 이메일을 입력한다.
4. 설정 > 기본 설정에서 추가 정보를 입력한다.
5. 대시보드 탭으로 이동한 후 Facebook 로그인의 설정을 클릭한다.
6. 웹을 선택한다.
7. 웹사이트 정보를 입력 후 계속 다음하기를 눌러 마지막 장까지 간다. 웹사이트 정보 입력란 외의 나머지 페이지들은 구현 가이드이다.
8. Facebook 로그인 탭의 설정에 들어간다. 유효한 OAuth 리디렉션 URI를 입력한다. 이 URI는 인증 서버로부터 응답을 받는 주소가 된다.
9. 앱 검수 탭의 권한 및 기능으로 들어간다. 필요한 권한(Scope)이 있다면 고급 액세스 이용하기를 눌러 권한을 얻는다.
10. 설정 탭의 기본 설정에 들어가서 앱 ID와 앱 시크릿 코드를 복사한다. 앱 ID와 앱 시크릿 코드는 이후 인증과정에서 필요한 정보이다.
3. Spring Framework 라이브러리 설정
: OLIVE Platform의 Spring 서버에 OAuth2 인증 과정을 쉽게 처리해주는 spring-boot-starter-oauth2-client 라이브러리를 도입하여 서버 단의 소셜로그인을 구현.
# spring-boot-starter-oauth2-client를 사용하기 위해서는 의존성을 추가해주어야 한다.
4. Client Registraion 및 Provider 주요 설정
: Client Registration 부분에서는 클라이언트의 정보를, Provider 부분에서는 인증 서버와 리소스 서버에 대한 정보를 추가한다.
# OLIVE Platform에서는 Spring의 각종 설정을 사내 키 관리 서비스에 보관해서 사용하기 때문에 직접 빈(Bean)으로 등록해야 한다.
5. Oauth2 설정 커스터마이징
# 5가지 설정 커스터마이징
1. authorizationEndpoint : 사용자가 호출하는 클라이언트의 인증 시작 API에 대한 설정. 사용자가 이 API를 호출하면 소셜로그인 페이지로 사용자를 리다이렉트한다.
- authorizationRequestRepository : 사용자의 인증 요청을 임시로 보관하는 리포지토리에 대한 설정. 이 요청에는 인증 과정을 모두 마친 후 리다이렉트할 프론트의 URI가 담겨있다.
2. redirectionEndpoint : 인증 서버가 응답을 반환하는 클라이언트의 URI에 대한 설정. /login/oauth2/code/facebook처럼 매칭된다.
3. userInfoEndpoint : 리소스 서버로부터 유저 정보를 가져올 때 사용되는 설정
4. successHandler : 인증 및 유저 정보를 가져오는 것까지 성공했을 때 호출되는 핸들러를 설정
5. failureHandler : 인증 또는 유저 정보를 가져오는 데 실패했을 때 호출되는 핸들러를 설정
6. JWT 도입
: 로그인 상태를 유지하기 위해 JWT(JSON Web Token) 토큰 이용.
# 로직 구현
1. 소셜로그인 인증 및 유저 정보를 가져오는 데 성공하면 successHandler로 진입한다. 이 핸들러에 JWT 토큰을 발급하고 이를 포함시켜 프론트로 리다이렉트하도록 한다.
2. JWT 토큰을 받은 프론트는 다음 API 요청부터 토큰을 포함시켜 보낸다. 필터에서 해당 토큰이 유효한지와 해당 사용자가 존재하는지 확인한다. 확인에 성공하면 SecurityContextHolder에 UserPrincipal을 저장한다. 저장된 UserPrincipal은 이후 로그인 여부 파악 등에 사용된다.
7. 프론트 작업
1. 클릭했을 때 인증 시작 API로 이동하는 로그인 버튼을 추가. 링크는 “{client url}/oauth2/authorization/facebook?redirect_uri=’프론트의 콜백 URI’”로 작성한다.
2. 클라이언트에서 인증과정을 모두 마치면 1번 과정에서 파라미터로 넘긴 redirect_uri로 리다이렉트해 라우팅 등의 추가 구현을 한다.
- 로그인에 실패하면 로그인 실패 페이지로 이동한다.
- 로그인에 성공하면 서버로부터 받은 JWT 토큰을 저장한다. 이후 클라이언트 API를 호출할 때 이 토큰을 함께 보내게 된다.
- 신규 유저면 회원가입 페이지로, 기존 유저면 내 프로젝트 페이지로 이동한다.
8. 전체 시퀀스 다이어그램
1. 사용자의 유저 에이전트(User Agent)가 클라이언트(Client)의 인증 시작 API를 호출한다.
2. 클라이언트는 유저 에이전트를 페이스북의 인증 URI(Authorization URI)로 리다이렉트한다.
3. 사용자는 로그인을 수행한다.
4. 인증 서버(Authorization Server)가 인증 성공 여부를 클라이언트로 전달한다. 성공 시 인증 코드(Authorization Code)가 전달된다.
5. 클라이언트는 액세스 토큰(Access Token)을 요청한다. 이전에 전달받은 인증 코드를 파라미터로 포함한다.
6. 인증 서버는 클라이언트의 요청이 유효하다면 액세스 토큰을 반환한다.
7. 클라이언트는 사용자의 프로필 정보를 요청한다. 이전에 반환받은 액세스 토큰을 파라미터로 포함한다.
8. 인증 서버는 클라이언트의 요청이 유효하다면 유저 프로필 정보를 반환한다.
9. 클라이언트는 JWT 토큰을 발행하고 이 토큰을 포함시켜 프론트 콜백 URI(Front Callback URI)로 리다이렉트한다.
10. 프론트(Front)는 JWT 토큰을 저장하고 이후 작업을 수행한다. 로그인 성공 시 OLIVE Platform의 My Project로 라우팅한다.
이렇게 OAuth2를 이용한 소셜로그인 구현은 끝나게 된다.
느낀점
: 소셜로그인은 실생활에서도 많이 이용되고 있는 편리한 서비스 기능 중 하나이다. 그 기능을 어떻게 구현하는지에 대해 자세히 설명해놓은 글을 보면서 이렇게 구현되는거구나 하는 깨달음을 얻게 되었다. 기본 틀은 알았지만 아직 모르는 용어나 개념도 많아 그 부분에 있어서 추가공부가 필요할 것 같다.
2022111329 오설
'기술 스터디 & 뉴스 스크랩' 카테고리의 다른 글
| [기술 스터디] 삼성 SDS_IT 전문가들이 꼽은 꼭 알아야 하는 2023년 하반기 기술 트렌드 (0) | 2023.05.09 |
|---|---|
| [기술 스터디] 삼성 SDS_제로 트러스트(Zero Trust), 보안과 신뢰의 고정관념을 깨다 (0) | 2023.04.30 |
| [기술 스터디] 우아한 형제들_Slack에 ChatGPT를 연결하여 업무에 활용해 보기 (0) | 2023.04.17 |
| [기술 스터디] 삼성 SDS_2023년은 클라우드 최적화에 집중하자 (0) | 2023.04.03 |
| [기술 스터디] 삼성 SDS_대화형 AI 전쟁의 서막, 승자는 누가 될 것인가? (0) | 2023.03.28 |