Добавьте многофакторную аутентификацию в свое веб-приложение

Если вы обновили аутентификацию Firebase с помощью Identity Platform, вы можете добавить многофакторную аутентификацию по SMS в свое веб-приложение.

Многофакторная аутентификация повышает безопасность вашего приложения. Хотя злоумышленники часто компрометируют пароли и учетные записи в социальных сетях, перехватить текстовое сообщение сложнее.

Прежде чем вы начнете

  1. Включите хотя бы одного поставщика, поддерживающего многофакторную аутентификацию. Каждый провайдер поддерживает MFA, за исключением аутентификации по телефону, анонимной аутентификации и Apple Game Center.

  2. Убедитесь, что ваше приложение проверяет электронную почту пользователей. MFA требует подтверждения электронной почты. Это не позволяет злоумышленникам зарегистрироваться в службе с адресом электронной почты, которым они не владеют, а затем заблокировать реального владельца, добавив второй фактор.

Использование мультитенантности

Если вы включаете многофакторную аутентификацию для использования в мультитенантной среде, обязательно выполните следующие шаги (в дополнение к остальным инструкциям в этом документе):

  1. В консоли GCP выберите арендатора, с которым хотите работать.

  2. В своем коде установите в поле tenantId экземпляра Auth идентификатор вашего клиента. Например:

    Веб-модульный API

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

    Веб-API в пространстве имен

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

Включение многофакторной аутентификации

  1. Откройте страницу «Аутентификация» > «Метод входа» в консоли Firebase.

  2. В разделе «Дополнительно» включите многофакторную аутентификацию по SMS .

    Вам также следует ввести номера телефонов, с которыми вы будете тестировать свое приложение. Регистрация тестовых телефонных номеров не является обязательной, но настоятельно рекомендуется, чтобы избежать регулирования во время разработки.

  3. Если вы еще не авторизовали домен своего приложения, добавьте его в список разрешений на странице «Аутентификация» > «Настройки» консоли Firebase.

Выбор формы регистрации

Вы можете выбрать, требует ли ваше приложение многофакторную аутентификацию, а также как и когда регистрировать пользователей. Некоторые распространенные шаблоны включают в себя:

  • Зарегистрируйте второй фактор пользователя в рамках регистрации. Используйте этот метод, если ваше приложение требует многофакторной аутентификации для всех пользователей.

  • Предложите возможность пропуска для регистрации второго фактора во время регистрации. Приложения, которые хотят поощрять, но не требуют многофакторную аутентификацию, могут предпочесть этот подход.

  • Предоставьте возможность добавлять второй фактор со страницы управления учетной записью или профилем пользователя вместо экрана регистрации. Это сводит к минимуму трудности в процессе регистрации, одновременно делая многофакторную аутентификацию доступной для пользователей, чувствительных к безопасности.

  • Требуйте постепенного добавления второго фактора, когда пользователь хочет получить доступ к функциям с повышенными требованиями безопасности.

Настройка верификатора reCAPTCHA

Прежде чем вы сможете отправлять SMS-коды, вам необходимо настроить верификатор reCAPTCHA. Firebase использует reCAPTCHA для предотвращения злоупотреблений, гарантируя, что запросы на проверку номера телефона поступают из одного из разрешенных доменов вашего приложения.

Вам не нужно вручную настраивать клиент reCAPTCHA; Объект RecaptchaVerifier клиентского SDK автоматически создает и инициализирует все необходимые клиентские ключи и секреты.

Использование невидимой reCAPTCHA

Объект RecaptchaVerifier поддерживает невидимую reCAPTCHA , которая часто позволяет проверить пользователя, не требуя какого-либо взаимодействия. Чтобы использовать невидимый reCAPTCHA, создайте RecaptchaVerifier с параметром size равным invisible , и укажите идентификатор элемента пользовательского интерфейса, который запускает многофакторную регистрацию:

Веб-модульный API

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

Веб-API в пространстве имен

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, содержащий виджет, а затем создайте объект RecaptchaVerifier с идентификатором контейнера пользовательского интерфейса. Вы также можете дополнительно установить обратные вызовы, которые вызываются, когда reCAPTCHA решена или истекает срок ее действия:

Веб-модульный API

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

Веб-API в пространстве имен

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

При желании вы можете предварительно отобразить reCAPTCHA перед началом двухфакторной регистрации:

Веб-модульный API

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

Веб-API в пространстве имен

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

После разрешения render() вы получаете идентификатор виджета reCAPTCHA, который можно использовать для вызовов API reCAPTCHA :

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

RecaptchaVerifier абстрагирует эту логику с помощью метода проверки , поэтому вам не нужно напрямую обрабатывать переменную grecaptcha .

Регистрация второго фактора

Чтобы зарегистрировать новый вторичный фактор для пользователя:

  1. Повторно авторизуйте пользователя.

  2. Попросите пользователя ввести свой номер телефона.

  3. Инициализируйте верификатор reCAPTCHA, как показано в предыдущем разделе. Пропустите этот шаг, если экземпляр RecaptchaVerifier уже настроен:

    Веб-модульный API

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

    Веб-API в пространстве имен

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. Получите многофакторную сессию для пользователя:

    Веб-модульный API

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

    Веб-API в пространстве имен

    user.multiFactor.getSession().then(function(multiFactorSession) {
      // ...
    })
    
  5. Инициализируйте объект PhoneInfoOptions с номером телефона пользователя и многофакторным сеансом:

    Веб-модульный API

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

    Веб-API в пространстве имен

    // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    
  6. Отправьте подтверждающее сообщение на телефон пользователя:

    Веб-модульный API

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

    Веб-API в пространстве имен

    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, а затем повторите предыдущий шаг, чтобы пользователь мог повторить попытку. Обратите внимание, что verifyPhoneNumber() автоматически сбрасывает reCAPTCHA, когда выдает ошибку, поскольку токены reCAPTCHA предназначены только для одноразового использования.

    Веб-модульный API

    recaptchaVerifier.clear();
    

    Веб-API в пространстве имен

    recaptchaVerifier.clear();
    
  8. После отправки SMS-кода попросите пользователя подтвердить код:

    Веб-модульный API

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

    Веб-API в пространстве имен

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  9. Инициализируйте объект MultiFactorAssertion с помощью PhoneAuthCredential :

    Веб-модульный API

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

    Веб-API в пространстве имен

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  10. Завершите регистрацию. При необходимости можно указать отображаемое имя для второго фактора. Это полезно для пользователей с несколькими вторыми факторами, поскольку номер телефона маскируется во время процесса аутентификации (например, +1******1234).

    Веб-модульный API

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

    Веб-API в пространстве имен

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

В приведенном ниже коде показан полный пример регистрации второго фактора:

Веб-модульный API

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

Веб-API в пространстве имен

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

Поздравляем! Вы успешно зарегистрировали второй фактор аутентификации для пользователя.

Вход пользователей со вторым фактором

Чтобы войти в систему пользователя с двухфакторной SMS-проверкой:

  1. Войдите в систему, используя его первый фактор, а затем поймайте ошибку auth/multi-factor-auth-required . Эта ошибка содержит преобразователь, подсказки о зарегистрированных втором факторе и базовый сеанс, подтверждающий успешную аутентификацию пользователя с помощью первого фактора.

    Например, если первым фактором пользователя был адрес электронной почты и пароль:

    Веб-модульный API

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

    Веб-API в пространстве имен

    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. Если у пользователя зарегистрировано несколько вторичных факторов, спросите его, какой из них использовать:

    Веб-модульный API

    // 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 if (resolver.hints[selectedIndex].factorId ===
               TotpMultiFactorGenerator.FACTOR_ID) {
        // User selected a TOTP second factor.
        // ...
    } else {
        // Unsupported second factor.
    }
    

    Веб-API в пространстве имен

    // 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 if (resolver.hints[selectedIndex].factorId === firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
      // User selected a TOTP second factor.
      // ...
    } else {
      // Unsupported second factor.
    }
    
  3. Инициализируйте верификатор reCAPTCHA, как показано в предыдущем разделе. Пропустите этот шаг, если экземпляр RecaptchaVerifier уже настроен:

    Веб-модульный API

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

    Веб-API в пространстве имен

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. Инициализируйте объект PhoneInfoOptions , указав номер телефона пользователя и многофакторный сеанс. Эти значения содержатся в объекте resolver , передаваемом в ошибку auth/multi-factor-auth-required :

    Веб-модульный API

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

    Веб-API в пространстве имен

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };
    
  5. Отправьте подтверждающее сообщение на телефон пользователя:

    Веб-модульный API

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

    Веб-API в пространстве имен

    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, а затем повторите предыдущий шаг, чтобы пользователь мог повторить попытку:

    Веб-модульный API

    recaptchaVerifier.clear();
    

    Веб-API в пространстве имен

    recaptchaVerifier.clear();
    
  7. После отправки SMS-кода попросите пользователя подтвердить код:

    Веб-модульный API

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

    Веб-API в пространстве имен

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  8. Инициализируйте объект MultiFactorAssertion с помощью PhoneAuthCredential :

    Веб-модульный API

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    Веб-API в пространстве имен

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  9. Вызовите resolver.resolveSignIn() для завершения вторичной аутентификации. Затем вы можете получить доступ к исходному результату входа, который включает стандартные данные поставщика и учетные данные аутентификации:

    Веб-модульный API

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

    Веб-API в пространстве имен

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

В приведенном ниже коде показан полный пример входа многофакторного пользователя:

Веб-модульный API

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 if (resolver.hints[selectedIndex].factorId ===
                       TotpMultiFactorGenerator.FACTOR_ID) {
                // Handle TOTP MFA.
                // ...
            } else {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

Веб-API в пространстве имен

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 if (resolver.hints[selectedIndex].factorId ===
        firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
        // Handle TOTP MFA.
        // ...
      } else {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

Поздравляем! Вы успешно вошли в систему пользователя, используя многофакторную аутентификацию.

Что дальше