Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@Kosuke-Kitahara

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

環境

  • 開発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ログインしたアカウントを削除することで対応した
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?