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);
}

Google Play ゲーム

Play ゲーム ログインを使用して、Android ゲームでユーザーを認証できます。

アンドロイド

Android での Google セットアップの手順に従って、 Firebase アプリの情報を使用して Play ゲーム サービスを構成します

以下は、サインイン フローをトリガーし、新しい資格情報を作成して、ユーザーをサインインします。

final googleUser = await GoogleSignIn(
  signInOption: SignInOption.games,
).signIn();

final googleAuth = await googleUser?.authentication;

if (googleAuth != null) {
  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

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

フェイスブック

開始する前に、 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 FirebaseAuth.instance.signInWithPopup(appleProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(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 FirebaseAuth.instance.signInWithPopup(microsoftProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(microsoftProvider);
  }
}

ツイッター

API キーと API シークレットが設定されたFirebase コンソールで「Twitter」サインイン プロバイダが有効になっていることを確認します。 Firebase OAuth リダイレクト URI (例: my-app-12345.firebaseapp.com/__/auth/handler) が、 Twitter アプリの config のアプリの設定ページで認証コールバック URL として設定されていることを確認します。

アプリによっては、昇格された API アクセスを要求する必要がある場合もあります。

iOS+

iOS ガイドのステップ 1 で説明されているように、カスタム URL スキームを構成する必要があります。

アンドロイド

アプリの SHA-1 フィンガープリントをまだ指定していない場合は、Firebase コンソールの[設定] ページから指定してください。アプリの SHA-1 フィンガープリントを取得する方法の詳細については、クライアントの認証を参照してください。

ウェブ

すぐに使用できます。

import 'package:firebase_auth/firebase_auth.dart';

Future<void> _signInWithTwitter() async {
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(twitterProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(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 FirebaseAuth.instance.signInWithProvider(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);
}

ヤフー

API キーと API シークレットが設定されたFirebase コンソールで「Yahoo」サインイン プロバイダが有効になっていることを確認します。また、アプリの Yahoo Developer Network 構成で、Firebase OAuth リダイレクト URI (例: my-app-12345.firebaseapp.com/__/auth/handler) がリダイレクト URI として設定されていることを確認してください。

iOS+

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

アンドロイド

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

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

ウェブ

すぐに使用できます。

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithYahoo() async {
  final yahooProvider = YahooAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(yahooProvider);
  } else {
    await _auth.signInWithProvider(yahooProvider);
  }
}

OAuth アクセス トークンの使用

AuthProvider を使用すると、次の要求を行うことで、プロバイダーに関連付けられたアクセス トークンを取得できます。

final appleProvider = AppleAuthProvider();

final user = await FirebaseAuth.instance.signInWithProvider(appleProvider);
final accessToken = user.credential?.accessToken;

// You can send requests with the `accessToken`

認証プロバイダーのリンク

プロバイダーを現在のユーザーにリンクする場合は、次のメソッドを使用できます。

最終的なappleProvider = AppleAuthProvider();

if (kIsWeb) { await FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider);

// linkWithRedirectも使用できます } else { await FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider); }

// あなたの匿名ユーザーは、Sign In With Apple に接続できるようにアップグレードされました ```

プロバイダーで再認証する

同じパターンをreauthenticateWithProviderで使用できます。これを使用して、最近のログインが必要な機密操作の新しい資格情報を取得できます。

final appleProvider = AppleAuthProvider();

if (kIsWeb) {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithPopup(appleProvider);
  
  // Or you can reauthenticate with a redirection
  // await FirebaseAuth.instance.currentUser?.reauthenticateWithRedirect(appleProvider);
} else {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithProvider(appleProvider);
}

// You can now perform sensitive operations