Catch up on everthing we announced at this year's Firebase Summit. Learn more

Легко добавьте вход в свое веб-приложение с помощью 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/6.0.0/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/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 .