# Flutter - Firebase 教學
若防火牆有相關限制，可參考[官網](https://firebase.google.com/docs/cloud-messaging/concept-options?hl=zh-tw#messaging-ports-and-your-firewall)將裡面內容設為白名單。
## Firebase 安裝教學
### 建立屬於自己的firebase
是圖形介面應該很容易故略，[參考資料](https://support.google.com/firebase/answer/7015592?hl=zh-Hant#zippy=%2C%E6%9C%AC%E6%96%87%E5%85%A7%E5%AE%B9)

### 安裝相關套件
1. [安卓官網](https://firebase.google.com/docs/flutter/setup?platform=android)
[](https://)
2. [IOS官網](https://firebase.google.com/docs/flutter/setup?platform=ios)

#### 其他常用套件
1. firebase_core

    flutter pub add firebase_core

2. [firebase_messaging 官網](https://firebase.google.com/docs/cloud-messaging/flutter/client)

    flutter pub add firebase_messaging

程式範例
main.dart，在APP關閉或是退背景時依舊可以接收訊息

    // app 於背景時收到推播
    // flutter 3.0.0 後需添加避免release時被移除
    @pragma('vm:entry-point')
    Future<void> _backgroundMessageHandler(RemoteMessage message) async {
      debugPrint('main onMessage: ${message.data}');
    }
    
    //主程式
    Future<void> main() async {
      // async 起手式
      WidgetsFlutterBinding.ensureInitialized();
      // firebase
      await Firebase.initializeApp();
      if (Platform.isIOS) {
        await FirebaseMessaging.instance
            .requestPermission(sound: true, badge: true, alert: true);
      }
      runApp(const MyApp());
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);

      @override
      State<MyApp> createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
      @override
      void initState() {   
        //註冊背景程式
        WidgetsBinding.instance.addPostFrameCallback((_) async {
         FirebaseMessaging.onBackgroundMessage(_backgroundMessageHandler);
          });
        });

        super.initState();
      }

      @override
      Widget build(BuildContext context) {
          //略
      }
    }

#### 補充資料
1. 此指令會協助你建立安卓及IOS相關設定檔

flutterfire configure

## 使用Postman通知手機
### Firebase FCM HTTP v1
#### Url

https://fcm.googleapis.com/v1/projects/<項目ＩＤ>/messages:send

#### Header
##### Authorization

Bearer <access_token>

STEP 1 進入[OAuth 2.0 Playground](https://developers.google.com/oauthplayground/)找到 Firebase Cloud Messaging API v1 後，點擊 Authorize API’s ，後允許權限。

STEP 2 點擊 Exchange authorization code for tokens 就會生成 Access token
##### Content-Type

application/json

#### Body

{
  "message": {
    "token": "<fcm token>",
    "notification": {
      "title": "Breaking News",
      "body": "New news story available."
    },
    "data": {
      "story_id": "story_12345"
    }
  }
}

#### 參考資料
https://firebase.google.com/docs/cloud-messaging/migrate-v1?hl=zh-cn

https://apoorv487.medium.com/testing-fcm-push-notification-http-v1-through-oauth-2-0-playground-postman-terminal-part-2-7d7a6a0e2fa0
### firebase 舊版 API
#### Request

https://fcm.googleapis.com/fcm/send

##### Header
###### Authorization
將下圖紅匡處填入即可，若未顯示紅匡處可以先點選設定（藍色圈圈處）進行啟用

##### body

{
    "to" : "請填入devices的id，可從FirebaseMessaging取得tocken",
    "content_available": true,
    "click_action": "FLUTTER_NOTIFICATION_CLICK",        //flutter用
    "priority": "high",
    "notification" :
    {
        //請自行定義資料
    },
    //其他節點可自行定義
}

參考影片：[Youtube](https://www.youtube.com/watch?v=rQzexLu0eLU)

## 特別注意事項
<font color=''></font>

## 錯誤訊息
### File google-services.json is missing.
IDE錯誤訊息

Execution failed for task ':app:processDebugGoogleServices'.
> File google-services.json is missing. The Google Services Plugin cannot function without it. 

#### 解決方法
1. 登入 Firebase，然後開啟專案。
2. 點選設定圖示，然後選取 [專案設定]。
3. 在「您的應用程式」卡片中，從清單中選取您要下載設定檔的應用程式的繫結 ID。
4. 點選下載。

### Notifications to this FCM Token will not be delivered over APNS.

APNS device token not set before retrieving FCM Token for Sender ID '899895801464'. 
Notifications to this FCM Token will not be delivered over APNS.Be sure to re-retrieve the FCM token once the APNS device token is set.

#### 解決辦法
1. 加入APN金鑰(專案設定 >> 雲端通訊)
2. 確定google-services.json放置位置正確，且Resourse內有該檔案，沒有的話重新拉到該資料夾
3. 確定有添加Push Notifications，[參考資料](https://firebase.flutter.dev/docs/messaging/apple-integration)（圖片源自官網）

### flutterfire: command not found

dart pub global activate flutterfire_cli

export PATH="$PATH":"$HOME/.pub-cache/bin"

就可以運行

flutterfire configure

## 補充資料
### 取得applicationId
#### 安卓
/android/app/build.gradle

defaultConfig {
    applicationId "com.example.catcatcat"
    //下面略
}

#### IOS
開啟Xcode查看，Runner > Signing&Capabilities > Bundle Identifier

###### tags: `flutter` `firebase`