整理一下,用 Flutter 想做 google 帳號登入,但是並沒有要使用 firebase 來做使用者的帳號管理,單純只想實做 google 帳號登入

網路看到很多介紹,但是很多都是過時的資訊,或是不夠完整

自己整理一下筆記,也給也有需要的人做參考

基本上,需要 firebase 的專案,及 gcp console 的設定權限,這裡的例子是以 flutter 的 android 的範例做說明,實際 iOS 的說明,可以參照 firebase 整合登入的文件,以下步驟,沒有需要按照順序

步驟1

建立 Flutter 專案,目前新版的 flutter 工作,新建立的專案,預設會採用 支援 androidx 的方式建立專案,但是後續要在 firebase console 中設定對應的 package name 時,要對應 app 的 package name ,所以這裡用 com.yoursite 當例子

flutter create –org com.yoursite gaccount

接著,設定安裝 flutter 需求套件

firebase_auth 及 google_sign_in

請於 Flutter 專案下的 pubspec.yaml 檔案裡,新增到 dependencies: 區段下,用命令列的朋友,用 flutter pub get 指令安裝,用 vscode 的 朋友加入後,會自動安裝

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.15.5+2
  google_sign_in: ^4.1.4
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

步驟2

設定 android 及 ios 的目錄檔案

以 android 做說明 更新 android/build.gradle

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

    dependencies {
        .... 略
        classpath 'com.google.gms:google-services:4.3.3'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

更新 android/app/build.gradle

dependencies {
    .... 略
    implementation 'com.google.firebase:firebase-analytics:17.2.2'
}
apply plugin: 'com.google.gms.google-services'

放置 android/app/google-services.json 的認證檔案,我們下個步驟會取得

步驟 3

設定您的 firebase 專案,點選 Authentication 的 Sign-in method ,裡面有 Google 選項,請啟用

到專案總覽裡的 Settings 一般設定的位置,填寫,必填的公開資訊,新增應用程式,可以選擇平台,套件名稱記得要填對,以這個例子就是

com.yoursit.gaccount

重點來了, SHA 憑證指紋,我們一般會有兩組,一個由是正式 release 的 keystore 得到,一個則是預設安裝 android studio 時, 建立的在家目錄隱藏資料夾中的檔案,我的平台是 Mac 他放在 ~/.android/debug.keystore 可以用指令去取得,如果您有設定不同的 keystore alias 及密碼,請自己組指令,也可以參考 firebase 頁面上的說明,點擊問號的圖示,有文件連結可以參考

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

這裡設定好了後,可以下載,google-services.json 檔案,放在上一步驟說明的位置

步驟 4

設定 gcp console 服務說明資訊 https://console.developers.google.com/apis/credentials/consent

必須對應您的 firebas 專案,提供服務的聯絡 email 及授權的網域,這裡要加上您,firebase 對應的專案主機,一般 會自動加好,到這裡,設定的部分,結束了 像我們只有用認證 google 帳號的登入方式,帳號資訊要另外存 自己後端資料庫的方式,記得也準備一把,給後端 server 用的 API key ,可以用來驗證, google 帳號的 token 正確性, 完整的串完整個流程喔

步驟 5

終於開始寫程式了,Flutter 的部分,大概是這樣,下面範例 (直接貼不會動,我還有自己狀態管理,存 token 的程式), 就是點擊 google 帳號登入後要做的事情,基本上就是拿到 accessToken 後,就丟給後端去驗證 accessToken 的正確性,後端驗證沒問題後,就可以直接用 google 的 api 去抓取 登入使用者的個人資訊了,這裡處理完帳號後,就是自己後端發自己的 token

// 前面不要忘了 import 需要的 library
... 略
import "package:http/http.dart" as http;
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

// 這個是自己後端要驗證 token 的網址
var _callBackUrl = API_BASE + "/auth/google?access_token=";

// 要求的 google token scope 
GoogleSignIn _googleSignIn = GoogleSignIn(
  scopes: <String>[
    'email',
    'profile',
  ],
);
    
 // 這段是在 login widget 裡面,點擊 google 登入按鈕後做的事情
  Future _handleSignIn() async {
    try {
      GoogleSignInAccount _currentUser = await _googleSignIn.signIn();
      GoogleSignInAuthentication gSA = await _currentUser.authentication;

      var getURL = _callBackUrl + gSA.accessToken;
      final http.Response response = await http.get(getURL);

      if (response.statusCode != 200) {
        print('People API ${response.statusCode} response: ${response.body}');
      }

      final Map<String, dynamic> data = json.decode(response.body);
      final String token = data['token'];
      print('Token: ' + token);
      state.setToken(token);
      Navigator.of(_scaffoldKey.currentContext)
          .pushReplacementNamed(HomeScreen.routeName);
    } catch (error) {
      print('ERROR: ${error}');
      _scaffoldKey.currentState.showSnackBar(SnackBar(
        content: Text("登入失敗,請檢查您的網路連線" ?? '您尚未登入 !!!'),
      ));
    }

  }

所需要的函式庫

https://pub.dev/packages/firebase_auth

https://pub.dev/packages/google_sign_in

參考資料

https://blog.codemagic.io/firebase-authentication-google-sign-in-using-flutter/