Эта страница переведена с помощью Cloud Translation API.

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

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

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

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

Добавьте аутентификацию Firebase в ваше веб-приложение , убедившись, что вы используете API с пространством имен версии 9 или более поздней ( а не модульный API; см. боковую панель выше).
Подключите FirebaseUI одним из следующих способов:
- 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" />
```
- Модуль npm
  Установите FirebaseUI и его зависимости через npm, используя следующую команду:
```
$ npm install firebaseui --save
```
  В исходных файлах require следующие модули:
```
var firebase = require('firebase');
var firebaseui = require('firebaseui');
```
- Компонент Боуэра
  Установите FirebaseUI и его зависимости через Bower, используя следующую команду:
```
$ bower install firebaseui --save
```
  Если ваш HTTP-сервер обслуживает файлы в папке bower_components/ , включите необходимые файлы в ваш HTML-код.
```
<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 для авторизации пользователей, необходимо включить и настроить поддерживаемые методы авторизации.

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

В консоли Firebase перейдите в раздел Безопасность > Аутентификация .
На вкладке «Способ входа» включите способ входа по электронной почте/паролю .

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

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

Необязательно : EmailAuthProvider можно настроить таким образом, чтобы он требовал от пользователя ввода отображаемого имени (по умолчанию — true ).
```
ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});
```

Аутентификация по ссылке электронной почты

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

Добавьте идентификатор поставщика электронной почты в список параметров входа 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...
});

При условном отображении интерфейса входа в систему (что актуально для одностраничных приложений) используйте 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);
}
```

Дополнительно : Для входа по ссылке из электронной почты можно настроить 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)

В консоли Firebase перейдите в раздел Безопасность > Аутентификация .
На вкладке «Метод входа» включите вход через указанного поставщика OAuth. Убедитесь, что также указаны соответствующий идентификатор клиента OAuth и секретный ключ.
Если вы еще этого не сделали, авторизуйте домен вашего приложения:
1. В консоли Firebase перейдите в раздел Безопасность > Аутентификация > Вкладка Настройки .
2. В разделе «Авторизованные домены» нажмите «Добавить домен» и добавьте свой домен.

Добавьте идентификатор поставщика 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...
});

Необязательно : чтобы указать пользовательские области действия или пользовательские параметры 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.
  ]
});

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

В консоли Firebase перейдите в раздел Безопасность > Аутентификация .
На вкладке «Способ входа» включите поставщика услуг входа по телефону .
Если вы еще этого не сделали, авторизуйте домен вашего приложения:
1. В консоли Firebase перейдите в раздел Безопасность > Аутентификация > Вкладка Настройки .
2. В разделе «Авторизованные домены» нажмите «Добавить домен» и добавьте свой домен.

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

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

Необязательно : 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'
    }
  ]
});

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 .