안녕하세요 카우치코딩입니다.
최근 여러 서비스를 이용하면 예전처럼 ID, Password를 입력해서 회원가입을 하는 경우는 거이없고 대부분 구글, 카카오, 네이버등 다른 서비스의 아이디를 이용해서 로그인을 합니다. 이러한 기술을 OAuth라고 합니다.
이번 글에서 Oauth의 최근 표준인 OAuth2.0이 어떻게 동작하는지 알아보고 Oauth 제공 서비스인 Firebase를 이용해 구글 로그인을 구현해봅시다.
예제코드는 React와 Spring으로 작성하였습니다.
Oauth2.0은 Authorization Server, Resource Server, Resource Owner(User), Client 로 구성됩니다.
Authorization Server
Resource Server
Resource Owner
Client
Oauth2.0 동작방식입니다.
인증 서비스 제공자의 전자 서명이 포함된
일정시간동안 유효한
인증 토큰
입니다.Firebase Authentication은 Google, 이메일, 휴대폰, Facebook, Apple, Github
등의 인증 방식을 쉽게 자신의 서비스에 붙일수 있도록 도와주는 SaaS 서비스입니다.
Firebase Authentication는 앞의 Oauth2의 Authroization Server 역할을 합니다.
(→만약 Firebase에서 제공하는 Database를 이용하면 Resource Server도 제공받을 수 있으나 한계가 있는 서비스라 Firebase Authentication 서비스만 쓰고 Resource Service를 직접 만드는 예제를 진행하겠습니다. )
또한 Client에서 Authorization Server를 통해 인증하는 로직, Resource Server에서 Authorization Server에 접근하는 로직을 제공해주고 있습니다. → 쉽게 Oauth2를 활용한 서비스를 만들수 있다는 것이죠
Firebase를 이용한 전체 로직은 다음과 같습니다.
2-5의 로직과 7-8의 로직은 Firebase 라이브러리에서 제공하고 있습니다.
https://console.firebase.google.com 에 들어가서 새로운 프로젝트를 만들어봅시다.
]
프로젝트 추가 버튼을 누르고 다음을 눌러 프로젝트 생성을 하면 메인페이지로 이동하실 수 있습니다.
메인페이지가 나오고 왼쪽 메뉴에서 위에서 3번째 Authentication을 눌러 Firebase Authentication 서비스를 시작해 봅시다.
시작하기를 누르면 됩니다.
Sign-in Method Tab에서 원하는 인증을 설정해면 해당 인증을 사용할 수 있습니다.
우리는 Google 로그인을 사용해봅시다 (상태를 눌러 사용설정을 누르고 프로젝트 이름과 지원 이메일을 설정하고 저장하면됩니다.)
이제 Google 로그인 사용을 위한 준비를 맞췄습니다.
카우치코딩에서는 6주 포트폴리오 수업을 통해 기획 ~ 배포까지의 과정을 멘토링하고 있습니다. 기획 ~ 배포까지의 과정을 전부 경험하고 싶으면 방문해주세요~
https://github.com/Quickeely/OauthSample 에서 회원가입이 포함된 전체 코드를 확인하실 수 있습니다.
* Firebase로 Google 로그인 구현하기 (Spring 구현)
* Firebase로 Google 로그인 구현하기 (React 구현)