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

ウェブ

ウェブ上では、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 Developerアプリのセットアップを開始する前に、セットアッププロセスに従ってFacebookログインを有効にしてください。

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

iOS+とAndroid

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

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

プラグインのドキュメントの手順に従って、AndroidとiOSの両方のFacebookSDKが正しく初期化されていることを確認する必要があります。完了したら、サインインフローをトリガーし、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);
}

ウェブ

ウェブ上では、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+とAndroid

サインインをAppleで構成し、Appleサインインプロバイダーとして有効にする前に。

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

sign_in_with_appleプラグインとcryptoパッケージをインストールします。

dependencies:
  sign_in_with_apple: ^3.0.0
  crypto: ^3.0.1
import 'dart:convert';
import 'dart:math';

import 'package:crypto/crypto.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

/// Generates a cryptographically secure random nonce, to be included in a
/// credential request.
String generateNonce([int length = 32]) {
  const charset =
      '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
  final random = Random.secure();
  return List.generate(length, (_) => charset[random.nextInt(charset.length)])
      .join();
}

/// Returns the sha256 hash of [input] in hex notation.
String sha256ofString(String input) {
  final bytes = utf8.encode(input);
  final digest = sha256.convert(bytes);
  return digest.toString();
}

Future<UserCredential> signInWithApple() async {
  // To prevent replay attacks with the credential returned from Apple, we
  // include a nonce in the credential request. When signing in with
  // Firebase, the nonce in the id token returned by Apple, is expected to
  // match the sha256 hash of `rawNonce`.
  final rawNonce = generateNonce();
  final nonce = sha256ofString(rawNonce);

  // Request credential for the currently signed in Apple account.
  final appleCredential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
    nonce: nonce,
  );

  // Create an `OAuthCredential` from the credential returned by Apple.
  final oauthCredential = OAuthProvider("apple.com").credential(
    idToken: appleCredential.identityToken,
    rawNonce: rawNonce,
  );

  // Sign in the user with Firebase. If the nonce we generated earlier does
  // not match the nonce in `appleCredential.identityToken`, sign in will fail.
  return await FirebaseAuth.instance.signInWithCredential(oauthCredential);
}

ウェブ

サインインをAppleで構成し、Appleサインインプロバイダーとして有効にする前に。

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  // Create and configure an OAuthProvider for Sign In with Apple.
  final provider = OAuthProvider("apple.com")
    ..addScope('email')
    ..addScope('name');

  // Sign in the user with Firebase.
  return await FirebaseAuth.instance.signInWithPopup(provider);
}

別の方法は、 signInWithRedirectを使用することです。その場合、ブラウザーはアプリから移動し、 getRedirectResultを使用してアプリの起動時に認証結果を確認する必要があります。

ツイッター

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

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

ウェブ

ウェブ上では、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アプリをセットアップし、 Firebase Consoleで「GitHub」サインインプロバイダーが有効になっていて、クライアントIDとシークレットが設定されていることと、GitHubアプリでコールバックURLが設定されていることを確認してください。

iOS+とAndroid

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

iOSの場合、iOSガイドの手順1で説明されているように、カスタムURLスキームを追加します。

import 'package:github_sign_in/github_sign_in.dart';

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

  return await _auth.signInWithAuthProvider(githubProvider);
}

ウェブ

ウェブ上では、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);
}