Flutter와 Firebase로 Android iOS 둘 다 만들기 7 구글&파이어베이스로 사용자 인증하기 2

iOS & Android 시뮬레이터로 구동해봅니다.

개요

이번 편은 코드가 아닌 설정에 대해 다룹니다.

파이어베이스를 다루려면 우선 구글 계정이 필요합니다.

파이어베이스 콘솔 이동

참고: https://firebase.google.com/docs/flutter/setup?hl=ko

파이어베이스 콘솔로 이동합니다.

주의: 아래 설명은 참고입니다. 사이트는 언제 바뀔 지 모르니 근본적인 이해를 하시는 것이 중요합니다.

https://console.firebase.google.com

프로젝트 만들기

프로젝트 이름을 넣어 만듭니다.

추후 이 프로젝트 명이 도메인등 여러 용도로 쓰일 것이니 알아보기 쉬운 것으로 작명하는 것이 좋습니다.

로그인 방법 설정

로그인 방법 설정으로 이동하여 구글 사용 설정과 지원 이메일을 설정하고 다음을 누릅니다.

지원 이메일이 없을 경우 인증시 에러가 날 수 있습니다.

프로젝트 설정

프로젝트 설정 페이지로 이동해서 GCP 리소스 위치를 적당한 곳으로 설정합니다.

GCP 리소스 위치중 현재 경험상 가장 빠른 곳은 도쿄(asia-northeast1) 이었습니다. 서울리젼이 생기기 전까지는 어쩔 수 없이 사용중입니다.

OAuth 설정하기

앱 추가 이전에 구글 인증을 하기 위해서 먼저 OAuth를 다른 세션(탭)에서 설정합니다.

구글 콘솔로 이동: https://console.developers.google.com/apis/credentials

구글 콘솔로 이동해서 해당 프로젝트 선택 후 인증에 필요한 정보들을 기입해야합니다.

다 기입하고 저장을 누르면 됩니다.

개인정보 처리 및 약관등이 담긴 페이지가 필요한 듯한데 그냥 승인된 도메인을 그대로 넣어도 문제는 없었습니다.

실제 서비스할 때 맞는 url로 변경을 하면 됩니다.

iOS

프로젝트 설정 페이지에서 iOS 아이콘을 클릭해서 시작합니다.

번들아이디 입력

번들아이디는 앱 식별자입니다.

Xcode에서 확인 하거나 ios/Runner.xcodeproj/project.pbxproj 파일에서 확인할 수 있습니다.

어짜피 xcode에 파일을 추가해야하니 xcode로 열면 됩니다.

xcode는 vscode 에서 터미널 창에서 커맨드로 여는 것이 편합니다.

xcode open

$ open ios/Runner.xcworkspace

xcode에서 Runner를 선택하고 General 탭에가보면 Bundle Identifier가 있습니다.

적당한 이름으로 변경후 파이어베이스 설정창에 넣고 앱 등록을 누릅니다.

GoogleServices-Info.plist 설치

파일을 다운로드 받고 xcode에서 Runner/Runner 디렉토리에 추가합니다.

이제 xcode 할 일은 끝났으니 종료해도 됩니다.

Info.plist 설정

참고: https://pub.dev/packages/google_sign_in#ios-integration

google_sign_in 패키지에 따르면 plist에 아래 내용을 채워야합니다.

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<!-- TODO Replace this value: -->
			<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>

string 부분을 바꿔야하는데 해당 값은 GoogleService-Info.plist 안에 있습니다.

완성된 Info.plist

사용해보기

플러터를 실행 시키고 로그인을 해보면 구글 인증창에서 파이어베이스 프로젝트명과 같은 지 확인해보면 됩니다.

android

안드로이드 관련 설정 파일은 모두 android 디렉토리 아래 있습니다.

참고: https://pub.dev/packages/firebase_auth#android-integration

google login

안드로이드 시뮬레이터에서 구글 로그인을 해두어야 됩니다.

iOS와는 달리 전방위적으로 구글을 사용하게 되는 시스템이라 그런가 봅니다..(안드로이드를 한번도 안써봐서 잘 모릅니다…)

android/build.gradle

buildscript {
    ext.kotlin_version = '1.3.31'
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.2'
    }
}

dependencies 밑에 classpath ‘com.google.gms:google-services:4.3.2’를 추가합니다.

참고에 따라서 구글 서비스만 추가한 것인데 작동하지 않았습니다.

kotlin, gradle 버전을 올렸더니 동작했습니다..

플러터에서 적정 버전으로 올릴 수 있는 방법이 있을 것 같은데 그냥 우선 수동으로 올렸습니다.
1.2.71 -> 1.3.31 3.2.1 -> 3.3.1 정말 원인 찾기 힘들었습니다…

android/app/build.gradle

android {
    ...

    defaultConfig {      
        applicationId "com.fkkmemi.ff"
        ...
    }

apply plugin: 'com.google.gms.google-services'

applicationId를 원하는 것으로 수정하고, 맨 하단에 구글 서비스만 추가하면 끝납니다.

이것 역시 몇달만에 바뀐 것입니다.. 기존에는 파이어베이스-코어를 추가해야했는데.. 이젠 생략해도 된다고 참고문서에 적혀있네요.. 이렇게 하루하루가 다른 생태계에 사시는.. 모바일 개발자분들 정말 대단하신 것 같습니다.

앱 추가

프로젝트 설정 > 앱 추가를 눌러서 안드로이드를 추가합니다.

네임 작성

패키지 네임을 작성하고 등록합니다.

디지털 지문(SHA-1) 추가

참고: https://developers.google.com/android/guides/client-auth

안드로이드 스튜디오를 설치했다면 기본적으로 아래 명령어로 가져올 수 있습니다.

초기 비밀번호: android

mac

$ keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

window

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

파일 저장

파일을 다운로드 한 후 android/app 디렉토리에 추가하면 됩니다.

그 다음부터는 설명만 있으므로 다음 다음 눌러서 마치면됩니다.

사용해보기

이 과정을 다 했는데도 에러가 나는 경우(sign_in_failed, com.google.android.gms.common.api.ApiException: 10) flutter clean 을 하고 다시 구동시켜보시기 바랍니다.

영상