Flutter + Firebase를 이용한 Google, Kakao #00

이 포스팅은 Google, Kakao, Apple의 소셜 로그인을 구현하고 정리한 내용을 바탕으로 소셜 로그인 각각의 프로세스를 정리한다.

나는 어떤 기술을 구현 하려고 할 때 우선 디테일한 소스코드 보다는 큰 개념먼저 찾아간다. 개발 초장기 아무것도 모를 때, 단순히 검색해서 복붙을 하는 개발을 했던적이 있는데, 이렇게 하면 해당 기술을 응용하기 어렵고 기억도 오래가지 않는다. 심지어 오작동 하는 경우나 예외도 많이 발생한다. 

 

그래서 오늘은 우리가 구현 하려고 하는 Firebase 로그인에 대해서 정리하고 우리가 사용하려는 Google,Kakao,Apple의 경우 각각 어떤 방식으로 구현해야 되는지 알아보는 시간이다.

사실 Firebase + Google / Firebase + Apple 같은 경우 Firebase에서 공식 지원해주고 있기 때문에 검색하면 구현 하는데 큰 어려움 없이 만들었을 거라고 생각한다.  하지만 Firebase에서 지원하지 않는 OAuth2.0서비스를 이용하려고 한다면... 생각보다 어렵게 다가올 것 이다. 

 

혹시라도 나와같은 상황, 나와같은 고민을 하는사람중 단 한명에게라도 도움이 된다면 너무 좋을 것 같다. 

시작 ㄱㄱ 

 

 

Index 

• Firebase Auth ? 
• FirebaseUI Auth / Firebase SDK Authenticationd 구분
• Google OAuth2.0 프로세스
• Kakao OAuth2.0 프로세스

 

 

Firebase Auth 란? 

1. Firebase : 2014년 구을에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼이다.    출처 - 위키백과
2. Firebase Authentication : OAuth2.0 및 OpenId Connect등의 업계 표준을 활용하여 인증 방식을 통합, 제공하는 방법으로 앱 개발시 사용자인증 및 로그인을 간편하게 구현 할 수 있다.

 

 

FirebaseUI Auth / Firebase SDK Authentication 구분

(Firebase Auth 에는 크게 두가지의 인증 방법을 제공)

1. FirebaseUI Auth  (iOS/Android/Web) : FirebaseUI는 이메일 주소와 비밀번호, 전화번호는 물론 Google 로그인 및 Facebook 로그인을 비롯한 인기 ID 제공업체를 이용한 사용자 로그인의 UI 흐름을 처리하는 삽입형 인증 솔루션을 제공한다.
2. Firebase SDK Authentication (iOS/Android/Web/C++/Unity) : 제휴 ID 공급업체와 통합하여 사용자를 인증. Firebase 인증 SDK는 사용자들이 Google, Facebook, Twitter, GitHub 계정으로 로그인할 수 있는 수단을 제공한다.

우리는 통합 사용자 인증을 사용 하므로 Firebase SDK Authentication 방법을 사용한다. 또한 Firebase 에서 제공해주는 제휴업체와 비 제휴업체는 구현 방법이 확연히 다르다. 아래 두가지 방법의 차이를 간단히 확인해 본다.

 

Google, Apple 로그인 : 자체 Backend Server 불 필요, Firebase 서버에서 자체적으로 구현하므로 구현하기가 쉽다.

Kakao : 자체 Backend Server 필요, Firebase Admin SDK를 사용해서 Kakao OAuth2.0은 알아서 개발해야된다. 여기서 Backend Server는 Spring boot를 사용한다. ( 본인이 가장 능숙한 언어로 개발가능.  본 포스팅은 Spring boot 로 구현한다. )

 

Google OAuth2.0 프로세스

Client (Flutter Framework) / Google / Firebase 

아래 구글 로그인 프로세스 이미지는 간단하게 표현하기 위해 Google과 Firebase 서버 종류와 개수에 상관없이 각 타겟을 하나로 잡았다.  

이 프로세스에서 포인트는 Firebase가 내부적으로 Google인증 관련 서버들과 로그인 과정을 처리해 주고 있다는 것이다. 이게 가능한 이유는 Firebase에서  Google 로그인을 지원해 주기 때문에 우리는 간편하게 사용할 수 있다.

Firebase + Google login 프로세스

1. Client : 사용자 구글 로그인 요청 

2. Google : 로그인 화면 제공

3. Client : ID/PW 입력 

4. Google : GoogleSignInAuthentication (accessToken, idToken 포함) 객체 전달

5. Client : Google의 accessToken, idToken 으로 Firebase OAuthCredential  요청

6. Firebase 와 Google 간 내부 로직수행. 우리는 알 필요 없음

7. Firebase : OAuthCredential 전달

8. Client : OAuthCredential 을 Parameter로 Firebase 로그인 요청

9. Firebase : 로그인 완료

 

Kakao OAuth2.0 프로세스

Client (Flutter Framework) / API Server (Spring boot) / Kakao / Firebase 

아래 카카오 로그인 이미지는 간단하게 표현하기 위해 Kakao와 Firebase 서버 종류와 개수에 상관없이 각 타겟을 하나로 잡았다.  

 

1. Kakao OAuth2.0 자체구현 ( 여기까지는 Firebase 와 연관없음 )

2. Kakao로그인 성공 후 사용자 정보를 기반으로 Firebase에 생성한다.

3. 생성된 사용자 정보 기반으로 CustomToken발급 후 Client로 돌려주면 Client에서 CustomToken을 기반으로 로그인진행

Firebase + Kakao login 프로세스

****  Flutter / Spring boot / Kakao 로그인 진행 ( 10번 까지 진행하는 동안 Firebase는 전혀 상관이 없음 ) ****

1. Client : 사용자 카카오 로그인 요청 

2. Kakao : 로그인 페이지 제공 ( Rest API사용, 웹 페이지로 제공 )

3. Client : ID/PW 입력, 로그인 진행

4. Kakao : 비밀번호 페스워드 확인 및 Authorization Code 발급 (로그인 정보가 다르면 발급안됨.)

5. Client : 사전에 Kakao에 등륵해 놓은 Redirect Uri 로 Callback ~ ( 내부에 Authorization Code 포함 )

6. API Server : Authorization Code Parameter로 전달 및 AccessToken 발급 요청

7. Kakao : Authorization Code 확인 및 AccessToken 발급

8. API Server : AccessToken Code  Parameter로 전달 및 Kakao User 정보 요청

9. Kakao : AccessToken 확인 및 카카오 유저정보 응답

10. API Server : Kakao User 정보를 기반으로 Firebase에 User생성을 요청

 

 

****  Firebase 사용자 생성 및 로그인 프로세스 진행 ****

11. Firebase : Firebase User 생성 및 Firebase 유저정보 응답

12. API Server : Firebase User정보 기반 CustomToken 요청 

13. Firebase : Firebase 유저정보 확인 및 CustomToken 발급

14. API Server : 전달받은 CustomToken을 Client로 전달 ( 이 때 웹에서 안드로이드를 호출해야 되기 때문에 Uri Scheme 설정을 통한 Redirect응답을 해야된다.)

15. Client : 전달받은 CustomToken parameter로 로그인 요청 

16. Firebase : CustomToken 확인 및 로그인 완료

 

 

 

 

Flutter + Firebase 인증 + 외 Firebase에서 지원하지 않는 OAuth2.0의 구현이 조금 어려웠고, 가장 어려웠던 점은 

API서버를 Spring boot로 만들었는데,   자바 코드로는 Firebase Admin SDK 연결에 관한 레퍼런스가 거의 없어서 결국에는 공식문서를 참고해서 진행했다. ( 공식 문서가 한글을 지원함. 나이스 ! )

 

혹시라도 잘못된 정보나 궁금한점 있으시면 댓글 남겨주세요! 감사합니다.