-
[Firebase] firebase의 google-login과 flutter web 연동방법 및 에러정리 ( idpiframe_initialization_failed / CONFIGURATION_NOT_FOUND/ 구글로그인이 안될 경우)데이터베이스/Firebase 2021. 2. 6. 21:22반응형
firebase의 google-login과 flutter web을 연동하는 방법
1) firebase 웹 앱 프로젝트 생성
- Firebase SDK 추가
안드로이드 앱에서는 google-service.json 파일을 넣는데
web에서는 아래의 코드를 프로젝트의 web - index.html의 <body> 태그 하단에 붙여넣는다.
-firebase CLI 설치
android studio terminal에서 자동설치 스크립트를 이용해 Firebase CLI를 설치했다.
curl -sL https://firebase.tools | bash
- Firebase SDK 추가
나는 당장 배포할 생각은 없었기 때문에 CLI 설치 후에 구글에 로그인하고 프로젝트 시작하는 것만 했다.
2) firebase와 flutter 웹 연동
- google_sign_in package를 추가한다.
... dependencies: ... google_sign_in: ^4.1.0 ... ...- web - index.html에 google- login에 관한 코드를 추가한다.
YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID는
firebase - Authentication- sign-in method - google에서 웹 SDK 구성의 웹 클라이언트 ID에서 찾을 수 있다.
<meta name="google-signin-client_id" content="YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com"> - google login에 대한 코드 추가를 한다.
class LoginScreen extends StatelessWidget { @override GoogleSignIn _googleSignIn = GoogleSignIn( scopes: [ 'email', ], ); Widget build(BuildContext context) { return Container( child: TextButton( child: Text("Google Login"), onPressed: () { _handleSignIn().then((data) { MyFluroRouter.router.navigateTo(context, '/login'); }); }, ), ); } Future<String> _handleSignIn() async { try { UserCredential userCredential; //구글 로그인 final GoogleSignInAccount googleUser = await _googleSignIn.signIn(); //Firebase Authentication에 사용자 정보추가 final GoogleSignInAuthentication googleAuth = await googleUser.authentication; final GoogleAuthCredential googleAuthCredential = GoogleAuthProvider.credential( accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, ); userCredential = await _auth.signInWithCredential(googleAuthCredential); final user = userCredential.user; //firestore에 유저정보 추가 final FirebaseFirestore User = FirebaseFirestore.instance; User.collection('User') .doc(user.uid) .set({'email': user.email}); return 'success'; } catch (error) { print(error); } } }
에러 정리
▶ idpiframe_initialization_failed 에러 해결
PlatformException(idpiframe_initialization_failed,
Not a valid origin for the client: http://localhost:58316 has not been whitelisted for client ID
YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com.[원인]
공식 문서에서 idpiframe_initialization_failed 에러는
Google에서 필요한 iframe을 초기화하지 못했기 때문에 생기는 에러라고 했다.
(예를 들어 지원되지 않는 환경 때문에)
[해결방법]
1) 구글 크롬 캐시 기록을 삭제하기
설정 - 개인정보 및 보안 - 인터넷 사용기록 삭제
2) 구글 크롬 캐시 차단 풀기
설정 - 개인정보 및 보안 - 쿠키 및 기타 사이트 데이터 - 차단된 쿠키기록 허용
3) Google API 콘솔 내 google service로 부터 자동으로 생성된 web client에서
승인된 포트로 브라우저를 요청한다.
나같은 경우는 기존에 안드로이드 스튜디오에 설정되어있던 구글 크롬의 포트가 승인되어있지 않아서
생긴 오류였다. 5000 포트에 맞게 추가를 한 후
5000 포트에 맞게 추가를 한 후 아래의 명령어로 웹을 빌드하니 에러가 사라졌다.
flutter run -d chrome --web-hostname localhost --web-port 5000
** 안드로이드 스튜디오에서 web을 실행할 때 port 5000으로 구체화하는 방법은 아래와 같다.
▶ CONFIGURATION_NOT_FOUND 에러 해결
[firebase_auth/internal-error] {"error":{"code":400,"message":"CONFIGURATION_NOT_FOUND","errors":[{"message":"CONFIGURATION_NOT_FOUND","domain":"global","reason":"invalid"}]}}
[해결방법]
1) index.html 내의 firebase configuration 정보와
Firebase SDK의 firebase configuration이 같은지 확인한다.
나같은 경우는 자동 Firebase SDK snippet을 사용하여 SDK에 대한 정보를 자동으로 생성하도록 했었는데
기존에 설정되어 있었던 firebase configuration 정보와
내가 새롭게 생성한 firebase configuration 프로젝트의 정보가 달라서 생긴 문제였다.
그래서 나는 firebase 프로젝트 설정 - Firebase SDK snippet- CDN에 있는 코드를 이용해
수정해서 문제를 해결했다.
<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: ... authDomain: ... projectId: ... storageBucket: ... messagingSenderId:... appId: ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script>2) 구글 로그인 사용설정이 되어 있는지 확인한다.
▶ 주의할 것
firebase 프로젝트 설정의 하단부에 (안드로이드 앱에서 google-service.json 다운 받던 곳)
세 가지 항목 중 아래와 같은 코드를 추가하라고 되어있다.
예시에는 없다고 해서 아래의 코드를 삭제해서는 안된다.
아래의 코드가 빠지지 않았는지 확인한다.
<!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-storage.js"></script>
출처
stackoverflow.com/questions/58248277/how-to-specify-a-port-number-while-running-flutter-web
반응형'데이터베이스 > Firebase' 카테고리의 다른 글
[Firebase] SHA 1 인증서 지문 등록 방법 (0) 2020.12.24 [Firebase] 파이어베이스 보안규칙 (Firestore Security Rules ) 작성 방법 (3) 2020.01.08