Łatwe logowanie się w aplikacji internetowej dzięki FirebaseUI

FirebaseUI to biblioteka oparta na pakiecie SDK uwierzytelniania Firebase, która udostępnia gotowe interfejsy do użycia w aplikacji. FirebaseUI zapewnia te korzyści:

  • Wielu dostawców – procesy logowania za pomocą adresu e-mail i hasła, linku w e-mailu, uwierzytelniania telefonicznego oraz logowania przez Google, Facebooka, Twittera i GitHub.
  • Łączenie kont – procesy bezpiecznego łączenia kont użytkowników u różnych dostawców tożsamości.
  • Dostosowywanie – zastępowanie stylów CSS FirebaseUI, aby dopasować je do wymagań aplikacji. Ponadto FirebaseUI jest oprogramowaniem open source, więc możesz utworzyć fork projektu i dostosować go do swoich potrzeb.
  • Rejestracja jednym dotknięciem i logowanie automatyczne – automatyczna integracja z rejestracją jednym dotknięciem , która umożliwia szybkie logowanie na różnych urządzeniach.
  • Zlokalizowany interfejs – internacjonalizacja na ponad 40 języków.
  • Uaktualnianie użytkowników anonimowych – możliwość uaktualniania użytkowników anonimowych za pomocą logowania lub rejestracji. Więcej informacji znajdziesz w sekcji Uaktualnianie użytkowników anonimowych section.

Zanim zaczniesz

  1. Dodaj Uwierzytelnianie Firebase do aplikacji internetowej, upewniając się, że używasz interfejsu Namespaced API w wersji 9 lub nowszej (nie interfejsu Modular API; patrz pasek boczny powyżej).

  2. Dołącz FirebaseUI za pomocą jednej z tych opcji:

    • CDN

      W tagu <head> na stronie, poniżej fragmentu kodu inicjującego z Firebase konsoli, umieść ten skrypt i plik CSS:

      <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" />

    • Moduł npm

      Zainstaluj FirebaseUI i jego zależności za pomocą npm, używając tego polecenia:

      $ npm install firebaseui --save

      W plikach źródłowych użyj require do zaimportowania tych modułów:

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

    • Komponent Bower

      Zainstaluj FirebaseUI i jego zależności za pomocą Bower, używając tego polecenia:

      $ bower install firebaseui --save

      Jeśli serwer HTTP udostępnia pliki w katalogu bower_components/, dołącz wymagane pliki w kodzie HTML:

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

Inicjowanie FirebaseUI

Po zaimportowaniu pakietu SDK zainicjuj interfejs uwierzytelniania.

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

Konfigurowanie metod logowania

Zanim zaczniesz używać Firebase do logowania użytkowników, musisz włączyć i skonfigurować metody logowania, które chcesz obsługiwać.

Adres e-mail i hasło

  1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.

  2. Na karcie Metoda logowania włącz dostawcę logowania E-mail/hasło.

  3. Dodaj identyfikator dostawcy poczty e-mail do listy signInOptions FirebaseUI.

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

  4. Opcjonalnie: EmailAuthProvider można skonfigurować tak, aby wymagał od użytkownika podania nazwy wyświetlanej (domyślnie true).

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

  1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.

  2. Na karcie Metoda logowania włącz dostawcę logowania E-mail/hasło. Pamiętaj, że aby korzystać z logowania za pomocą linku w e-mailu, musisz włączyć logowanie za pomocą adresu e-mail i hasła.

  3. W tej samej sekcji włącz dostawcę logowania Link w e-mailu (logowanie bez hasła).

  4. Kliknij Zapisz.

  5. Dodaj identyfikator dostawcy poczty e-mail do listy signInOptions FirebaseUI wraz z signInMethod linku w e-mailu.

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

  6. Jeśli interfejs logowania jest renderowany warunkowo (dotyczy to aplikacji jednostronicowych), użyj ui.isPendingRedirect(), aby sprawdzić, czy adres URL odpowiada logowaniu za pomocą linku w e-mailu i czy interfejs musi zostać wyrenderowany, aby dokończyć logowanie.

    // 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);
}

  7. Opcjonalnie: EmailAuthProvider do logowania za pomocą linku w e-mailu można skonfigurować tak, aby zezwalał użytkownikowi na dokończenie logowania na różnych urządzeniach lub je blokował.

    Możesz zdefiniować opcjonalne wywołanie zwrotne emailLinkSignIn, aby zwracało konfigurację firebase.auth.ActionCodeSettings do użycia podczas wysyłania linku. Umożliwia to określenie, jak link ma być obsługiwany, niestandardowy link dynamiczny, dodatkowy stan w linku bezpośrednim itp. Jeśli nie podasz tych informacji, zostanie użyty bieżący adres URL i uruchomiony proces tylko w internecie.

    Logowanie za pomocą linku w e-mailu w FirebaseUI-web jest zgodne z FirebaseUI-Android i FirebaseUI-iOS , gdzie użytkownik, który rozpocznie proces w FirebaseUI-Android, może otworzyć link i dokończyć logowanie w FirebaseUI-web. To samo dotyczy odwrotnego procesu.

    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'
          }
        };
      }
    }
  ]
});

Dostawcy OAuth (Google, Facebook, Twitter i GitHub)

  1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.

  2. Na karcie Metoda logowania włącz logowanie za pomocą określonego dostawcy OAuth. Upewnij się, że podano też odpowiedni identyfikator klienta OAuth i tajny klucz.

  3. Jeśli jeszcze tego nie zrobisz, autoryzuj domenę aplikacji:

    1. W konsoli Firebase otwórz kartę Zabezpieczenia > Uwierzytelnianie > Ustawienia.

    2. W sekcji Autoryzowane domeny kliknij Dodaj domenę i dodaj swoją domenę.

  4. Dodaj identyfikator dostawcy OAuth do listy 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...
});

  5. Opcjonalnie: aby określić niestandardowe zakresy lub niestandardowe parametry OAuth dla każdego dostawcy, możesz przekazać obiekt zamiast samej wartości dostawcy:

    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.
  ]
});

Numer telefonu

  1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.

  2. Na karcie Metoda logowania włącz dostawcę logowania Telefon.

  3. Jeśli jeszcze tego nie zrobisz, autoryzuj domenę aplikacji:

    1. W konsoli Firebase otwórz kartę Zabezpieczenia> Uwierzytelnianie > Ustawienia.

    2. W sekcji Autoryzowane domeny kliknij Dodaj domenę i dodaj swoją domenę.

  4. Dodaj identyfikator dostawcy numeru telefonu do listy signInOptions FirebaseUI.

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

  5. Opcjonalnie: PhoneAuthProvider można skonfigurować za pomocą niestandardowych parametrów reCAPTCHA , niezależnie od tego, czy reCAPTCHA jest widoczna, czy niewidoczna (domyślnie normalna). Więcej informacji znajdziesz w dokumentacji interfejsu API reCAPTCHA.

    Możesz też ustawić domyślny kraj, który ma być wybrany w polu numeru telefonu. Pełną listę kodów znajdziesz w artykule Lista obsługiwanych kodów krajów. Jeśli nie określisz kraju, domyślnie w polu numeru telefonu będzie wybrany kraj Stany Zjednoczone (+1).

    Obecnie obsługiwane są te opcje.

    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'
    }
  ]
});

Zaloguj się

Aby rozpocząć proces logowania w FirebaseUI, zainicjuj instancję FirebaseUI, przekazując bazową instancję Auth.

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

Określ element HTML, w którym będzie renderowany widżet logowania 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>

Określ konfigurację FirebaseUI (obsługiwani dostawcy i dostosowania interfejsu, a także wywołania zwrotne po pomyślnym zakończeniu itp.).

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>'
};

Na koniec wyrenderuj interfejs uwierzytelniania FirebaseUI:

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

Uaktualnianie użytkowników anonimowych

Włączanie uaktualniania użytkowników anonimowych

Gdy użytkownik anonimowy zaloguje się lub zarejestruje na stałe konto, chcesz mieć pewność, że będzie mógł kontynuować to, co robił przed rejestracją. Aby to zrobić, podczas konfigurowania interfejsu logowania ustaw autoUpgradeAnonymousUsers na true (ta opcja jest domyślnie wyłączona).

Rozwiązywanie konfliktów scalania podczas uaktualniania użytkowników anonimowych

W niektórych przypadkach użytkownik, który początkowo zalogował się anonimowo, próbuje uaktualnić konto do istniejącego użytkownika Firebase. Ponieważ nie można połączyć istniejącego użytkownika z innym istniejącym użytkownikiem, w takiej sytuacji FirebaseUI wywoła wywołanie zwrotne signInFailure z kodem błędu firebaseui/anonymous-upgrade-merge-conflict. Obiekt błędu będzie też zawierać stałe dane logowania. Aby dokończyć logowanie, w wywołaniu zwrotnym należy uruchomić logowanie za pomocą stałych danych logowania. Zanim będzie można dokończyć logowanie za pomocą auth.signInWithCredential(error.credential), musisz zapisać dane użytkownika anonimowego i usunąć go. Następnie, po zakończeniu logowania, skopiuj dane z powrotem do użytkownika nieanonimowego. Poniższy przykład pokazuje, jak działa ten proces.

// 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);
    }
  }
});

Następne kroki

  • Więcej informacji o korzystaniu z FirebaseUI i jego dostosowywaniu znajdziesz w pliku README.
  • Jeśli znajdziesz problem w FirebaseUI i chcesz go zgłosić, użyj narzędzia do śledzenia problemów w GitHub.