Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

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

  1. Добавить Firebase Аутентификация в веб - приложения .

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

    1. CDN

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

      <script src="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.css" />
      
    2. Модуль npm

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

      $ npm install firebaseui --save
      

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

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Компонент Bower

      Установите 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. Добавить провайдера электронной почты идентификатор списка FirebaseUI signInOptions .

    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 консоли откройте раздел Проверка подлинности. На вкладке Вход в метод, позволяют поставщику Email / пароль. Обратите внимание, что вход по электронной почте / паролю должен быть включен, чтобы использовать ссылку для входа по электронной почте.

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

  3. Добавить провайдер электронной почты идентификатор список FirebaseUI signInOptions вместе со ссылкой электронной почты 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 условно (актуально для отдельных приложений страниц), используйте ui.isPendingRedirect() , чтобы обнаружить , если URL соответствует вход с помощью электронной связи и потребности UI будет оказана полная входа.

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

    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 идентификатор списка FirebaseUI signInOptions .

    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. Добавьте телефонный номер поставщика идентификатор списка FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Необязательно: PhoneAuthProvider может быть сконфигурирован с пользовательскими параметрами 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 при настройке входа в UI (эта опция отключена по умолчанию).

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

Бывают случаи, когда пользователь, изначально вошедший в систему анонимно, пытается перейти на существующего пользователя 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 .