Легко добавляйте вход в веб-приложение с помощью FirebaseUI.

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

  • Несколько провайдеров — потоки входа для электронной почты/пароля, ссылки электронной почты, аутентификации по телефону, входа в Google, Facebook, Twitter и GitHub.
  • Связывание учетных записей — потоки для безопасного связывания учетных записей пользователей между поставщиками удостоверений.
  • Настройка — переопределите стили CSS FirebaseUI в соответствии с требованиями вашего приложения. Кроме того, поскольку FirebaseUI имеет открытый исходный код, вы можете разветвить проект и настроить его точно под свои нужды.
  • Регистрация в одно касание и автоматический вход — автоматическая интеграция с регистрацией в одно касание для быстрого входа на нескольких устройствах.
  • Локализованный пользовательский интерфейс — интернационализация для более чем 40 языков .
  • Обновление анонимных пользователей — возможность обновления анонимных пользователей через вход/регистрацию. Для получения дополнительной информации посетите раздел Обновление анонимных пользователей .

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

  1. Добавьте Firebase Authentication в свое веб-приложение , убедившись, что вы используете SDK версии 9 (рекомендуется) или более раннюю версию (см. врезку выше).

  2. Включите FirebaseUI одним из следующих способов:

    1. CDN

      Включите следующий скрипт и файл CSS в тег <head> вашей страницы под фрагментом инициализации из консоли Firebase:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. нпм-модуль

      Установите FirebaseUI и его зависимости через npm с помощью следующей команды:

      $ npm install firebaseui --save

      require следующие модули в ваших исходных файлах:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. Бауэр Компонент

      Установите FirebaseUI и его зависимости через Bower с помощью следующей команды:

      $ bower install firebaseui --save

      Включите необходимые файлы в свой HTML, если ваш HTTP-сервер обслуживает файлы в bower_components/ :

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

Инициализировать FirebaseUI

После импорта SDK инициализируйте пользовательский интерфейс аутентификации.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Настройте способы входа

Прежде чем вы сможете использовать Firebase для входа пользователей, вы должны включить и настроить методы входа, которые вы хотите поддерживать.

Адрес электронной почты и пароль

  1. В консоли Firebase откройте раздел « Аутентификация » и включите аутентификацию по электронной почте и паролю.

  2. Добавьте идентификатор провайдера электронной почты в список signInOptions FirebaseUI.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. Необязательно : EmailAuthProvider можно настроить так, чтобы пользователь вводил отображаемое имя (по умолчанию — true ).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. В консоли Firebase откройте раздел Аутентификация . На вкладке « Метод входа » включите поставщика электронной почты/пароля . Обратите внимание, что для входа по электронной почте необходимо включить вход по электронной почте/паролю.

  2. В том же разделе включите метод входа по ссылке «Электронная почта» (вход без пароля) и нажмите « Сохранить » .

  3. Добавьте идентификатор провайдера электронной почты в список signInOptions FirebaseUI вместе со ссылкой на электронную почту signInMethod .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. При условной визуализации пользовательского интерфейса входа (релевантно для одностраничных приложений) используйте ui.isPendingRedirect() , чтобы определить, соответствует ли URL-адрес входу со ссылкой на электронную почту, и пользовательский интерфейс должен быть отображен для завершения входа.

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. Необязательно : EmailAuthProvider для входа по ссылке электронной почты можно настроить так, чтобы разрешить или запретить пользователю выполнение входа на нескольких устройствах.

    Дополнительный обратный вызов emailLinkSignIn может быть определен для возврата конфигурации firebase.auth.ActionCodeSettings , используемой при отправке ссылки. Это дает возможность указать, как может обрабатываться ссылка, настраиваемая динамическая ссылка, дополнительное состояние в глубокой ссылке и т. д. Если это не указано, используется текущий URL-адрес и запускается только веб-поток.

    Вход по ссылке электронной почты в FirebaseUI-web совместим с FirebaseUI-Android и FirebaseUI-iOS, где один пользователь, запускающий поток из FirebaseUI-Android, может открыть ссылку и завершить вход с помощью FirebaseUI-web. То же самое верно и для противоположного потока.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

Поставщики OAuth (Google, Facebook, Twitter и GitHub)

  1. В консоли Firebase откройте раздел « Аутентификация » и включите вход указанного провайдера OAuth. Убедитесь, что также указаны соответствующий идентификатор и секрет клиента OAuth.

  2. Также в разделе « Аутентификация » убедитесь, что домен, на котором будет отображаться ваша страница входа, также добавлен в список авторизованных доменов.

  3. Добавьте идентификатор провайдера OAuth в список signInOptions FirebaseUI.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Необязательно : чтобы указать настраиваемые области или настраиваемые параметры OAuth для каждого провайдера, вы можете передать объект, а не только значение провайдера:

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

Номер телефона

  1. В консоли Firebase откройте раздел « Аутентификация » и включите вход по номеру телефона.

  2. Убедитесь, что домен, на котором будет отображаться ваша страница входа, также добавлен в список авторизованных доменов.

  3. Добавьте идентификатор поставщика телефонных номеров в список signInOptions FirebaseUI.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Необязательно : PhoneAuthProvider можно настроить с помощью настраиваемых параметров reCAPTCHA независимо от того, является ли reCAPTCHA видимым или невидимым (по умолчанию используется обычный режим). Дополнительные сведения см. в документации API reCAPTCHA .

    Также можно установить страну по умолчанию для выбора при вводе номера телефона. Полный список кодов см. в списке поддерживаемых кодов стран. Если не указано, по умолчанию вводится номер телефона США (+1).

    В настоящее время поддерживаются следующие параметры.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

Войти

Чтобы запустить процесс входа в FirebaseUI, инициализируйте экземпляр FirebaseUI, передав базовый экземпляр Auth .

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Определите HTML-элемент, в котором будет отображаться виджет входа FirebaseUI.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

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

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

Наконец, визуализируем интерфейс аутентификации FirebaseUI:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

Обновление анонимных пользователей

Включение обновления анонимного пользователя

Когда анонимный пользователь входит в систему или регистрируется с постоянной учетной записью, вы хотите быть уверены, что пользователь может продолжить то, что он делал до регистрации. Для этого просто установите для autoUpgradeAnonymousUsers значение true при настройке пользовательского интерфейса входа (по умолчанию этот параметр отключен).

Обработка конфликтов слияния обновлений анонимных пользователей

Бывают случаи, когда пользователь, изначально вошедший в систему анонимно, пытается перейти на существующего пользователя Firebase. Поскольку существующий пользователь не может быть связан с другим существующим пользователем, FirebaseUI вызовет обратный вызов signInFailure с кодом ошибки firebaseui/anonymous-upgrade-merge-conflict , когда произойдет вышеуказанное. Объект ошибки также будет содержать постоянные учетные данные. Вход с постоянными учетными данными должен инициироваться в обратном вызове для завершения входа. Прежде чем войти в систему с помощью auth.signInWithCredential(error.credential) , необходимо сохранить данные анонимного пользователя и удалить анонимного пользователя. Затем, после завершения входа, скопируйте данные обратно неанонимному пользователю. Пример ниже иллюстрирует, как этот поток будет работать.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

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

  • Для получения дополнительной информации об использовании и настройке FirebaseUI посетите файл README .
  • Если вы обнаружили проблему в FirebaseUI и хотите сообщить о ней, воспользуйтесь трекером ошибок GitHub .