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

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

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

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

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

  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 видимым или невидимым (по умолчанию — обычное). Более подробную информацию можно найти в документации по reCAPTCHA API .

    Также можно установить страну по умолчанию для выбора при вводе номера телефона. Полный список кодов см. в списке поддерживаемых кодов стран . Если не указано, по умолчанию вводится номер телефона США (+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 .