複数のプロバイダをアカウントにリンクする

この記事では、複数のプロバイダを 1 つの Identity Platform アカウントにリンクする方法について説明します。

Identity Platform は一意の ID を使用してユーザーを識別します。これにより、ユーザーは異なるプロバイダを使用して同じアカウントにログインできます。たとえば、最初に電話番号で登録したユーザーは、後で Google アカウントをリンクすると、どちらの方法でもログインできます。

始める前に

複数の ID プロバイダのサポートをアプリに追加する。

アカウントのリンクを有効または無効にする

アカウントのリンク設定により、異なるプロバイダを使用して同じメールアドレスでログインしようとした場合の Identity Platform の処理方法が決まります。

同じメールアドレスを使用するアカウントをリンクする: Identity Platform では、使用中のメールアドレスを使用してユーザーがログインしようとすると、エラーが発生します。アプリでこのエラーを検出し、新しいプロバイダを既存のアカウントにリンクできます。
ID プロバイダごとに複数のアカウントを作成する: ユーザーが別のプロバイダでログインするたびに、新しい Identity Platform のユーザーアカウントが作成されます。

設定を選択するには:

Google Cloud コンソールで Identity Platform の [設定] ページに移動します。

[設定] ページに移動
[ユーザーアカウントのリンク] で設定を選択します。
[保存] をクリックします。

連携プロバイダの認証情報をリンクする

連携プロバイダから認証情報をリンクするには:

任意の認証プロバイダまたは認証メソッドでユーザーのログインを行います。

ユーザーのアカウントにリンクするプロバイダに対応するプロバイダオブジェクトを取得します。例:

Web バージョン 9

import { GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider } from "firebase/auth";

const googleProvider = new GoogleAuthProvider();
const facebookProvider = new FacebookAuthProvider();
const twitterProvider = new TwitterAuthProvider();
const githubProvider = new GithubAuthProvider();auth_get_providers.js

Web バージョン 8

var googleProvider = new firebase.auth.GoogleAuthProvider();
var facebookProvider = new firebase.auth.FacebookAuthProvider();
var twitterProvider = new firebase.auth.TwitterAuthProvider();
var githubProvider = new firebase.auth.GithubAuthProvider();link-multiple-accounts.js

リンク先となるプロバイダにログインするようユーザーに促します。ポップアップウィンドウを開く、または現在のページをリダイレクトできます。モバイルデバイスでは、リダイレクトの方がユーザーにとってより簡単な方法です。

ポップアップを表示するには、linkWithPopup() を呼び出します。

Web バージョン 9

import { getAuth, linkWithPopup, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});auth_link_with_popup.js

Web バージョン 8

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});link-multiple-accounts.js

ページをリダイレクトするには、まず linkWithRedirect() を呼び出します。

signInWithRedirect、linkWithRedirect、reauthenticateWithRedirect を使用する場合は、ベストプラクティスに従ってください。

Web バージョン 9

import { getAuth, linkWithRedirect, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();

const auth = getAuth();
linkWithRedirect(auth.currentUser, provider)
  .then(/* ... */)
  .catch(/* ... */);auth_link_with_redirect.js

Web バージョン 8

auth.currentUser.linkWithRedirect(provider)
  .then(/* ... */)
  .catch(/* ... */);link-multiple-accounts.js

ユーザーがログインすると、リダイレクトされてアプリに戻ります。その後、getRedirectResult() を呼び出してログイン結果を取得できます。

Web バージョン 9

import { getRedirectResult } from "firebase/auth";
getRedirectResult(auth).then((result) => {
  const credential = GoogleAuthProvider.credentialFromResult(result);
  if (credential) {
    // Accounts successfully linked.
    const user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  // ...
});auth_get_redirect_result.js

Web バージョン 8

auth.getRedirectResult().then((result) => {
  if (result.credential) {
    // Accounts successfully linked.
    var credential = result.credential;
    var user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  // ...
});link-multiple-accounts.js

これで、連携プロバイダでユーザーのアカウントが Identity Platform アカウントにリンクされ、プロバイダを使用してログインできるようになります。

メールとパスワードの認証情報をリンクする

既存のユーザーアカウントにメールアドレスとパスワードを追加するには:

任意の ID プロバイダまたは ID メソッドでユーザーのログインを行います。
ユーザーにメールアドレスとパスワードの入力を要求します。
そのメールアドレスとパスワードを使って AuthCredential オブジェクトを作成します。
Web バージョン 9

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
import { EmailAuthProvider } from "firebase/auth";

const credential = EmailAuthProvider.credential(email, password);auth_make_email_credential.js
```
Web バージョン 8
```
var credential = firebase.auth.EmailAuthProvider.credential(email, password);link-multiple-accounts.js
```

ログインしているユーザーの linkWithCredential() メソッドに AuthCredential オブジェクトを渡します。

Web バージョン 9

import { getAuth, linkWithCredential } from "firebase/auth";

const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    const user = usercred.user;
    console.log("Account linking success", user);
  }).catch((error) => {
    console.log("Account linking error", error);
  });auth_simple_link.js

Web バージョン 8

auth.currentUser.linkWithCredential(credential)
  .then((usercred) => {
    var user = usercred.user;
    console.log("Account linking success", user);
  }).catch((error) => {
    console.log("Account linking error", error);
  });link-multiple-accounts.js

これで、メールとパスワードの認証情報がユーザーの Identity Platform アカウントにリンクされ、メールとパスワードを使用してログインできるようになりました。

連携プロバイダの認証情報は、別のメールアドレスのメールアドレスとパスワードアカウントにリンクできることに注意してください。この場合、連携プロバイダに対応するメールアドレスを使用して、別のメールアドレスとパスワードアカウントを作成できます。

account-exists-with-different-credential エラーを処理する

Google Cloud コンソールで [同じメールアドレスを使用するアカウントをリンク] 設定を有効にしている場合、ユーザーが、あるプロバイダ（Google など）用の既存のメールアドレスで、別のプロバイダ（SAML など）にログインしようとすると、エラー auth/account-exists-with-different-credential が（AuthCredential オブジェクトとともに）スローされます。

このエラーを処理するには、既存のプロバイダでログインするようユーザーに求めます。次に、linkWithCredential()、linkWithPopup()、linkWithRedirect() のいずれかを呼び出して、AuthCredential を使用して新しいプロバイダをアカウントに関連付けます。

次の例は、ユーザーが Facebook を使用してログインしようとした際に発生した、このエラーを処理する方法を示しています。

JaveScript

// User tries to sign in with Facebook.
auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()).catch(err => {
  // User's email already exists.
  if (err.code === 'auth/account-exists-with-different-credential') {
    // The pending Facebook credential.
    var pendingCred = err.credential;
    // The provider account's email address.
    var email = err.email;
    // Get the sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(methods => {
      // If the user has several sign-in methods, the first method
      // in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // TODO: Ask the user for their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword();
        auth.signInWithEmailAndPassword(email, password).then(result => {
          return result.user.linkWithCredential(pendingCred);
        }).then(() => {
          // Facebook account successfully linked to the existing user.
          goToApp();
        });
        return;
      }
      // All other cases are external providers.
      // Construct provider object for that provider.
      // TODO: Implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an
      // account with a different provider, and validate they want to sign in
      // with the new provider.
      // Note: Browsers usually block popups triggered asynchronously, so in
      // real app, you should ask the user to click on a "Continue" button
      // that will trigger signInWithPopup().
      auth.signInWithPopup(provider).then(result => {
        // Note: Identity Platform doesn't control the provider's sign-in
        // flow, so it's possible for the user to sign in with an account
        // with a different email from the first one.

        // Link the Facebook credential. We have access to the pending
        // credential, so we can directly call the link method.
        result.user.linkWithCredential(pendingCred).then(usercred => {
          // Success.
          goToApp();
        });
      });
    });
  }
});

リダイレクトの使用はポップアップと似ていますが、ページのリダイレクト間で保留中の認証情報をキャッシュに保存する必要がある点が異なります（セッションストレージを使用するなど）。

Google や Microsoft などの一部のプロバイダは、メールとソーシャル ID プロバイダの両方としてサービスを提供している点に注意してください。メールプロバイダは、ホストされているメールドメインに関連するすべてのアドレスに対して信頼できると見なされます。つまり、同じプロバイダによってホストされているメールアドレスでユーザーがログインした場合、このエラーは生成されません（たとえば、@gmail.com メールアドレスを使用して Google にログイン場合や、@live.com または @outlook.com を使用して Microsoft にログインする場合など）。

アカウントを手動で統合する

ユーザーが同じプロバイダを使用して別のユーザーアカウントとすでにリンクされた認証情報でログインしようとすると、アカウントリンクのための Client SDK の組み込みメソッドは失敗します。この場合は、アカウントを手動で統合してから、2 番目のアカウントを削除する必要があります。例:

JaveScript

// Sign in first account.
const result1 = await auth.signInWithCredential(cred1);
const user1 = result1.user;
// Try to link a credential that belongs to an existing account
try {
  await user1.linkWithCredential(cred2);
} catch (error) {
  // cred2 already exists so an error is thrown.
  const result2 = await auth.signInWithCredential(error.credential);
  const user2 = result2.user;
  // Merge the data.
  mergeData(user1, user2);
  // Delete one of the accounts, and try again.
  await user2.delete();
  // Linking now will work.
  await user1.linkWithCredential(result2.credential);
}

プロバイダのリンクを解除する

ユーザーのアカウントから、プロバイダのリンクを解除できます。ユーザーは、そのプロバイダでの認証はできなくなります。

プロバイダのリンクを解除するには、プロバイダ ID を unlink() メソッドに渡します。ユーザーにリンクされている認証プロバイダのプロバイダ ID は providerData プロパティから取得できます。

Web バージョン 9

import { getAuth, unlink } from "firebase/auth";

const auth = getAuth();
unlink(auth.currentUser, providerId).then(() => {
  // Auth provider unlinked from account
  // ...
}).catch((error) => {
  // An error happened
  // ...
});auth_unlink_provider.js

Web バージョン 8

user.unlink(providerId).then(() => {
  // Auth provider unlinked from account
  // ...
}).catch((error) => {
  // An error happened
  // ...
});link-multiple-accounts.js

次のステップ

さまざまな ID プロバイダのサポートをアプリに追加する。
プロバイダをプログラムで管理する方法を学習する。