「FlutterFire」の版間の差分
ナビゲーションに移動
検索に移動
Google
(→Web) |
|||
(同じ利用者による、間の53版が非表示) | |||
1行目: | 1行目: | ||
− | | [[Flutter]] | | + | | [[Dart]] | [[Flutter]] | [https://www.typea.info/blog/index.php/category/flutter/ ブログカテゴリ(Flutter)] | [[Android Studio]] | [[Flutter macos]] | [[Flutter 手順]] | [[Flutter Riverpod]] | |
==FlutterFire== | ==FlutterFire== | ||
*https://firebase.flutter.dev/ | *https://firebase.flutter.dev/ | ||
− | === | + | |
+ | *[https://firebase.flutter.dev/ 対応状況] | ||
+ | *[https://firebase.flutter.dev/docs/overview/ はじめに] | ||
+ | |||
+ | === Firebase CLI=== | ||
---- | ---- | ||
− | *https://firebase. | + | *https://firebase.google.com/docs/cli?hl=ja#install-cli-mac-linux |
− | + | <pre> | |
+ | $ npm install -g firebase-tools | ||
+ | </pre> | ||
+ | |||
+ | ===Install=== | ||
---- | ---- | ||
*[https://firebase.flutter.dev/docs/migration/ Migration] | *[https://firebase.flutter.dev/docs/migration/ Migration] | ||
23行目: | 31行目: | ||
$ flutter pub get | $ flutter pub get | ||
</pre> | </pre> | ||
− | ==== | + | ===Platform セットアップ=== |
+ | ---- | ||
+ | ====[https://firebase.flutter.dev/docs/installation/web Web]==== | ||
+ | ---- | ||
+ | |||
+ | ====[https://firebase.flutter.dev/docs/installation/android Android]==== | ||
+ | ---- | ||
+ | =====build.gradle===== | ||
+ | ----- | ||
+ | *android/build.gradle | ||
+ | <pre> | ||
+ | buildscript { | ||
+ | dependencies { | ||
+ | // ... other dependencies | ||
+ | classpath 'com.google.gms:google-services:4.3.8' | ||
+ | } | ||
+ | } | ||
+ | </pre> | ||
+ | *android/app/build.gradle | ||
+ | <pre> | ||
+ | apply plugin: 'com.google.gms.google-services' | ||
+ | </pre> | ||
+ | =====署名===== | ||
+ | ---- | ||
+ | *https://developers.google.com/android/guides/client-auth | ||
+ | *Java に付属の keytool ユーティリティを実行して、証明書の SHA-1 フィンガープリントを取得します。 | ||
+ | *リリース証明書のフィンガープリントとデバッグ証明書のフィンガープリントの両方を取得する必要があります。 | ||
+ | |||
+ | **リリース証明書のフィンガープリントを取得 | ||
+ | <pre> | ||
+ | keytool -list -v -alias <your-key-name> -keystore <path-to-production-keystore> | ||
+ | </pre> | ||
+ | **デバッグ証明書のフィンガープリントを取得 | ||
+ | **デフォルトパスワードは android | ||
+ | <pre> | ||
+ | keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore | ||
+ | </pre> | ||
+ | |||
+ | ====="google-services.json" file to the project?===== | ||
---- | ---- | ||
− | =====[https://firebase.flutter.dev/docs/installation/ | + | *https://firebase.google.com/docs/android/setup?hl=ja |
− | =====[https:// | + | *Firebase Android 構成ファイルをアプリに追加します。 |
− | + | *google-services.json のダウンロード ボタン をクリックして、Firebase Android 構成ファイル(google-services.json)を取得します。 | |
+ | *構成ファイルをアプリのモジュール(アプリレベル)ディレクトリに移動します。 | ||
+ | |||
+ | ====[https://firebase.flutter.dev/docs/installation/ios iOS]==== | ||
+ | ---- | ||
+ | https://firebase.google.com/docs/ios/setup | ||
+ | =====GoogleService-Info.plist 追加===== | ||
+ | ---- | ||
+ | # FirebaseでiOSアプリを登録 | ||
+ | # FirebaseアプリのGoogleService-Info.plistファイルをダウンロード | ||
+ | # ios/Runner.xcworkspace をxcodeで開く | ||
+ | # Xcode内の左側のプロジェクト・ナビゲーションから「Runner」を右クリックし「Add files」を選択 | ||
+ | # "Copy items if needed" を有効にして、GoogleService-Info.plistファイルを取り込む | ||
+ | |||
+ | [[File:ios_flutter_fire.png|500px]] | ||
+ | |||
+ | =====[https://qiita.com/mkurom/items/c2282d95aa737e73a769 fatal error: module 'firebase_core' not found エラー]===== | ||
+ | ---- | ||
+ | <pre> | ||
+ | Error output from Xcode build: | ||
+ | ↳ | ||
+ | ** BUILD FAILED ** | ||
+ | |||
+ | |||
+ | Xcode's output: | ||
+ | ↳ | ||
+ | /Users/hirotoyagi/Workspaces/flutter/tenarai_online/ios/Runner/GeneratedPluginRegistrant.m:10:9: fatal error: module 'firebase_core' | ||
+ | not found | ||
+ | @import firebase_core; | ||
+ | </pre> | ||
+ | * | ||
+ | <pre> | ||
+ | $ flutter clean | ||
+ | $ cd ios | ||
+ | $ rm -rf Pods | ||
+ | $ rm Podfile.lock Podfile | ||
+ | $ flutter run | ||
+ | </pre> | ||
+ | *Podfile | ||
+ | <pre> | ||
+ | # Uncomment this line to define a global platform for your project | ||
+ | platform :ios, '10.0' | ||
+ | </pre> | ||
+ | |||
+ | ====[https://firebase.flutter.dev/docs/installation/macos macOS]==== | ||
---- | ---- | ||
* [[XCode]]で、open ./macos/Runner.xcworkspace/ | * [[XCode]]で、open ./macos/Runner.xcworkspace/ | ||
54行目: | 144行目: | ||
</pre> | </pre> | ||
− | =====[https://firebase.flutter.dev/docs/installation/web Web] | + | ====Windows==== |
+ | ---- | ||
+ | *C++によるデスクトップ開発のインストール | ||
+ | [[File:flutter_win.png|500px]] | ||
+ | |||
+ | ====[https://firebase.flutter.dev/docs/installation/web Web]==== | ||
---- | ---- | ||
*[https://flutter.dev/web Web Support for Flutter] | *[https://flutter.dev/web Web Support for Flutter] | ||
+ | =====Debug===== | ||
+ | [https://www.typea.info/blog/index.php/2021/08/04/mac_edge_flutter_debug/ MacのEdgeでFlutterのデバッグをする] | ||
− | + | ===初期化=== | |
---- | ---- | ||
*Firebaseのサービスを使用する前に、FlutterFireを初期化する必要があります | *Firebaseのサービスを使用する前に、FlutterFireを初期化する必要があります | ||
*初期化ステップは非同期なので完了するまではFlutterFire関連の使用を禁止する必要があります。 | *初期化ステップは非同期なので完了するまではFlutterFire関連の使用を禁止する必要があります。 | ||
*FlutterFireを初期化するには、FirebaseクラスのinitializeAppメソッドを呼び出します | *FlutterFireを初期化するには、FirebaseクラスのinitializeAppメソッドを呼び出します | ||
+ | |||
+ | ==[https://firebase.flutter.dev/docs/auth/overview/ Authentication]== | ||
+ | ===Instration=== | ||
+ | ====Stableチャネルに切り替え==== | ||
+ | <pre> | ||
+ | $ flutter channel stable | ||
+ | Switching to flutter channel 'stable'... | ||
+ | git: From https://github.com/flutter/flutter | ||
+ | git: + 2b9537c783...cc00e7e6bc dev -> origin/dev (forced update) | ||
+ | git: * [new branch] dnfield-patch-1 -> origin/dnfield-patch-1 | ||
+ | git: * [new branch] flutter-2.4-candidate.1 -> origin/flutter-2.4-candidate.1 | ||
+ | git: * [new branch] flutter-2.4-candidate.2 -> origin/flutter-2.4-candidate.2 | ||
+ | git: * [new branch] flutter-2.4-candidate.3 -> origin/flutter-2.4-candidate.3 | ||
+ | git: * [new branch] flutter-2.4-candidate.4 -> origin/flutter-2.4-candidate.4 | ||
+ | git: * [new branch] flutter-2.4-candidate.5 -> origin/flutter-2.4-candidate.5 | ||
+ | git: 52e2ca38fc..2108fbd78d master -> origin/master | ||
+ | git: + c8311f68be...f4d2c79a6a revert-85466-revert-85221-0624new -> origin/revert-85466-revert-85221-0624new (forced update) | ||
+ | git: * [new branch] revert-86171-revert-83924-textTheme -> origin/revert-86171-revert-83924-textTheme | ||
+ | git: * [new branch] revert-86198-deprecate_appbar_backwards_compatibility_flag -> origin/revert-86198-deprecate_appbar_backwards_compatibility_flag | ||
+ | git: * [new branch] test -> origin/test | ||
+ | git: * [new branch] test2 -> origin/test2 | ||
+ | git: * [new tag] 2.4.0-0.0.pre -> 2.4.0-0.0.pre | ||
+ | git: * [new tag] 2.4.0-4.0.pre -> 2.4.0-4.0.pre | ||
+ | git: Already on 'stable' | ||
+ | git: Your branch is up to date with 'origin/stable'. | ||
+ | Successfully switched to flutter channel 'stable'. | ||
+ | To ensure that you're on the latest build from this channel, run 'flutter upgrade' | ||
+ | </pre> | ||
+ | *確認 | ||
+ | <pre> | ||
+ | $ flutter channel | ||
+ | Flutter channels: | ||
+ | master | ||
+ | dev | ||
+ | beta | ||
+ | * stable | ||
+ | </pre> | ||
+ | |||
+ | ====pubspec.yaml==== | ||
+ | *firebase_authを追記 | ||
+ | <pre> | ||
+ | dependencies: | ||
+ | flutter: | ||
+ | sdk: flutter | ||
+ | firebase_core: "^1.4.0" | ||
+ | firebase_auth: "^3.0.1" | ||
+ | </pre> | ||
+ | *更新 | ||
+ | <pre> | ||
+ | $ flutter pub get | ||
+ | </pre> | ||
+ | |||
+ | ====Web==== | ||
+ | ---- | ||
+ | *追記 | ||
+ | <pre> | ||
+ | <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script> | ||
+ | </pre> | ||
+ | |||
+ | ====iOS/macOS==== | ||
+ | ---- | ||
+ | *cd ios/macos | ||
+ | |||
+ | *macos 例 | ||
+ | <pre> | ||
+ | $ flutter clean | ||
+ | $ rm -rf Pods | ||
+ | $ rm Podfile | ||
+ | $ rm Podfile.lock | ||
+ | $ pod repo update | ||
+ | $ flutter run -d macos | ||
+ | </pre> | ||
+ | *Podfile | ||
+ | <pre> | ||
+ | platform :osx, '10.12' | ||
+ | </pre> | ||
+ | |||
+ | ===[https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja 認証の永続性]=== | ||
+ | ---- | ||
+ | *[https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja 認証の永続性] | ||
+ | ===Google=== | ||
+ | *[https://console.firebase.google.com/project/_/authentication/providers Firebase コンソール] で Googleサインインプロバイダーを有効化 | ||
+ | *[https://pub.dev/packages/google_sign_in google_sign_in] | ||
+ | ====iOS==== | ||
+ | *ios/Runner/info.plist | ||
+ | <pre> | ||
+ | <!-- Put me in the [my_project]/ios/Runner/Info.plist file --> | ||
+ | <!-- Google Sign-in Section --> | ||
+ | <key>CFBundleURLTypes</key> | ||
+ | <array> | ||
+ | <dict> | ||
+ | <key>CFBundleTypeRole</key> | ||
+ | <string>Editor</string> | ||
+ | <key>CFBundleURLSchemes</key> | ||
+ | <array> | ||
+ | <!-- TODO Replace this value: --> | ||
+ | <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID --> | ||
+ | <string>com.googleusercontent.apps.{GoogleService-Info.plist から、この部分を取得する}</string> | ||
+ | </array> | ||
+ | </dict> | ||
+ | </array> | ||
+ | <!-- End of the Google Sign-in Section --> | ||
+ | </pre> |
2021年10月17日 (日) 05:33時点における最新版
| Dart | Flutter | ブログカテゴリ(Flutter) | Android Studio | Flutter macos | Flutter 手順 | Flutter Riverpod |
FlutterFire
Firebase CLI
$ npm install -g firebase-tools
Install
- Migration
- Firebase のサービスを利用する前に、まず firebase_core プラグインをインストールする必要があります。
- このプラグインは、アプリケーションを Firebase に接続する役割を果たします。
- このプラグインをpubspec.yamlファイルに追加します。
pubspec.yaml
dependencies: flutter: sdk: flutter firebase_core: "^1.3.0"
$ flutter pub get
Platform セットアップ
Web
Android
build.gradle
- android/build.gradle
buildscript { dependencies { // ... other dependencies classpath 'com.google.gms:google-services:4.3.8' } }
- android/app/build.gradle
apply plugin: 'com.google.gms.google-services'
署名
- https://developers.google.com/android/guides/client-auth
- Java に付属の keytool ユーティリティを実行して、証明書の SHA-1 フィンガープリントを取得します。
- リリース証明書のフィンガープリントとデバッグ証明書のフィンガープリントの両方を取得する必要があります。
- リリース証明書のフィンガープリントを取得
keytool -list -v -alias <your-key-name> -keystore <path-to-production-keystore>
- デバッグ証明書のフィンガープリントを取得
- デフォルトパスワードは android
keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
"google-services.json" file to the project?
- https://firebase.google.com/docs/android/setup?hl=ja
- Firebase Android 構成ファイルをアプリに追加します。
- google-services.json のダウンロード ボタン をクリックして、Firebase Android 構成ファイル(google-services.json)を取得します。
- 構成ファイルをアプリのモジュール(アプリレベル)ディレクトリに移動します。
iOS
https://firebase.google.com/docs/ios/setup
GoogleService-Info.plist 追加
- FirebaseでiOSアプリを登録
- FirebaseアプリのGoogleService-Info.plistファイルをダウンロード
- ios/Runner.xcworkspace をxcodeで開く
- Xcode内の左側のプロジェクト・ナビゲーションから「Runner」を右クリックし「Add files」を選択
- "Copy items if needed" を有効にして、GoogleService-Info.plistファイルを取り込む
fatal error: module 'firebase_core' not found エラー
Error output from Xcode build: ↳ ** BUILD FAILED ** Xcode's output: ↳ /Users/hirotoyagi/Workspaces/flutter/tenarai_online/ios/Runner/GeneratedPluginRegistrant.m:10:9: fatal error: module 'firebase_core' not found @import firebase_core;
$ flutter clean $ cd ios $ rm -rf Pods $ rm Podfile.lock Podfile $ flutter run
- Podfile
# Uncomment this line to define a global platform for your project platform :ios, '10.0'
macOS
- XCodeで、open ./macos/Runner.xcworkspace/
- GoogleService-Info.plist
- ダウンロード
- Runner右クリックからファイルを追加
- 以下の画面のチェックをONにして追加
Firebase Emulator Suiteの一部を使用して、開発中のローカルマシンでfirebaseサービスをエミュレートしたい場合は、macOSアプリが安全でない接続でローカルネットワークサービスに接続することを許可する必要があります。安全でない接続を許可するには、アプリケーションのplistファイル内に以下を追加
<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsLocalNetworking</key> <true/> </dict>
- 以下のエラーの場合
[!] The FlutterFire plugin firebase_core for macOS requires a macOS deployment target of 10.12 or later.
- macos/Podfileの修正
platform :osx, '10.12'
Windows
- C++によるデスクトップ開発のインストール
Web
Debug
初期化
- Firebaseのサービスを使用する前に、FlutterFireを初期化する必要があります
- 初期化ステップは非同期なので完了するまではFlutterFire関連の使用を禁止する必要があります。
- FlutterFireを初期化するには、FirebaseクラスのinitializeAppメソッドを呼び出します
Authentication
Instration
Stableチャネルに切り替え
$ flutter channel stable Switching to flutter channel 'stable'... git: From https://github.com/flutter/flutter git: + 2b9537c783...cc00e7e6bc dev -> origin/dev (forced update) git: * [new branch] dnfield-patch-1 -> origin/dnfield-patch-1 git: * [new branch] flutter-2.4-candidate.1 -> origin/flutter-2.4-candidate.1 git: * [new branch] flutter-2.4-candidate.2 -> origin/flutter-2.4-candidate.2 git: * [new branch] flutter-2.4-candidate.3 -> origin/flutter-2.4-candidate.3 git: * [new branch] flutter-2.4-candidate.4 -> origin/flutter-2.4-candidate.4 git: * [new branch] flutter-2.4-candidate.5 -> origin/flutter-2.4-candidate.5 git: 52e2ca38fc..2108fbd78d master -> origin/master git: + c8311f68be...f4d2c79a6a revert-85466-revert-85221-0624new -> origin/revert-85466-revert-85221-0624new (forced update) git: * [new branch] revert-86171-revert-83924-textTheme -> origin/revert-86171-revert-83924-textTheme git: * [new branch] revert-86198-deprecate_appbar_backwards_compatibility_flag -> origin/revert-86198-deprecate_appbar_backwards_compatibility_flag git: * [new branch] test -> origin/test git: * [new branch] test2 -> origin/test2 git: * [new tag] 2.4.0-0.0.pre -> 2.4.0-0.0.pre git: * [new tag] 2.4.0-4.0.pre -> 2.4.0-4.0.pre git: Already on 'stable' git: Your branch is up to date with 'origin/stable'. Successfully switched to flutter channel 'stable'. To ensure that you're on the latest build from this channel, run 'flutter upgrade'
- 確認
$ flutter channel Flutter channels: master dev beta * stable
pubspec.yaml
- firebase_authを追記
dependencies: flutter: sdk: flutter firebase_core: "^1.4.0" firebase_auth: "^3.0.1"
- 更新
$ flutter pub get
Web
- 追記
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
iOS/macOS
- cd ios/macos
- macos 例
$ flutter clean $ rm -rf Pods $ rm Podfile $ rm Podfile.lock $ pod repo update $ flutter run -d macos
- Podfile
platform :osx, '10.12'
認証の永続性
- Firebase コンソール で Googleサインインプロバイダーを有効化
- google_sign_in
iOS
- ios/Runner/info.plist
<!-- Put me in the [my_project]/ios/Runner/Info.plist file --> <!-- Google Sign-in Section --> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLSchemes</key> <array> <!-- TODO Replace this value: --> <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID --> <string>com.googleusercontent.apps.{GoogleService-Info.plist から、この部分を取得する}</string> </array> </dict> </array> <!-- End of the Google Sign-in Section -->
© 2006 矢木浩人