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

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

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

Подготовка

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

  2. Включите регионы, в которых планируете использовать SMS-аутентификацию. Authentication использует политику блокировки SMS по регионам, которая помогает по умолчанию создавать более безопасные проекты.

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

Использование многопользовательской архитектуры

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

  1. В консоли Google Cloud выберите нужного клиента.

  2. В коде задайте для поля tenantId в экземпляре Auth идентификатор клиента. Пример:

    Web 

    import { getAuth } from "firebase/auth";

const auth = getAuth(app);
auth.tenantId = "myTenantId1";

    Web 

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

Как включить многофакторную аутентификацию

  1. В консоли Firebase выберите Безопасность > Аутентификация.

  2. На вкладке Способ входа в разделе Расширенные настройки включите Многофакторную аутентификацию с помощью SMS.

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

  3. Если вы ещё не авторизовали домен приложения, сделайте следующее:

    1. В консоли Firebase выберите Безопасность > Аутентификация > вкладка Настройки.

    2. В разделе Авторизованные домены нажмите Добавить домен и добавьте свой домен.

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

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

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

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

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

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

Как настроить проверку reCAPTCHA

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

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

Как использовать невидимую reCAPTCHA

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

Web 

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

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

Web 

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 будет пройдена или срок ее действия истечет:

Web 

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

const recaptchaVerifier = new RecaptchaVerifier(
    getAuth(),
    "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.
        // ...
      }
    }
);

Web 

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 перед началом регистрации двухфакторной аутентификации:

Web 

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

Web 

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

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

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

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

Как добавить второй этап

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

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

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

    убедитесь, что получили от них согласие.

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

    Web 

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

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

    Web 

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');

  4. Получите сеанс с многофакторной аутентификацией для пользователя:

    Web 

    import { multiFactor } from "firebase/auth";

multiFactor(user).getSession().then(function (multiFactorSession) {
    // ...
});

    Web 

    user.multiFactor.getSession().then(function(multiFactorSession) {
  // ...
})

  5. Инициализируйте объект PhoneInfoOptions с номером телефона пользователя и многофакторной сессией:

    Web 

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

    Web 

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

  6. Отправьте пользователю сообщение с кодом подтверждения на телефон:

    Web 

    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 

    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 можно использовать только один раз.

    Web 

    recaptchaVerifier.clear();

    Web 

    recaptchaVerifier.clear();

  8. После отправки кода в SMS попросите пользователя подтвердить его:

    Web 

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

    Web 

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

  9. Инициализируйте объект MultiFactorAssertion с помощью PhoneAuthCredential:

    Web 

    import { PhoneMultiFactorGenerator } from "firebase/auth";

const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Web 

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);

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

    Web 

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

    Web 

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

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

Web 

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

const recaptchaVerifier = new RecaptchaVerifier(getAuth(),
    'recaptcha-container-id', undefined);
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 

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

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

    Web 

    import { getAuth, signInWithEmailAndPassword, 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 

    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 

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

    Web 

    // 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 уже настроен:

    Web 

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

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

    Web 

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');

  4. Инициализируйте объект PhoneInfoOptions с номером телефона пользователя и сеансом многофакторной аутентификации. Эти значения содержатся в объекте resolver, переданном в ошибку auth/multi-factor-auth-required:

    Web 

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

    Web 

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

  5. Отправьте пользователю сообщение с кодом подтверждения на телефон:

    Web 

    // 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 

    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 

    recaptchaVerifier.clear();

    Web 

    recaptchaVerifier.clear();

  7. После отправки кода в SMS попросите пользователя подтвердить его:

    Web 

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

    Web 

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

  8. Инициализируйте объект MultiFactorAssertion с помощью PhoneAuthCredential:

    Web 

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Web 

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);

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

    Web 

    // 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 

    // 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 

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

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

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

Web 

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

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

Дальнейшие действия