10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FlutterとFirebaseでFacebook認証やってみた (iOS)

Last updated at Posted at 2018-10-27

環境

  • 開発IDE: Android Studio, Xcode
  • テスト実機: iPhone 7 (シミュレータだとネットに接続できなかったため)

前提

  • 実機でアプリを実行できること(Appleの開発者としてSigingできること)

今話題のFlutterとFirebaseを使って、Facebook認証可能なiOSアプリを作成した。
色々とつまづいた部分があるのでそれらの備忘録的なまとめ。

以下の手順で実施。

Facebook アプリ作成

Facebook for Developersに行き、手順に従ってアプリを作成する。

作成すると以下のような画面ができるはず。

Screen Shot 2018-10-27 at 16.16.24.png

FirebaseでFacebook認証を有効化

Firebaseのコンソールで、 Authentication > ログイン方法 からFacebookを有効にする。

こんな画面↓

Screen Shot 2018-10-27 at 16.28.49.png
  • アプリケーションID
  • アプリシークレット

を記載する必要があるがこれは、Facebook for Developersの 設定 > ベーシック に記載されているものをコピペする。

Screen Shot 2018-10-27 at 15.47.16.png

アプリケーションID、アプリシークレットをコピペしたら、今度は逆にリダイレクトURIをfacebook側にコピペする。

プロダクト > Facebookログイン > 設定

Screen Shot 2018-10-27 at 15.46.36.png

変更を保存 をクリック。

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の情報を取得することができた。

IMG_4808.PNG

IMG_4809.PNG

IMG_4811.PNG

ちゃんとFirebaseでもfacebookでログインしていることが確認できた。
IMG_4813.JPG

その他つまづいたところ

  • FacebookでSignInしても詳細画面に遷移しなかった
    • 過去Firebaseに別の方法でログインしていた(Googleログイン)
      • デフォルトだと一つのアカウントには一つの方法でしかログインできないようになっているため、このGoogleログインしたアカウントを削除することで対応した
10
7
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?