環境
- 開発IDE: Android Studio, Xcode
- テスト実機: iPhone 7 (シミュレータだとネットに接続できなかったため)
前提
- 実機でアプリを実行できること(Appleの開発者としてSigingできること)
今話題のFlutterとFirebaseを使って、Facebook認証可能なiOSアプリを作成した。
色々とつまづいた部分があるのでそれらの備忘録的なまとめ。
以下の手順で実施。
Facebook アプリ作成
Facebook for Developersに行き、手順に従ってアプリを作成する。
作成すると以下のような画面ができるはず。
FirebaseでFacebook認証を有効化
Firebaseのコンソールで、 Authentication > ログイン方法
からFacebookを有効にする。
こんな画面↓
- アプリケーションID
- アプリシークレット
を記載する必要があるがこれは、Facebook for Developersの 設定 > ベーシック
に記載されているものをコピペする。
アプリケーションID、アプリシークレットをコピペしたら、今度は逆にリダイレクトURIをfacebook側にコピペする。
プロダクト > Facebookログイン > 設定
変更を保存
をクリック。
FirebaseにFlutterアプリを登録 & FlutterにFirebaseの情報を登録
ここの手順に従ってFirebaseにFlutterアプリを登録する (「Androidの構成」は無視してOK)。
同時にFlutterへFirebaseの情報も登録する。
iOSアプリのFacebookログインを有効にする
こちらのサイトの、
That’s it! Our login works perfectly on Android. Now, let’s try iOS:
この文言以下の手順に従い、ここからiOSアプリのFacebookログインについて設定する(1〜4まででOK)。
Flutterプロジェクトディレクトリの pubspec.yaml
の編集
# Firebase
の部分をdependenciesに追記
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
# Firebase
firebase_auth: ^0.6.2
firebase_analytics: ^0.3.3
flutter_facebook_login: ^1.1.1
ターミナルで flutter packages get
を実行してこれらのパッケージをインストールする。
これで実機にアプリをインストールして実行すれば、以下のようにアプリからFBの情報を取得することができた。
ちゃんとFirebaseでもfacebookでログインしていることが確認できた。
その他つまづいたところ
- FacebookでSignInしても詳細画面に遷移しなかった
- 過去Firebaseに別の方法でログインしていた(Googleログイン)
- デフォルトだと一つのアカウントには一つの方法でしかログインできないようになっているため、このGoogleログインしたアカウントを削除することで対応した
- 過去Firebaseに別の方法でログインしていた(Googleログイン)