Google 致力于为黑人社区推动种族平等。查看具体举措

Аутентификация в Firebase по номеру телефона с помощью JavaScript

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

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

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

Если вы еще не сделали, скопируйте инициализации фрагмент из Firebase консоли для вашего проекта , как описано в Add Firebase к вашему проекту JavaScript .

Проблемы безопасности

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

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

Включите вход по номеру телефона для своего проекта Firebase

Чтобы входить в систему с помощью SMS, вы должны сначала включить метод входа по номеру телефона для своего проекта Firebase:

  1. В Firebase консоли откройте раздел Проверка подлинности.
  2. На странице входа в методе, включите номер телефона вход в методе.
  3. На той же странице, если домен , который будет принимать ваше приложение не отображаются в переадресации доменов раздела OAuth, добавьте свой домен.

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

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

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

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

В RecaptchaVerifier поддерживает объект невидимым ReCaptcha , который часто может проверить пользователя , не требуя каких - либо действий пользователя, а также рекапчи виджет, который всегда требует взаимодействия с пользователем , чтобы успешно завершить.

Базовая визуализированная reCAPTCHA может быть локализована в соответствии с предпочтениями пользователя путем обновления языкового кода в экземпляре Auth перед визуализацией reCAPTCHA. Вышеупомянутая локализация также будет применяться к отправляемому пользователю SMS-сообщению, содержащему проверочный код.

Веб-версия 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Веб-версия 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Используйте невидимую reCAPTCHA

Для того, чтобы использовать невидимый ReCaptcha, создать RecaptchaVerifier объект с size набора параметров для invisible , указав идентификатор кнопки , который подает свой знак-форму. Например:

Веб-версия 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
}, auth);

Веб-версия 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Используйте виджет reCAPTCHA

Для того, чтобы использовать видимый ReCaptcha виджет, создайте элемент на странице , чтобы содержать виджет, а затем создать RecaptchaVerifier объект, указав идентификатор контейнера , когда вы делаете это. Например:

Веб-версия 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);

Веб-версия 8

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

Необязательно: укажите параметры reCAPTCHA

При желании вы можете установить функции обратного вызова на RecaptchaVerifier объекта, которые вызываются , когда решает пользователь вводит ReCaptcha или ReCaptcha истекает до того , пользователь отправляет форму:

Веб-версия 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

Веб-версия 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

Необязательно: предварительный рендеринг reCAPTCHA

Если вы хотите предварительно визуализировать ReCaptcha , прежде чем подать знак-в запросе, вызов render :

Веб-версия 9

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

Веб-версия 8

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

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

Веб-версия 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Веб-версия 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Отправьте проверочный код на телефон пользователя

Для того, чтобы инициировать телефонный номер входа, представить пользователю интерфейс , который побуждает их указать свой номер телефона, а затем вызвать signInWithPhoneNumber на запрос , что Firebase отправить код аутентификации на телефон пользователя по SMS:

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

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

  2. Вызов signInWithPhoneNumber , передавая ему номер телефона пользователя и RecaptchaVerifier вы создали ранее.

    Веб-версия 9

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";
    
    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    
    const auth = getAuth();
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });

    Веб-версия 8

    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });
    Если signInWithPhoneNumber приводит к ошибке, сбросить ReCaptcha , так что пользователь может попробовать еще раз:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

В signInWithPhoneNumber метод выдает рекапчи вызов пользователя, и если пользователь передает вызов, прошу Firebase Authentication отправить сообщение SMS , содержащее код подтверждения на телефон пользователя.

Авторизуйтесь пользователем с проверочным кодом

После вызова signInWithPhoneNumber успешно, предложит пользователю ввести код проверки они получили по SMS. Затем вход пользователя путем передачи коды в confirm способе ConfirmationResult объекта , который был передан в signInWithPhoneNumber исполнения обработчика «s (то есть, его then блок). Например:

Веб-версия 9

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

Веб-версия 8

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

Если вызов confirm удалось, пользователь успешно вошли в систему .

Получить промежуточный объект AuthCredential

Если вам нужно получить AuthCredential объект для учетной записи пользователя, необходимо передать код подтверждения , полученный в результате подтверждения и код подтверждения на PhoneAuthProvider.credential вместо вызова confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Затем вы можете войти в систему с учетными данными:

firebase.auth().signInWithCredential(credential);

Тест с вымышленными телефонными номерами

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

  • Протестируйте аутентификацию по номеру телефона, не используя квоту использования.
  • Проверьте аутентификацию телефонного номера без отправки фактического SMS-сообщения.
  • Выполняйте последовательные тесты с одним и тем же номером телефона без ограничения скорости. Это сводит к минимуму риск отказа в процессе проверки в магазине приложений, если рецензент использует тот же номер телефона для тестирования.
  • Легко тестируйте в средах разработки без каких-либо дополнительных усилий, таких как возможность разработки в симуляторе iOS или эмуляторе Android без сервисов Google Play.
  • Написание интеграционных тестов без блокировки проверок безопасности, обычно применяемых к реальным телефонным номерам в производственной среде.

Вымышленные номера телефонов должны соответствовать следующим требованиям:

  1. Убедитесь, что вы используете номера телефонов, которые действительно вымышлены и еще не существуют. Firebase Authentication не позволяет вам устанавливать существующие телефонные номера, используемые реальными пользователями, в качестве тестовых. Одним из вариантов является использование 555 префиксами числа как тест США телефонных номеров, например: +1 650-555-3434
  2. Номера телефонов должны быть правильно отформатированы с учетом длины и других ограничений. Они по-прежнему будут проходить такую ​​же проверку, что и номер телефона реального пользователя.
  3. Вы можете добавить до 10 номеров телефонов для разработки.
  4. Используйте тестовые телефонные номера / коды, которые сложно угадать, и часто меняйте их.

Создавайте вымышленные номера телефонов и коды подтверждения

  1. В Firebase консоли откройте раздел Проверка подлинности.
  2. В Знаменске на вкладке методы, позволяют поставщик телефона , если вы еще не сделали.
  3. Откройте номера телефона для тестирования меню аккордеона.
  4. Укажите номер телефона , который вы хотите проверить, например: +1 650-555-3434.
  5. Обеспечить код подтверждения 6 цифр для этого конкретного числа, например: 654321.
  6. Добавить номер. При необходимости вы можете удалить номер телефона и его код, наведя курсор на соответствующую строку и щелкнув значок корзины.

Ручное тестирование

Вы можете сразу начать использовать вымышленный номер телефона в своем приложении. Это позволяет выполнять тестирование вручную на этапах разработки без проблем с квотами или ограничения. Вы также можете протестировать прямо из симулятора iOS или эмулятора Android без установленных сервисов Google Play.

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

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

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

Интеграционное тестирование

В дополнение к ручному тестированию Firebase Authentication предоставляет API-интерфейсы, которые помогают писать интеграционные тесты для проверки подлинности телефона. Эти API отключают проверку приложений, отключая требование reCAPTCHA в Интернете и тихие push-уведомления в iOS. Это делает возможным автоматическое тестирование в этих потоках и упрощает его реализацию. Кроме того, они помогают тестировать потоки мгновенной проверки на Android.

В Интернете, установленной appVerificationDisabledForTesting к true перед визуализацией firebase.auth.RecaptchaVerifier . Это автоматически разрешает reCAPTCHA, позволяя вам передать номер телефона, не решая его вручную. Обратите внимание, что даже несмотря на то, что reCAPTCHA отключена, использование вымышленного номера телефона по-прежнему не приведет к завершению входа в систему. С этим API можно использовать только вымышленные номера телефонов.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

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

  • Видимый рекапчи: Когда видимое рекапчи визуализируется с помощью appVerifier.render() , он автоматически решает сам после доли секунды задержки. Это эквивалентно тому, что пользователь щелкает reCAPTCHA сразу после рендеринга. Срок действия ответа reCAPTCHA истечет через некоторое время, а затем снова будет автоматически разрешен.
  • Невидимый рекапчи: Невидимый рекапчи не самоподавляется решимости на оказание и вместо этого делает это на appVerifier.verify() вызова или когда кнопка якорь рекапчи нажата после доли секунды задержки. Точно так же, ответ истекает через некоторое время и будет только автоматически решимостью либо после appVerifier.verify() вызова или когда кнопка якорь рекапчи нажата снова.

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

Следующие шаги

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

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

  • В вашей базе данных в реальном времени и Firebase Cloud Storage правил безопасности , вы можете получить подписанный в уникальном пользователя идентификатор пользователя из auth переменной и использовать его , чтобы контролировать , какие данные пользователь заходит может.

Вы можете позволить пользователям входить в ваше приложение с помощью нескольких поставщиков проверки подлинности с помощью ссылки AUTH учетных данных поставщика к существующему учетной записи пользователя.

Чтобы выйти пользователь, вызовите signOut :

Веб-версия 9

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Веб-версия 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});