Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

環境

  • 開発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ログインしたアカウントを削除することで対応した
Kosuke-Kitahara
Machine Learning, Statistics, Search Engineer, Data Scientist, Buisiness Development
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした