Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Webアプリに多要素認証を追加する

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

IdentityPlatformを使用したFirebaseAuthenticationにアップグレードした場合は、SMS多要素認証をWebアプリに追加できます。

多要素認証は、アプリのセキュリティを強化します。攻撃者はパスワードやソーシャルアカウントを侵害することがよくありますが、テキストメッセージの傍受はより困難です。

あなたが始める前に

  1. 多要素認証をサポートするプロバイダーを少なくとも1つ有効にします。電話認証、匿名認証、Apple Game Centerを除き、すべてのプロバイダーがMFAをサポートしています。

  2. アプリがユーザーのメールを確認していることを確認します。 MFAには電子メールによる確認が必要です。これにより、悪意のある攻撃者が自分が所有していない電子メールでサービスに登録し、2番目の要素を追加して実際の所有者をロックアウトするのを防ぎます。

マルチテナンシーの使用

マルチテナント環境で使用するために多要素認証を有効にしている場合は、必ず次の手順を実行してください(このドキュメントの残りの手順に加えて)。

  1. GCPコンソールで、操作するテナントを選択します。

  2. コードで、 AuthインスタンスのtenantIdフィールドをテナントのIDに設定します。例えば:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth(app);
    auth.tenantId = "myTenantId1";
    

    Web version 8

    firebase.auth().tenantId = 'myTenantId1';
    

多要素認証の有効化

  1. Firebaseコンソールの[認証]>[ログイン方法]ページを開きます。

  2. [詳細設定]セクションで、 SMS多要素認証を有効にします。

    アプリのテストに使用する電話番号も入力する必要があります。オプションですが、開発中のスロットリングを回避するために、テスト電話番号を登録することを強くお勧めします。

  3. アプリのドメインをまだ承認していない場合は、Firebaseコンソールの[認証]>[設定]ページの許可リストに追加します。

登録パターンの選択

アプリに多要素認証が必要かどうか、およびユーザーを登録する方法とタイミングを選択できます。一般的なパターンには次のものがあります。

  • 登録の一部として、ユーザーの2番目の要素を登録します。アプリですべてのユーザーに多要素認証が必要な場合は、この方法を使用してください。

  • 登録時に2番目の要素を登録するためのスキップ可能なオプションを提供します。多要素認証を奨励したいが必須ではないアプリは、このアプローチを好むかもしれません。

  • サインアップ画面の代わりに、ユーザーのアカウントまたはプロファイル管理ページから2番目の要素を追加する機能を提供します。これにより、登録プロセス中の摩擦を最小限に抑えながら、セキュリティに敏感なユーザーが多要素認証を利用できるようになります。

  • ユーザーがセキュリティ要件が強化された機能にアクセスする場合は、2番目の要素を段階的に追加する必要があります。

reCAPTCHAベリファイアの設定

SMSコードを送信する前に、reCAPTCHAベリファイアを設定する必要があります。 FirebaseはreCAPTCHAを使用して、電話番号の確認リクエストがアプリで許可されているドメインの1つから送信されるようにすることで不正使用を防ぎます。

reCAPTCHAクライアントを手動で設定する必要はありません。クライアントSDKのRecaptchaVerifierオブジェクトは、必要なクライアントキーとシークレットを自動的に作成して初期化します。

目に見えないreCAPTCHAを使用する

RecaptchaVerifierオブジェクトは、非表示のreCAPTCHAをサポートします。これにより、多くの場合、対話を必要とせずにユーザーを確認できます。非表示のreCAPTCHAを使用するには、 sizeパラメーターをinvisibleに設定してRecaptchaVerifierを作成し、多要素登録を開始するUI要素のIDを指定します。

Web version 9

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier("sign-in-button", {
    "size": "invisible",
    "callback": function(response) {
        // reCAPTCHA solved, you can proceed with
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
    }
}, auth);

Web version 8

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
  // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
  onSolvedRecaptcha();
}
});

reCAPTCHAウィジェットの使用

表示可能なreCAPTCHAウィジェットを使用するには、ウィジェットを含むHTML要素を作成してから、UIコンテナーのIDを使用してRecaptchaVerifierオブジェクトを作成します。オプションで、reCAPTCHAが解決または期限切れになったときに呼び出されるコールバックを設定することもできます。

Web version 9

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",

    // Optional reCAPTCHA parameters.
    {
      "size": "normal",
      "callback": function(response) {
        // reCAPTCHA solved, you can proceed with 
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
      },
      "expired-callback": function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
      }
    }, auth
);

Web version 8

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  // Optional reCAPTCHA parameters.
  {
    'size': 'normal',
    'callback': function(response) {
      // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
      // ...
      onSolvedRecaptcha();
    },
    'expired-callback': function() {
      // Response expired. Ask user to solve reCAPTCHA again.
      // ...
    }
  });

reCAPTCHAの事前レンダリング

オプションで、2要素登録を開始する前にreCAPTCHAを事前にレンダリングできます。

Web version 9

recaptchaVerifier.render()
    .then(function (widgetId) {
        window.recaptchaWidgetId = widgetId;
    });

Web version 8

recaptchaVerifier.render()
  .then(function(widgetId) {
    window.recaptchaWidgetId = widgetId;
  });

render()が解決した後、reCAPTCHAのウィジェットIDを取得します。これを使用して、 reCAPTCHAAPIを呼び出すことができます。

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

2番目の要素を登録する

ユーザーの新しい二次要素を登録するには:

  1. ユーザーを再認証します。

  2. ユーザーに電話番号を入力してもらいます。

  3. 前のセクションで説明したように、reCAPTCHAベリファイアを初期化します。 RecaptchaVerifierインスタンスがすでに構成されている場合は、この手順をスキップしてください。

    Web version 9

    import { RecaptchaVerifier } from "firebase/auth";
    
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    Web version 8

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. ユーザーの多要素セッションを取得します。

    Web version 9

    import { multiFactor } from "firebase/auth";
    
    multiFactor(user).getSession().then(function (multiFactorSession) {
        // ...
    });
    

    Web version 8

    user.multiFactor.getSession().then(function(multiFactorSession) {
      // ...
    })
    
  5. ユーザーの電話番号と多要素セッションを使用してPhoneInfoOptionsオブジェクトを初期化します。

    Web version 9

    // Specify the phone number and pass the MFA session.
    const phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    

    Web version 8

    // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    
  6. ユーザーの電話に確認メッセージを送信します。

    Web version 9

    import { PhoneAuthProvider } from "firebase/auth";
    
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed to complete enrollment.
        });
    

    Web version 8

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for enrollment completion.
      })
    

    必須ではありませんが、SMSメッセージを受信すること、および標準料金が適用されることを事前にユーザーに通知することをお勧めします。

  7. リクエストが失敗した場合は、reCAPTCHAをリセットしてから、前の手順を繰り返して、ユーザーが再試行できるようにします。 reCAPTCHAトークンは1回限りの使用であるため、 verifyPhoneNumber()はエラーをスローしたときにreCAPTCHAを自動的にリセットすることに注意してください。

    Web version 9

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    

    Web version 8

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    
  8. SMSコードが送信されたら、ユーザーにコードを確認するように依頼します。

    Web version 9

    // Ask user for the verification code. Then:
    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    Web version 8

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  9. PhoneAuthCredentialを使用してMultiFactorAssertionオブジェクトを初期化します。

    Web version 9

    import { PhoneMultiFactorGenerator } from "firebase/auth";
    
    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    Web version 8

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  10. 登録を完了します。オプションで、2番目の要素の表示名を指定できます。これは、認証フロー中に電話番号がマスクされるため(たとえば、+ 1 ****** 1234)、複数の2番目の要素を持つユーザーに役立ちます。

    Web version 9

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
    

    Web version 8

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
    

以下のコードは、2番目の要素を登録する完全な例を示しています。

Web version 9

import {
    multiFactor, PhoneAuthProvider, PhoneMultiFactorGenerator,
    RecaptchaVerifier
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
multiFactor(user).getSession()
    .then(function (multiFactorSession) {
        // Specify the phone number and pass the MFA session.
        const phoneInfoOptions = {
            phoneNumber: phoneNumber,
            session: multiFactorSession
        };

        const phoneAuthProvider = new PhoneAuthProvider(auth);

        // Send SMS verification code.
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
    }).then(function (verificationId) {
        // Ask user for the verification code. Then:
        const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
        const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

        // Complete enrollment.
        return multiFactor(user).enroll(multiFactorAssertion, mfaDisplayName);
    });

Web version 8

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
user.multiFactor.getSession().then(function(multiFactorSession) {
  // Specify the phone number and pass the MFA session.
  var phoneInfoOptions = {
    phoneNumber: phoneNumber,
    session: multiFactorSession
  };
  var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
  // Send SMS verification code.
  return phoneAuthProvider.verifyPhoneNumber(
      phoneInfoOptions, recaptchaVerifier);
})
.then(function(verificationId) {
  // Ask user for the verification code.
  var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
  var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
  // Complete enrollment.
  return user.multiFactor.enroll(multiFactorAssertion, mfaDisplayName);
});

おめでとう!ユーザーの2番目の認証要素を正常に登録しました。

2番目の要素でユーザーをサインインする

2要素SMS検証を使用してユーザーにサインインするには:

  1. 最初の要素でユーザーをサインインしてから、 auth/multi-factor-auth-requiredエラーをキャッチします。このエラーには、リゾルバー、登録された2番目の要素に関するヒント、およびユーザーが最初の要素で正常に認証されたことを証明する基になるセッションが含まれます。

    たとえば、ユーザーの最初の要素が電子メールとパスワードだった場合:

    Web version 9

    import { getAuth, getMultiFactorResolver} from "firebase/auth";
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
        .then(function (userCredential) {
            // User successfully signed in and is not enrolled with a second factor.
        })
        .catch(function (error) {
            if (error.code == 'auth/multi-factor-auth-required') {
                // The user is a multi-factor user. Second factor challenge is required.
                resolver = getMultiFactorResolver(auth, error);
                // ...
            } else if (error.code == 'auth/wrong-password') {
                // Handle other errors such as wrong password.
            }
    });
    

    Web version 8

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(function(userCredential) {
        // User successfully signed in and is not enrolled with a second factor.
      })
      .catch(function(error) {
        if (error.code == 'auth/multi-factor-auth-required') {
          // The user is a multi-factor user. Second factor challenge is required.
          resolver = error.resolver;
          // ...
        } else if (error.code == 'auth/wrong-password') {
          // Handle other errors such as wrong password.
        } ...
      });
    

    ユーザーの最初の要素がOAuth、SAML、OIDCなどのフェデレーションプロバイダーである場合は、 signInWithPopup()またはsignInWithRedirect() )を呼び出した後にエラーをキャッチします。

  2. ユーザーが複数の二次要素を登録している場合は、どれを使用するかをユーザーに尋ねます。

    Web version 9

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    
    if (resolver.hints[selectedIndex].factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
        // User selected a phone second factor.
        // ...
    } else {
        // Unsupported second factor.
        // Note that only phone second factors are currently supported.
    }
    

    Web version 8

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    if (resolver.hints[selectedIndex].factorId === firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
      // User selected a phone second factor.
      // ...
    } else {
      // Unsupported second factor.
      // Note that only phone second factors are currently supported.
    }
    
  3. 前のセクションで説明したように、reCAPTCHAベリファイアを初期化します。 RecaptchaVerifierインスタンスがすでに構成されている場合は、この手順をスキップしてください。

    Web version 9

    import { RecaptchaVerifier } from "firebase/auth";
    
    recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    Web version 8

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. PhoneInfoOptionsオブジェクトを、ユーザーの電話番号と多要素セッションで初期化します。これらの値は、 auth/multi-factor-auth-requiredエラーに渡されるresolverオブジェクトに含まれています。

    Web version 9

    const phoneInfoOptions = {
        multiFactorHint: resolver.hints[selectedIndex],
        session: resolver.session
    };
    

    Web version 8

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };
    
  5. ユーザーの電話に確認メッセージを送信します。

    Web version 9

    // Send SMS verification code.
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed for sign-in completion.
        });
    

    Web version 8

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for sign-in completion.
      })
    
  6. リクエストが失敗した場合は、reCAPTCHAをリセットしてから、前の手順を繰り返して、ユーザーが再試行できるようにします。

    Web version 9

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    

    Web version 8

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    
  7. SMSコードが送信されたら、ユーザーにコードを確認するように依頼します。

    Web version 9

    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    Web version 8

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  8. PhoneAuthCredentialを使用してMultiFactorAssertionオブジェクトを初期化します。

    Web version 9

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    Web version 8

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  9. resolver.resolveSignIn()を呼び出して、2次認証を完了します。次に、元のサインイン結果にアクセスできます。これには、標準のプロバイダー固有のデータと認証クレデンシャルが含まれます。

    Web version 9

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
        .then(function (userCredential) {
            // userCredential will also contain the user, additionalUserInfo, optional
            // credential (null for email/password) associated with the first factor sign-in.
    
            // For example, if the user signed in with Google as a first factor,
            // userCredential.additionalUserInfo will contain data related to Google 
            // provider that the user signed in with.
            // - user.credential contains the Google OAuth credential.
            // - user.credential.accessToken contains the Google OAuth access token.
            // - user.credential.idToken contains the Google OAuth ID token.
        });
    

    Web version 8

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
      .then(function(userCredential) {
        // userCredential will also contain the user, additionalUserInfo, optional
        // credential (null for email/password) associated with the first factor sign-in.
        // For example, if the user signed in with Google as a first factor,
        // userCredential.additionalUserInfo will contain data related to Google provider that
        // the user signed in with.
        // user.credential contains the Google OAuth credential.
        // user.credential.accessToken contains the Google OAuth access token.
        // user.credential.idToken contains the Google OAuth ID token.
      });
    

以下のコードは、多要素ユーザーのサインインの完全な例を示しています。

Web version 9

import {
    getAuth,
    getMultiFactorResolver,
    PhoneAuthProvider,
    PhoneMultiFactorGenerator,
    RecaptchaVerifier,
    signInWithEmailAndPassword
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
    .then(function (userCredential) {
        // User is not enrolled with a second factor and is successfully
        // signed in.
        // ...
    })
    .catch(function (error) {
        if (error.code == 'auth/multi-factor-auth-required') {
            const resolver = getMultiFactorResolver(auth, error);
            // Ask user which second factor to use.
            if (resolver.hints[selectedIndex].factorId ===
                PhoneMultiFactorGenerator.FACTOR_ID) {
                const phoneInfoOptions = {
                    multiFactorHint: resolver.hints[selectedIndex],
                    session: resolver.session
                };
                const phoneAuthProvider = new PhoneAuthProvider(auth);
                // Send SMS verification code
                return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
                    .then(function (verificationId) {
                        // Ask user for the SMS verification code. Then:
                        const cred = PhoneAuthProvider.credential(
                            verificationId, verificationCode);
                        const multiFactorAssertion =
                            PhoneMultiFactorGenerator.assertion(cred);
                        // Complete sign-in.
                        return resolver.resolveSignIn(multiFactorAssertion)
                    })
                    .then(function (userCredential) {
                        // User successfully signed in with the second factor phone number.
                    });
            } else {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

Web version 8

var resolver;
firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(userCredential) {
    // User is not enrolled with a second factor and is successfully signed in.
    // ...
  })
  .catch(function(error) {
    if (error.code == 'auth/multi-factor-auth-required') {
      resolver = error.resolver;
      // Ask user which second factor to use.
      if (resolver.hints[selectedIndex].factorId ===
          firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
        var phoneInfoOptions = {
          multiFactorHint: resolver.hints[selectedIndex],
          session: resolver.session
        };
        var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
        // Send SMS verification code
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
          .then(function(verificationId) {
            // Ask user for the SMS verification code.
            var cred = firebase.auth.PhoneAuthProvider.credential(
                verificationId, verificationCode);
            var multiFactorAssertion =
                firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
            // Complete sign-in.
            return resolver.resolveSignIn(multiFactorAssertion)
          })
          .then(function(userCredential) {
            // User successfully signed in with the second factor phone number.
          });
      } else {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

おめでとう!多要素認証を使用してユーザーに正常にサインインしました。

次は何ですか