2020/10/26 Flutter✖️Firebase : FirebaseプロジェクトとFlutterアプリの接続(iOS編))

 

コンソールで「+アプリを追加」ボタンを押して、

iOSアイコンをクリックします。


(1)アプリの登録

iOSバンドルIDを入力します。

android studioの

プロジェクトルート(bc_ff)/iOSディレクトリ上で右クリックして開いたメニューから、

「Flutter」>>「Open iOS module in Xcode」を選択してXcodeを起動します。


トップのRunnerディレクトリを選択、TARGETセクションを選択、Generalタブを選択、

「Bundle Identifier」欄が「iOSバンドルID」ですので、これをコピーします。(例ではcom.example.bcFf)

コンソールに戻って「iOSバンドルID」欄にコピーしたものを貼り付けます。

残りの二つは省略して「アプリを登録」ボタンを押します。


(2)設定ファイルのダウンロード

「GoogleService-info.plistをダウンロード」ボタンを押して設定ファイルをダウンロードします。


ダウンロードしたファイルを上記の場所に移動させます。

Runner/Runnerディレクトリに移動。


上記の確認画面が出てきますので、上記箇所がチェックされていることを確認してFinishボタンを押し、移動を完了させます。

「Copy Item if needed」にチェックを付けないと、実際にはコピーされず、ファイルへの参照が作られるだけなので、ダウンロードしたファイルを削除した時に、参照するファイルが無い、ということで突然エラーが発生します。

何が原因かわかりにくいので非常に困ります(笑)


Firebaseコンソールページに戻り、「次へ」ボタンを押します。


(3)Firebase SDKの追加

とありますが、ここはFlutterがやってくれるので、何もせずに「次へ」ボタンを押し、次に進みます。


(4)初期化コードの追加

とありますが、ここも不要なので何もせずに次に進みます。


以上でiOSの設定も終了です。

では接続できているか確認してみましょう。

firebase_authを使用します。

https://pub.dev/packages/firebase_auth

↑サンプルコードの上にgithubへのリンクがあるのでリンク先へ行きます。

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/main.dart

とりあえず上記リポジトリを今作ったFlutterプロジェクトbc_ffで動かして、メアド/パスワード認証でユーザー登録・サインインができるかを試してみます。


まず依存関係を解決するためpubspec.yamlファイルのコードをコピペします。

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/pubspec.yaml

pubspec.yamlファイル

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.18.1+2  #←追加
  google_sign_in: ^4.5.1    #←追加
  flutter_signin_button: ^1.0.0  #←追加

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0

google_sign_inは今は必要ないような気がしますが、そのうち必要になるかもしれないので入れときます笑


次にmain.dartに

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/main.dart

↑のコードをまるまるコピペします。

register_page.dart

signin_page.dart

を作ってないのでエラーが出ます。


プロジェクトルート(bc_ff)/libディレクトリに

register_page.dart

ファイルを新規作成します。

libディレクトリ上で右クリック >> [ New ] >> [ Dart File ]を選択し、ファイル名を「register_page」と入力してエンターキーを押してください。


作成されたregister_page.dartファイルに

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/register_page.dart

のコードをまるまるコピペします。


プロジェクトルート(bc_ff)/libディレクトリに

signin_page.dart

ファイルを新規作成します。

libディレクトリ上で右クリック >> [ New ] >> [ Dart File ]を選択し、ファイル名を「signin_page」と入力してエンターキーを押してください。


作成されたsignin_page.dartファイルに

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/lib/signin_page.dart

のコードをまるまるコピペします。


これでエラーが消えるので実行できるのですが、実行する前に、Firebaseコンソールの左側のメニューの「Authentication」を選択、Sign-in methodタブを選択し、とりあえずメール/パスワード認証を有効にしておきます。


android studioでシミュレータをiphoneに設定して実行ボタンを押します。

動きました。しかしこれではまだ「がわ」が表示されているだけなので、Firebaseでユーザー登録・サインインできるか試してみます。


「Registration」ボタンを押してユーザー登録画面へ行き、適当にメアドとパスワードを入力して、Registerボタンを押します。

はい、登録成功表示が出ました。


コンソールへ行き、実際に登録されているか確認します。

登録されています。これでFirebaseと接続できていることが確認できましたが、一応サインインも試してみます。


登録画面から初期画面に戻り「Sign in」ボタンを押してサインイン画面へ行きます。

今登録したメアドとパスワードを入力し「Sign in」ボタンを押します。

サインイン成功表示が出ました。


androidアプリでも確認してみます。

接続できました。

これで現時点での最新バージョンのFlutterFireパッケージ(確認したのはfirebase_authだけですが、)を使えたので、あとは

https://firebase.flutter.dev/

を見て変更箇所など把握して実装・書き直しをやっていくと、いうことですか。

はい。

コメントを残す

メールアドレスが公開されることはありません。