近期因為要寫個小服務，需要另開一個產品線，不過以往都是直接依照官網的加上到處亂找的教學，有時就會忘記到底少做什麼步驟，這次藉由這個機會來開始寫這篇文章。

firebase_auth: ^0.15.3

在開始之前我們先確認一下我們當前的環境，Flutter的世界變換很快，有可能你看到這篇文章時已經過時了，不過大多都只是小更新一下。

Name Version
Flutter Version v1.14.6
Firebase Auth v0.15.3

初始化

首先我們要先確定這個 App 的套件名稱，這部分主要是在未來上架或是針對 Firebase 綁定都需要使用到，通常預設會是com.example.projectname，我們可以先把他修改成我們需要的名稱：

Android 部分，[project]/android/app/build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
android {

  ...

  defaultConfig {

    applicationId "com.example.projectname" // <= 修改成你想要的

    ...

  }
}

接著進入[project]/android/app/src/底下的AndroidManifest.xml，分別是在debug/、main、profile底下的資料：

1
2
3
4
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.projectname"> // <= 修改成你想要的

    ...

除此之外也要針對裡面的資料夾做重新命名：

1
2
3
4
5
// 原本
android\app\src\main\java\com\example\name

// 修改
android\app\src\main\java\your\package\name

而 IOS 部分可以打開[project]/ios/Runner/Info.plist修改下方的名稱：

1
2
<key>CFBundleIdentifier</key>
<string>com.example.projectname</string>

除此之外也可以開啟[project]/ios/Runner.xcodeproj，打開後修改 Bundle Identifier 如下圖，兩者擇一即可。

如此一來未來我們就能在 Firebase 後台進行綁定，接著我們打開pubspec.yaml加入套件：

1
2
3
4
dependencies:
  firebase_auth: ^0.15.3

  ...

針對 Android 部分，開啟檔案寫入路徑[project]/android/build.gradle：

1
2
3
4
5
6
dependencies {
  // Example existing classpath
  classpath 'com.android.tools.build:gradle:3.2.1'
  // Add the google services classpath
  classpath 'com.google.gms:google-services:4.3.0'
}

同樣的內部設定也一併加入[project]/android/app/build.gradle：

1
2
// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

接著我們啟動 Flutter 會收到一些錯誤訊息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  /Users/davidkross/Project/Hadigot/hadigot-v1-flutter/hadigot/android/app/src/debug/google-services.json
  /Users/davidkross/Project/Hadigot/hadigot-v1-flutter/hadigot/android/app/src/nullnullDebug/google-services.json
  /Users/davidkross/Project/Hadigot/hadigot-v1-flutter/hadigot/android/app/src/nullnull/debug/google-services.json
  /Users/davidkross/Project/Hadigot/hadigot-v1-flutter/hadigot/android/app/src/debug/nullnull/google-services.json
  /Users/davidkross/Project/Hadigot/hadigot-v1-flutter/hadigot/android/app/google-services.json

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 21s
Gradle task assembleDebug failed with exit code 1
Exited (sigterm)

Firebase

Android

此時我們需要開啟Firebase Console建立一個新的專案，建立後就會進入後台，透過上方的新增應用程式，同時他會需要選擇使用的平台，首先我們選擇 Android，來新增我們需要的設定檔。

接著會彈出視窗要你填寫一些資訊，其中必要的是套件名稱，這部分就要看上方com.example.projectname的設定：

接著就是創建一組憑證，這組憑證主要為了驗證是否為自己使用，首先我們透過指令去建立，這裡我們先以hadigot_dev來命名，這部分可以依照各自的專案名稱建立，除此之外我在根目錄下建立有關key/hadigot_dev/資料夾方便我管理憑證：

1
keytool -genkey -v -keystore ~/key/hadigot_dev/hadigot_dev.jks -keyalg RSA -keysize 2048 -validity 10000 -alias hadigot_dev

接著他就會在~/key/hadigot_dev建立一組jks的檔案，過程中他會要你輸入一些資訊，除了密碼之外(這需要記住未來會使用)，還有一些憑證資訊等。

接著我們再針對蜜要去轉換成.p12檔案：

1
keytool -importkeystore -srckeystore ~/key/hadigot_dev/hadigot_dev.jks -destkeystore /Users/davidkross/key/hadigot_dev/hadigot_dev.p12 -srcstoretype JKS -deststoretype PKCS12

正確輸入keystore密碼後就會產生.p12的檔案接著我們再透過轉換擷取 SHA-1 的密鑰，如此一來就能應用到專案上了，除了dev外我其實還會多做一組，這組是用來除錯用，另一組是用來未來發布上架用，方式我們可以依照上方教學重複製作一次！

1
keytool -list -v -alias hadigot_dev -keystore ~/key/hadigot_dev/hadigot_dev.p12

另外如果不小心按下一步也沒關係，未來回到主控台可以透過新增指紋部分來建立 SHA 憑證。

接著我們可以打開[project]/android/資料夾，新增一個key.properties檔案，並且寫入設定

1
2
3
4
5
6
7
8
9
storePassword=password
keyPassword=password
keyAlias=hadigot
storeFile=/Users/davidkross/key/hadigot/hadigot.jks

storePasswordDebug=password
keyPasswordDebug=password
keyAliasDebug=hadigot_dev
storeFileDebug=/Users/davidkross/key/hadigot_dev/hadigot_dev.jks

下一步我們打開[project]/android/app/build.gradle來寫入設定：

1
2
3
4
5
6
7
8
9
10
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

// 這裡加入讀取檔案
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

接著我們再往下尋找defaultConfig，並且把驗證加入進去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
defaultConfig {
  ...
}

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
    debug {
        keyAlias keystoreProperties['keyAliasDebug']
        keyPassword keystoreProperties['keyPasswordDebug']
        storeFile file(keystoreProperties['storeFileDebug'])
        storePassword keystoreProperties['storePasswordDebug']
    }
}

如此一來設定就完成了，我們再回到 Firebase Console 繼續設定。

下一步會要你下載設定檔案，透過 Android Studio 放入到[project]/android/app底下，

完成後，他會要你加入命令到專案內，這部分我們剛剛已經做完，接著下一步，他會去驗證是否安裝成功，僅接著我們透過 VSCode 進行 Debug 預覽，試試看能不能跑起來，成功跑起來後就會看到Ｆ irebase 接受到正確資訊。

如果發生錯誤，或是一直停留在安裝上，可以嘗試透過flutter run -v來查看錯誤問題，如果發現以下問題可能是在修改過程中沒有成功：

1
Error: Activity class {com.piewalker.hadigot/com.piewalker.hadigot.MainActivity} does not exist.

此時可以到以下資料夾[project]/android/app/src/main/kotlin/，此時後面就是代表你設定的套件名稱，記得把它改過來就好，接著透過flutter clean與刪除[project]/build資料夾後重起即可。

Ios

接著我們繼續新增iOS的部分，同樣的也是寫入套件與應用程式名稱，不過不一樣的是他這邊需要寫的是 Apple Store ID，此部分可以在 AppStoreConnect 來進行註冊，這裡也可以先略過，未來上架時再做操作也可。

接著我們一樣也是下載GoogleService-Info.plist檔案，此時需要打開[project]/ios/Runner.xcodeproj程式，接著把檔案丟進去指定位置即可：

接著我們打開[project]/ios/Podfile，並且把最上層的platform :ios, '9.0'註解拿掉，接著再透過終端機來使用pod install進行安裝，如此一來我們就完成設定了。

1
2
3
4
5
cd ios
// 刪除舊有套件
pod deintegrate
// 重新安裝
pod install

接著我們打開[project]/ios/Runner/AppDelegate.swift並且加入 Firebase 的設定：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import UIKit
import Flutter
// 加入Firebase套件
import Firebase


@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    // 初始化
    FirebaseApp.configure()

    GeneratedPluginRegistrant.register(with: self)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

除此之外記得透過 xCode 開啟File > Project Settings，把 Build System 的New Build System(Default)改成Legacy Build System這樣才能正常運行。

不過記得在設定 App Store 之前，iOS 只能透過模擬器來進行測試，如果要實機測試，必須要先把上面的 Apple ID 寫入，並且創建一個套件與簽證才可以使用。

以上，這次就到這，各位下次見！