플러터에 firebase 연결해서 구글 크롬으로 띄우기(구글 authentication)

firebase의 구글 authentication에 들어가면 로그인 방법이 이렇게 뜬다

여기서 연필 모양을 누르면 웹 SDK 구성이 있는데 그걸 또 누르면 웹 클라이언트 ID가 있다.
그것을 자신의 플러터 프로젝트의 web 폴더로 들어가서 index.html의 head태그 안에 다음과 같이 붙여넣으면 된다.

  <meta name="google-signin-client_id" content="자신의 클라이언트 ID.apps.googleusercontent.com">
그 후 main.dart는 다음과 같이 작성해주자.

아래는 파이어베이스를 초기화해주는 작업이다.

import 'package:flutter/material.dart';

import 'app.dart';

import 'package:firebase_core/firebase_core.dart';

import 'firebase_options.dart';

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(

    options: DefaultFirebaseOptions.currentPlatform,

  );

  runApp(MyApp());

}

 

또 중요한게 있는데 구글 클라우드에서 자신의 프로젝트를 연결하고 API 라이브러리에 가서

이 API를 활성화시킨 후 

다시 구글 클라우드의 다음을 들어간다

OAuth 2.0 클라이언트 ID의 웹 어플리케이션 유형에 들어가면 

승인된 자바스크립트 원본, 승인된 리디렉션 URI에 자신의 port 번호가 담긴 localhost를 넣으면 된다.

만약 localhost 주소가 막 바뀌면 port 번호를 8080을 승인, 원본 쪽에 링크를 추가해놓고

flutter run -d chrome --web-port=8080

이거로 플러터 프로젝트를 실행시키면 된다.

그러면 로그인된다.