firebase login Sign-in method, web ui 설정, google 로그인 제공 업체 추가

Firebase Login Ui 설정

Firebase Sign-in 화면

 

https://devkimchi.tistory.com/71

firebase google login spring webflux 적용기

우여곡절 끝에 spring webflux thymeleaf front 페이지에 javascript CDN을 이용하여 로그인 버튼과 로그인 페이지로 가도록 연결을 해 놓았다. 결과는 아래와 같았다.

Firebase: The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section. (auth/operation-not-allowed).

지정된 공급자가 비활성화되어 있다는 말인데 콘솔에 가서 권한 섹션에 가서 옵션을 수정하라는 거다.

firebase가 google에서 만들었기에 구글도 공급자인 줄 알았더니 이메일/비밀번호 옵션은 따로 있었다. 일단은 기본적인 걸로 하고 테스트해볼 생각이다.

 

firebase sign-in에서 제공하는 로그인 제공업체

뷰페이지에서 

signInOptions

firebase.auth.EmailAuthProvider.PROVIDER_ID,

이 부분만 체크하고 다시 돌려 보았다.

이메일 로그인 화면

바로 이메일로 로그인하는 화면이 나온다.

생각해 보니 이메일로 가입한적도 없고 아이디 비번을 저장하는 어떠한 방법을 만들어 놓지 않은 거 같은데 다시 로그인 제공업체 선택에서 구글을 선택해 본다.

 

제공업체 구성 화면

구글을 선택하니 사용 설정이 나오는데 플러터로 간단한 앱을 만들때는 저런 설정을 안 하고 이메일로 가입하고 로그인하고 가 잘 나왔던 거 같은데 웹으로 하니 설정을 하게 된다.

 

firebase를 이용한 email 가입화면

생각해 보니 예전에 플러터로 파이어베이스 ui를 이용해 만들어 놨던게 있었다 까먹고 있었네 이때도 구글을 이용한 건 아니구나 파이어베이스를 이용해 이메일 로그인을 구성해 놨던 거다 요번엔 구글로 한번 해보겠다. 근데 스프링에 jwt를 적용할 때 email로직과 구글이용하는 것에 대해 설정 값들이 다를지 궁금하다.

 

전에 만들었던 플러터 화면에서 이메일을 등록 후 웹페이지에서 로그인을 하니 잘 작동하고 

success 페이지

var uiConfig = {
    signInSuccessUrl: '/signin/success',

uiConfig 에서 등록한 성공 url로 리 디렉트 된다. 이메일 로그인이 잘 되는 걸 확인해 봤으니 구글 provider를 등록하면 화면이 어떻게 되는지 확인해 보겠다.

제공 업체 구성 2단계

한글이지만 무슨 의미인지 모르겠다. 연결된 애플이나 웹 앱에서는 별도 설정이 필요 없다는 말 같고 안드로이드엔 디지털 지문을 추가 해야 한다는 거 같은데 안드로이드도 안 해봤으니 저기서도 시행착오가 많을 듯 플러터에서 작업도 해줘야 하는 건가? 

안드로이드쪽에 구글설정

안드로이드 쪽에선 구글 설정(지문) 추가해줘야 한다는 내용인 듯.

클라이언트 ID 허용 목록

GCP 쪽에서 쓰던걸 그대로 쓸 수 있다는 거 같은데 정확히는 모르겠다.

일단 저장해 본다.

구성 파일 다운로드

저장하고 나면 안내 메시지가 뜬다 안드로이드는 새 구성 파일을 다운로드하여 적용하란다. 모 다 만들어 놓은 기능을 사용하는 거지만 은근 손이 많이 가고 연결된 게 많다 보니 모르는 내용도 허다하다.

uiConfig

로그인 버튼 추가

uiConfig에서 googleAuthProvider를 추가해 주고 화면으로 돌아오면 구글 버튼이 생긴다. 성공

계정 선택 화면

구글 로그인 버튼을 누르면 내가 로그인했던 계정들을 사용 가능하게 해 준다. 

Authentication 화면

사진 속에 2번째 메일과 3번째 메일은 같은 이메일 주소인데 하나는 제공업체가 추가돼서 나온다.

이제는 로그인 후 어떤 값들을 던져 주는지 그걸 가지고 jwt를 어떻게 운영하고 디비에 권한을 설정해서 적용하는지 등등을 배워서 써먹어 보려 한다.

 

일단은 스프링 백엔드에서 jwt로 로그인이나 권한 처리를 어떻게 하는지 알아야 하기에 시험해 보고 구글을 provider로 해서 진행해 보겠다.