やる事はクリックとコピペだけ！Flutter x FirebaseでFacebook認証を徹底解説するよ！

Dart

2020.06.10

概要

どうも、@daiki1003です！

「Facebookログインを実装したいけど何から初めて良いか分からないよ…」

今回の記事では、そんなあなたのために
Flutter x Firebase AuthでのFacebookログインについて詳しく解説しています！

あなたがやることは
クリックとコピペのみです！
めっちゃ簡単！

前提

今回の記事では、Firebaseプロジェクトは作成されていると言う前提で書いています。
もし、まだでしたら下記からお願いします！
2,3分で出来ると思います。

【超簡単！】FlutterでFirebaseを使って爆速コーディング！〜登録から認証まで〜

概要みなさん、Firebase使ってますか？「個人開発で何かを開発して世に出してみたい！」って欲望のある人は確実に使った方が良いと思います。めちゃくちゃ便利ですよ。チーム開発した事がある人はすごさわかると...

今回のソースコード

例によって、サンプルコードはgithubにあげてあります。
firebase_facebook ブランチに移動して

・bundleID
・GoogleService-Info.plist または google-services.json

を設定すればすぐに動きます。

GitHub - daiki1003/firebase_sample: This is firebase sample created with flutter.

This is firebase sample created with flutter. Contribute to daiki1003/firebase_sample development by creating an account on GitHub.

ここからの流れ

以下の5ステップとなります。
どれもクリック or コピペで出来ます！

1. Firebase側でFacebook認証の設定
2. Facebook Developersでのログイン設定
3. Flutter側でFacebook認証の設定
4. Facebookでログイン
5. Flutter側でFacebookによる認証情報をFirebaseに送信

Firebase側でのFacebook認証の設定

Firebaseコンソールにアクセス

Authenticationを選択

Sign-in Methodの選択

Facebookの選択

「アプリケーションID」と「アプリシークレット」を入力して保存

ここで、リダイレクトURIをコピーします。

Facebook Developersでのログイン設定

Facebook Developersでのアプリ登録、Facebookログインの設定

こちらに関しては、とても長くなるので別記事で解説しています。

7分で出来る！Facebook Developersでアプリの登録からログイン情報の登録までを徹底解説！

概要どうも、です！本日は、Facebook Developersでのアプリの登録/セットアップ周りの解説をしたいと思います。「Facebook Developers、前とUI違って全然分からない...」「Fa...

リダイレクトURIの設定

「Facebookログイン」 > 「設定」を開くとこの様な画面になります。
先ほどコピーしたリダイレクトURIをペーストします。

Flutter側でFacebook認証の設定

flutter_facebook_loginのインストール

flutter_facebook_loginをインストールします。

flutter_facebook_login | Flutter package

A Flutter plugin for allowing users to authenticate with native Android & iOS Facebook login SDKs.

インストールの方法が分からない方はこちらの記事を参考にしてみてください。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

概要 Flutter(Dart)で画像のクリッピングするコードが書けますか？ Flutter(Dart)でhttp通信するコードが書けますか？大丈夫、書けなくて良いんです。 Flutterでは、色んな人が使いそ...

firebase_authのインストール

firebase_auth | Flutter package

Flutter plugin for Firebase Auth, enabling authentication using passwords, phone numbers and identity providers like Google, Facebook and Twitter.

まだの人はfirebase_authもインストールしておいてください！

これで、準備完了です！

Facebookでログイン

認証部分

import 'package:flutter_facebook_login/flutter_facebook_login.dart';
import 'package:firebase_auth/firebase_auth.dart';

static final facebookLogin = FacebookLogin();
void logIn() async {
  final result = await facebookLogin.logIn(['email']);
 
  switch (result.status) {
    case FacebookLoginStatus.loggedIn:
      final credential = FacebookAuthProvider.getCredential(
          accessToken: result.accessToken.token);
      final authResult =
          await FirebaseAuth.instance.signInWithCredential(credential);
      print(authResult.user.uid);
      break;
    case FacebookLoginStatus.error:
      print('error, ${result.errorMessage}');
      break;
    case FacebookLoginStatus.cancelledByUser:
      print('cancelled');
      break;
  }
}

FacebookLogin クラスをインスタンス化します。
こちらがlogInやlogOutメソッド、またisLoggedInなどのプロパティを保持しているクラスです。

このインスタンスに対してlogInを投げると Future<FacebookLoginResult> が
取得出来ますので、その結果に応じて処理をしています。

Flutter側でFacebookによる認証情報をFirebaseに送信

さて、成功した場合は認証情報をFirebaseに伝えなければいけません。

final credential = FacebookAuthProvider.getCredential(
    accessToken: result.accessToken.token);
final authResult =
    await FirebaseAuth.instance.signInWithCredential(credential);

FacebookAuthProvider は firebase_auth プラグインに含まれているクラスです。
getCredentialで認証情報をアクセストークンより取得して、それをsignInWithCredentialに伝えています。