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

Dart

概要

どうも、@daiki1003です!


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

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

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

前提

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

【超簡単!】FlutterでFirebaseを使って爆速コーディング!〜登録から認証まで〜
概要 みなさん、Firebase使ってますか? 「個人開発で何かを開発して世に出してみたい!」 って欲望のある人は確実に使った方が良いと思います。 めちゃくちゃ便利ですよ。 チーム開発した事がある人はすごさわかると...

今回のソースコード

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

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

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

daiki1003/firebase_sample
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コンソールにアクセス

ログイン - Google アカウント

Authenticationを選択

Sign-in Methodの選択

Facebookの選択

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

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

Facebook Developersでのログイン設定

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

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

7分で出来る!Facebook Developersでアプリの登録からログイン情報の登録までを徹底解説!
Facebook Developersでの登録/セットアップでお困りではないですか? この記事では、全工程を画像付きで分かりやすく解説しています。 是非ご覧ください♪

リダイレクト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のパッケージのインストール方法で悩んでいませんか? この記事では、主に初心者向けにパッケージインストール方法からおすすめのパッケージについて解説しています。 是非ご覧ください♪

firebase_authのインストール

firebase_auth | Flutter Package
Flutter plugin for Firebase Auth, enabling Android and iOS authentication using passwords, phone numbers and identity providers like Google, Facebook and Twitte...

まだの人は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に伝えています。

さいごに

いかがでしたでしょうか?
やはりFirebaseを使うとコピペとクリックだけでいけてしまいますね…。
恐ろしやw

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非@daiki1003のフォローお願いします♪

一緒に読みたい

Flutter x FirebaseでSign in with Appleはクリックとコピペだけで出来る!手順を徹底解説するよ!
Flutter x Firebase Auth を使って Sign in with Apple の実装で悩んでいませんか? こちらの記事では、AppIDの作り方からFirebaseでの設定、Flutterでどう言うプラグインを使えば簡単かなど細かく解説しています。 是非ご覧ください♪
簡単すぎない?FirebaseAuthとFlutterのStreamBuilderで認証前後の画面をコーディングしてみよう!
Flutterを使って認証周りの実装、苦戦していませんか? 今回、firebase_authパッケージとStreamBuilderを使って認証前後の画面を行き来する動作の実装を解説しています。 是非ご覧ください。
Amazon.co.jp: ソーシャル・ネットワーク (字幕版)を観る | Prime Video
2003年。ハーバード大学に通う19歳の学生マーク・ザッカーバーグは、親友のエドゥアルド・サヴェリンとともにある計画を立てる。それは友達を増やすため、大学内の出来事を自由に語りあえるサイトを作ろうというもの。  閉ざされた“ハーバード”というエリート階級社会で、「自分をみくびった女子学生を振り向かせたい」―そんな若者ら...

コメント

タイトルとURLをコピーしました