[flutter + firebase auth] 플러터 + 파이어베이스 로그인 연동 <oauth2 인증 프로세스> part-5

안녕하세요 개발하는 남자 개남입니다.

지난 포스팅까지 구글/패북/애플 로그인을 구현하는 것을 모두 알아보았습니다.

이번 포스팅은 번외로 파이어 베이스에서 지원하지 않는 카카오 로그인과 네이버 로그인을 알아보려고 하는데요.

카카오 , 네이버 등 로그인을 구현하기 위해서 oauth2 인증 방식에 대해 한번 정리할 필요가 있어 보인다.

---

사실 파이어 베이스에서 로그인 제공 업체로 등록되어있는 구글, 패북, 애플 등은 손쉽게 구현이 가능하다.

시키는 데로만 설정만 맞춰주면 로그인 기능을 붙일 수 있다. 그래서 사실 어떤 프로세스를 통해서 인증이 되는지 지식이 없어도 구현은 가능하다. 하지만 지원하지 않는 타 업체의 로그인을 구현하기 위해서는 oauth 방식의 프로세스를 알고 있어야 한다. 

 

OAuth2 인증

OAuth 2.0은 다양한 플랫폼 환경에서 권한 부여를 위한 산업 표준 프로토콜입니다

 

다음은 oauth2 방식의 프로세스를 한눈에 볼 수 있는 그림이다.

payco Oauth2.0 프로세스 도식이 가장 깔끔한 것 같아서 첨부했다.

위 이미지를 통해서 파이어 베이스 로그인의 프로세스를 그려보았다.

 

 

단계별 부가 설명을 하자면 

1. 서비스 접근 및 로그인 요청

 - 사용자가 나의 어플에 접근하였고 sns 로그인을 누른 상황이다.

2. 로그인 요청 

 - 사용자가 누른 sns 로그인을 통해 해당하는 인증 제공 서버에 (카카오, 네이버 등,, ) 웹 인증 페이지를 요청한다.

 - 이 단계에서 앱에서는 인증 제공 서버에 필수 요소를 담아 보낸다 그중에 client_id와 redirect_uri를 넣는다.

3. 로그인 페이지 제공, ID/PW 요청 

 - 인증 제공 서버에서 (카카오,네이버 등.) 웹 로그인 페이지를 사용자에게 보여줌으로 로그인을 시도하게 하는 단계

4. ID/PW 입력

 - 이 단계에서 사용자와 인증 제공 서버(카카오, 네이버 등.) 통신이 이루어지는 과정이다. 

5. Authorization Code 발급 

 - 인증제공 서버에서 (카카오,네이버 등.) AccessToken 발급을 위한 인증 코드를 발급해줍니다.

 - 인증코드를 2단계에 등록된 redirect_uri로 발송되며 redirect_uri 역시 인증 제공 서버에 등록되어있어야 허용됩니다.

6. Redirect : Callback URL 

 - 이 단계는 redirect_url에서 앱으로 callback 처리를 하면서 Authorization Code를 담아 넘겨줍니다.( 즉 앱으로 받게 됩니다 )

7. Access Token 요청 

 - Authorization Code 를 받은 앱은 다시 인증 제공 서버에(카카오, 네이버 등) token 발급 요청을 합니다.

8. Access Token 발급

 - 인증 제공 서버에서 (카카오, 네이버 등.) AccessToken을 받을 수 있다.

 

여기까지가 기본 프로세스이며 어플은 사용자의 발급된 Access Token으로 사용자의 요청들을 해결해줍니다.

문제는 우리는 Firebase 서비스와 연동을 해줘야 하기 때문에 별도의 Firebase로 회원을 저장하는 프로세스를 만들어 줘야 한다.

 

9. Access Token 전달

 - api 서버나 내부적으로 앱과 연동되는 서버에 Access Token을 전달한다.

10. Access Token으로 사용자가 맞는지 확인

 - 전달받은 Access Token이 정상적인지 확인 하기 위해 서비스(로그인 제공한 서비스)로 확인을 한다.

11.  사용자 정보 return 

12. createUser 사용자 생성

 - Firebase Admin으로 몇 가지 저장해야 할 사항들을 추가하여 Firebase에 사용자를 등록합니다.

 - 최초는 createUser이며 이후로는 updateUser로 처리한다.

13. 생성 결과 return 

14. custom token 발급 요청 

 - Firebase에서 생성된 혹은 관리되고 있는 user에 uid를 통해 Custom Token을 발급 요청한다.

15. cutom token 발급

16. cutom token 전달

 - Firebase로부터 발급된 custom token을 클라이언트 (앱)으로 전달한다.

17. CustomToken으로 로그인 처리 

 - 전달받은 Custom Token으로 파이어 베이스에 로그인 처리를 요청한다.

 

sns 로그인 버튼 한 번의 클릭으로 편리하고 손쉽게 기능을 제공하는 것이 위의 과정처럼 많은 일들이 일어나며 위 과정을 잘 알지 못하는 상태에서는 많은 삽질과 또는 잘못된 로그인 처리로 인해 보안에 이슈가 생길 수 있다. 

위의 과정을 파이어 베이스에서 기본적으로 지원하고 있는 구글/페북/애플 등등 은 알아서 처리해주니 다행이지만...

이제 카카오톡 로그인과 네이버 로그인을 위해 위 과정을 한번 구현해 보도록 하자.