Google стремится к продвижению расового равенства для чернокожего населения. Смотри как.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Аутентифицировать с Firebase с номером телефона Использование JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительно: Pre-Отрендерьте рекапчи

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

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

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

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

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

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

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

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

  2. Вызов signInWithPhoneNumber , передавая ему номер телефона пользователя и RecaptchaVerifier вы создали ранее.
    var phoneNumber = getPhoneNumberFromUserInput();
    var appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (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(function (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 блок). Например:

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
  // User signed in successfully.
  var user = result.user;
  // ...
}).catch(function (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. Whitelisting телефонных номеров предоставляет следующие преимущества:

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

Телефонные номера в белый список должен соответствовать следующим требованиям:

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

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

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

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

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

Помимо ручного тестирования, Firebase аутентификации обеспечивает API, чтобы помочь тестов интеграции записи для тестирования телефона AUTH. Это API отключить приложение проверка путем отключения требования ReCaptcha в вебе и бесшумный Push-уведомлении в прошивке. Такая автоматизация делает тестирование можно в этих потоках и проще в реализации. Кроме того, они помогают обеспечить возможность тестирования мгновенной проверки потоков на Android.

В Интернете, установленной appVerificationDisabledForTesting к true перед визуализацией firebase.auth.RecaptchaVerifier . Это решает 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 whitelisted testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

Видимые и невидимые издеваться ReCaptcha приложения испытатели ведут себя по-разному при проверке приложения отключена:

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

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

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

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

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

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

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

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

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