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

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

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

Прежде чем начать

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

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

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

Использование многопользовательского режима

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

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

Выбор схемы зачисления

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

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

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

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

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

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

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

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

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

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

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, который можно использовать для вызовов API reCAPTCHA :

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

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

Что дальше?