[flutter] 한번에 플러터 앱 만들기 #1 - 파이어베이스 & 구글 로그인

안녕하세요. 본 시리즈는 플러터로 한 번에 앱 만드는 과정에 대한 글입니다.
파이어베이스, GCP를 통해서 어떻게 앱을 등록하고 구글 로그인을 구현하는지에 초점을 두었습니다.
천천히 따라 해 보시면 쉽게 앱을 만들 수 있도록 했습니다. 문의사항은 댓글을 남겨주세요

 

• 파이어베이스 ui 로그인 공식 패키지: firebase_ui_auth.git

 

1. 파이어베이스 콘솔 설정 및 플러터 앱 추가

1. 파이어베이스 콘솔에서 새 앱을 만들어줍니다 [파이어베이스 콘솔 console.firebase.google.com]

 

구글 아날리틱스 계정이 존재하고 연결이 필요하다면 연결하여줍니다. (나중에 따로 추가도 물론 가능합니다)

2. 파이어베이스 콘솔에서 플러터 앱을 추가합니다.

 

위 설명에서 권유하는 대로 firebase-tools를 설치하여 주고, 디렉터리를 dart 명령어를 통해 설정하여줍니다.
android, ios, macos, web 중에서 사용할 것들에 대해서 체크하면 됩니다.

 

dart pub global activate flutterfire_cli
flutterfire configure --project=[프로젝트-ID]

flutterfire 명령어를 통해 firebase_options.dart 가 생성되고 파이어베이스 설정을 flutter로 바로 가져올수 있다.

import 'firebase_options.dart';

main() async {
    try{
        await Firebase.initializeApp(
          options: DefaultFirebaseOptions.currentPlatform,
        );
    } catch (e, stacktrace) {
        // FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterError;
        // FirebaseCrashlytics.instance.recordError(e, stacktrace);
    }
    runApp(App());
}

 

짜잔! 이제 앱이 파이어베이스와 연동되도록 관련 설정이 적힌 파일이 생성되었습니다!
이제는 별도 설정 없이 위처럼 앱 메인 시작 후 Firebase.initializeApp()을 실행하여주면 파이어 베이스 정보를 가져옵니다.
(tip: 혹시 연동이 안된다면 위처럼 try코드를 써주어서 에러 추적을 하여주세요.)

 

21년도만 하더라도 개발자가 일일이 설정해주어야 했는데 명령어 한 번으로 되네요. 정말 발전이 빠릅니다.

 

---

2. 구글  콘솔 OAuth 설정

이제는 파이어베이스에서 나올 때입니다. 구글 콘솔로 이동하여주세요.  [Google Cloud console(console.cloud.google.com)]

1. 좌측 상단에서 파이어베이스에서 프로젝트를 만들 때 사용한 프로젝트를 선택하여주세요.
2. [메뉴] - [API 및 서비스] - [사용자 인증 정보] 메뉴에서 위 파이어베이스로 만든 관련 API 키들을 확인하실 수 있습니다.

 

플랫폼 Key (auto created by Firebase) : 위 1번에서 파이어베이스로 설정한 내용들이 자동으로 입력된 것입니다.
API 키는 구글 API를 사용할 때 할당량 등을 정하도록 연결하는 키입니다.
OAuth 2.0 클라이언트 ID는 구글 로그인에서 우리의 서비스를 검증할 필요한 ID입니다.
서비스 계정은 사용자 계정을 뜻하는 것이 아니고 서비스 등에서 구글 클라우드에 연결할 때 필요한 계정입니다만 현재는 넘어가겠습니다. 
자세한 설명(영어)

 

3. [메뉴] - [API 및 서비스] - [OAuth 동의 화면]에서는 구글 OAuth 로그인을 구현하실 수 있습니다. 종종 구글 소셜 로그인을 하실 때, 아래와 같은 팝업창을 확인하실 수 있는데요. 그 설정을 여기서 하는 것입니다.

Google OAuth 로그인화면, 개인정보처리 방침 및 서비스 약관 링크를 확인할 수 있다.

 

앱 도메인에는 기본적으로 파이어베이스 본 프로젝트의 주소가 기입되어 있을 것입니다.  [파이어베이스 프로젝트].firebaseapp.com 그리고 웹 도메인, 개인정보처리방침, 서비스 방침의 사이트 주소를 넣어주시면 됩니다.

 

이때 특정 API를 사용할 때 할당량 증가 요청을 할 수가 있는데요. 저 같은 경우 유튜브 Data API 증가를 요청할 때 개인정보처리 방침 및 서비스 약관에 대해서 영어로 자세한 사항을 요구하였습니다. 이런 지침들은 언제나 꼼꼼히 확인해 주어야 합니다. 

 

그럼 이제 기본적으로 구글 인증 로그인을 활용할 환경설정이 준비된 것입니다.
다음 편에서는 flutter 코드를 같이 구현해보도록 하겠습니다.

 

 

---

+ 3. Goolge API scope 설정

여기서는 추가적으로 구글 api를 사용하실 때 참고하시면 됩니다.
로그인과는 직접적인 상관이 없으므로 필요하신 분들만 참고하여주세요.

 

플러터 프로젝트 경로에서 아래 명령어를 통해 googleapis 패키지를 설치하여줍니다(https://pub.dev/packages/googleapis).

flutter pub add googleapis

 

googleapis 구경하기: https://developers.google.com/apis-explorer

 

어떤 googleapi를 사용하실지 정하셨다면 아래와 같이 패키지를 import 하여 주시고 GoogleProvide 내 리스트 파라미터인 scopes에 입력하면 됩니다. 본 예는 유튜브 읽기 전용 api를 호출합니다.

 

import 'package:googleapis/youtube/v3.dart';

  FirebaseUIAuth.configureProviders([
    GoogleProvider(
        clientId: GOOGLE_CLIENT_ID,
        scopes: ['email', YouTubeApi.youtubeReadonlyScope]),
  ]);

 

지도를 사용한다면 map, google 구글 캘린더를 사용한다면 Calendar를 넣어주시면 되겠죠?

https://console.cloud.google.com/apis/dashboard?project=[프로젝트 ID] 

 

이렇게 사용한 api들은 위 구글 콘솔에서 실시간(몇 분-몇십 분 뒤)으로 확인 가능합니다. 각 api 별로 하루 할당량, 비용 등등이 정해져 있기 때문에 꾸준한 모니터링이 필요합니다.

 

 

부가 Tip

구글 OAuth를 사용할 때는 구글 개인정보처리 방침을 우리의 개인정보처리 방침에 링크를 넣어주어야 합니다. 아무래도 소셜 로그인이다 보니 유저는 양쪽의 개인정보처리방침에 동의를 해야 하는 듯싶었습니다. (api 인증을 받을 때 이 조항 때문에 한번 수정했었습니다. 구글 측이 요청하더라고요)

 

• 구글 개인정보 보호 및 약관: https://policies.google.com/privacy
• 개인정보 처리 방침 간단히 만들기: https://www.privacy.go.kr/a3sc/per/inf/perInfStep01.do
• 네이버 글로벌 서비스 Privacy Policy 작성 가이드라인 : https://privacy.naver.com/global_support?menu=global_support_privacy_policy
• 공정거래위원회 표준약관: https://ftc.go.kr/www/cop/bbs/selectBoardList.do?key=201&bbsId=BBSMSTR_000000002320&bbsTyCode=BBST01
• 모바일게임 표준약관
• 온라인게임 표준약관
• 전자상거래 표준약관