Google I/O 2022 で発表された Firebase の最新情報をご覧ください。詳細

フェデレーションIDとソーシャルサインイン

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

ソーシャル認証は複数段階の認証フローであり、ユーザーをアカウントにサインインさせたり、既存のアカウントにリンクしたりできます。

ネイティブ プラットフォームと Web の両方で、 signInWithCredentialまたはlinkWithCredentialメソッドに渡すことができる資格情報の作成がサポートされています。または、Web プラットフォームでは、ポップアップまたはリダイレクトを介して認証プロセスをトリガーできます。

グーグル

Firebase で Google サインインを使用する場合、ほとんどの構成は既にセットアップされていますが、マシンの SHA1 キーが Android で使用できるように構成されていることを確認する必要があります。キーの生成方法については、認証ドキュメントを参照してください。

Firebase コンソールで「Google」サインイン プロバイダが有効になっていることを確認します。

ユーザーが Google でサインインした場合、手動でアカウントを登録した後、信頼できるプロバイダーの Firebase Authentication の概念により、認証プロバイダーは自動的に Google に変更されます。詳細については、こちらをご覧ください。

iOS+ と Android

ネイティブ プラットフォームでは、認証フローをトリガーするためにサード パーティのライブラリが必要です。

公式のgoogle_sign_inプラグインをインストールします。

インストールしたら、サインイン フローをトリガーし、新しい資格情報を作成します。

import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential> signInWithGoogle() async {
  // Trigger the authentication flow
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

ウェブ

Web では、Firebase SDK は、Firebase プロジェクトを使用して認証フローを自動的に処理するためのサポートを提供します。例えば:

ユーザーから取得したい追加のアクセス許可スコープを指定して、Google 認証プロバイダーを作成します。

GoogleAuthProvider googleProvider = GoogleAuthProvider();

googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
  'login_hint': 'user@example.com'
});

signInWithPopupメソッドに資格情報を提供します。これにより、ユーザーにプロジェクトへのサインインを求める新しいウィンドウが表示されます。または、 signInWithRedirectを使用して、認証プロセスを同じウィンドウに保持することもできます。

Future<UserCredential> signInWithGoogle() async {
  // Create a new provider
  GoogleAuthProvider googleProvider = GoogleAuthProvider();

  googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  googleProvider.setCustomParameters({
    'login_hint': 'user@example.com'
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(googleProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(googleProvider);
}

フェイスブック

開始する前に、 Facebook 開発者アプリをセットアップし、セットアップ プロセスに従って Facebook ログインを有効にします。

Firebase コンソールで「Facebook」サインイン プロバイダが有効になっていることを確認します。 Facebook アプリ ID とシークレットが設定されています。

iOS+ と Android

ネイティブ プラットフォームでは、Facebook SDK のインストールと認証フローのトリガーの両方にサード パーティ ライブラリが必要です。

flutter_facebook_authプラグインをインストールします。

プラグイン ドキュメントの手順に従って、Android と iOS の両方の Facebook SDK が正しく初期化されていることを確認する必要があります。完了したら、サインイン フローをトリガーし、Facebook 資格情報を作成して、ユーザーをサインインさせます。

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<UserCredential> signInWithFacebook() async {
  // Trigger the sign-in flow
  final LoginResult loginResult = await FacebookAuth.instance.login();

  // Create a credential from the access token
  final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(loginResult.accessToken.token);

  // Once signed in, return the UserCredential
  return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
}

ウェブ

Web では、Firebase SDK は、Firebase コンソールで提供される Facebook アプリケーションの詳細を使用して、認証フローを自動的に処理するためのサポートを提供します。例えば:

Facebook プロバイダーを作成し、ユーザーから取得したい追加のパーミッション スコープを提供します。

Firebase コンソールからの OAuth リダイレクト URI が、Facebook アプリで有効な OAuth リダイレクト URI として追加されていることを確認します。

FacebookAuthProvider facebookProvider = FacebookAuthProvider();

facebookProvider.addScope('email');
facebookProvider.setCustomParameters({
  'display': 'popup',
});

signInWithPopupメソッドに資格情報を提供します。これにより、ユーザーに Facebook アプリケーションへのサインインを促す新しいウィンドウが表示されます。

Future<UserCredential> signInWithFacebook() async {
  // Create a new provider
  FacebookAuthProvider facebookProvider = FacebookAuthProvider();

  facebookProvider.addScope('email');
  facebookProvider.setCustomParameters({
    'display': 'popup',
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(facebookProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(facebookProvider);
}

アップル

iOS+

開始する前に、 Sign In with Apple を構成し、Appleサインイン プロバイダーとして有効にします

次に、 Runnerアプリに「Apple でサインイン」機能があることを確認します。

アンドロイド

開始する前に、 Sign In with Apple を構成し、Appleサインイン プロバイダーとして有効にします

ウェブ

開始する前に、 Sign In with Apple を構成し、Appleサインイン プロバイダーとして有効にします

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  final appleProvider = AppleAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(appleProvider);
  } else {
    await _auth.signInWithAuthProvider(appleProvider);
  }
}

マイクロソフト

iOS+

iOS 用 Microsoft ログインの構成を開始する前に、ランナーにカスタム URL スキームを追加します (ステップ 1)

アンドロイド

開始する前に、Android 用の Microsoft ログインを構成します

アプリの SHA-1 フィンガープリントを忘れずに追加してください。

ウェブ

開始する前に、Web 用 Microsoft ログインを構成します

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithMicrosoft() async {
  final microsoftProvider = MicrosoftAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(microsoftProvider);
  } else {
    await _auth.signInWithAuthProvider(microsoftProvider);
  }
}

ツイッター

API キーと API シークレットが設定されたFirebase コンソールで「Twitter」サインイン プロバイダが有効になっていることを確認します。

iOS+ と Android

ネイティブ プラットフォームでは、Twitter SDK のインストールと認証フローのトリガーの両方に、サード パーティのライブラリが必要です。

twitter_loginプラグインをインストールします。

dependencies:
  twitter_login: ^4.0.1

twitter_loginの構成手順を慎重に実行し、一致する URL スキームを使用してTwitter 開発者ポータルにコールバック URL を登録してください。

import 'package:twitter_login/twitter_login.dart';

Future<UserCredential> signInWithTwitter() async {
  // Create a TwitterLogin instance
  final twitterLogin = new TwitterLogin(
    apiKey: '<your consumer key>',
    apiSecretKey:' <your consumer secret>',
    redirectURI: '<your_scheme>://'
  );

  // Trigger the sign-in flow
  final authResult = await twitterLogin.login();

  // Create a credential from the access token
  final twitterAuthCredential = TwitterAuthProvider.credential(
    accessToken: authResult.authToken!,
    secret: authResult.authTokenSecret!,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(twitterAuthCredential);
}

ウェブ

Web では、Twitter SDK は、Firebase コンソールで提供される Twitter アプリケーションの詳細を使用して、認証フローを自動的に処理するためのサポートを提供します。 Firebase コンソールのコールバック URL が、デベロッパー コンソールの Twitter アプリケーションのコールバック URL として追加されていることを確認してください。

例えば:

Twitter プロバイダーを作成し、資格情報をsignInWithPopupメソッドに提供します。これにより、ユーザーに Twitter アプリケーションへのサインインを求める新しいウィンドウが表示されます。

Future<UserCredential> signInWithTwitter() async {
  // Create a new provider
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(twitterProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(twitterProvider);
}

GitHub

GitHub 開発者設定から OAuth アプリをセットアップし、「GitHub」サインイン プロバイダーがFirebase コンソールで有効になっており、クライアント ID とシークレットが設定され、コールバック URL が GitHub アプリに設定されていることを確認してください。

iOS+ と Android

ネイティブ プラットフォームの場合、 google-services.jsonGoogleService-Info.plistを追加する必要があります。

iOS の場合、iOS ガイドのステップ 1 の説明に従って、カスタム URL スキームを追加します。

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  return await _auth.signInWithAuthProvider(githubProvider);
}

ウェブ

Web では、GitHub SDK は、Firebase コンソールで提供される GitHub アプリケーションの詳細を使用して、認証フローを自動的に処理するためのサポートを提供します。 Firebase コンソールのコールバック URL が、開発者コンソールの GitHub アプリケーションにコールバック URL として追加されていることを確認してください。

例えば:

GitHub プロバイダーを作成し、資格情報をsignInWithPopupメソッドに提供します。これにより、GitHub アプリケーションへのサインインをユーザーに求める新しいウィンドウが表示されます。

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(githubProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(githubProvider);
}