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

FirebaseUI to biblioteka oparta na pakiecie SDK Uwierzytelnianie Firebase, która udostępnia gotowe przepływy interfejsu użytkownika do użycia w aplikacji. FirebaseUI zapewnia te korzyści:

  • Wielokrotnie dostawcy – procesy logowania za pomocą adresu e-mail i hasła, linku e-mail, uwierzytelniania przez telefon, logowania w Google, Facebooku, Twitterze i GitHub.
  • Łączenie kont – procesy bezpiecznego łączenia kont użytkowników w różnych usługach dostawców tożsamości.
  • Personalizacja: zastąp style CSS interfejsu FirebaseUI, aby dostosować je do wymagań aplikacji. Ponadto, ponieważ FirebaseUI jest oprogramowaniem open source, możesz utworzyć jego odgałę i dostosowywać go dokładnie do swoich potrzeb.
  • Ręcentryzacji i logowania automatycznego jednym dotknięciem – automatyczna integracja z rejestracją jednym dotknięciem, która umożliwia szybkie logowanie na różnych urządzeniach.
  • Lokalizacje interfejsu użytkownika – międzynarodowa obsługa ponad 40 języków.
  • Przekształcanie użytkowników anonimowych – możliwość przekształcania użytkowników anonimowych przez zalogowanie się lub rejestrację. Więcej informacji znajdziesz w sekcji Przekształcanie anonimowych użytkowników w użytkowników z identyfikatorami.

Zanim zaczniesz

  1. Dodaj uwierzytelnianie Firebase do swojej aplikacji internetowej, pamiętając, aby używać interfejsu API w wersji 9 lub nowszej (nie interfejsu API w wersji modułowej; patrz pasek boczny powyżej).

  2. Uwzględnij FirebaseUI za pomocą jednej z tych opcji:

    1. CDN

      Dodaj ten skrypt i plik CSS do tagu <head> strony, poniżej fragmentu kodu inicjującego z konsoli 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. Moduł npm

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

      $ npm install firebaseui --save

      require w plikach źródłowych te moduły:

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

    3. 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 folderze bower_components/, uwzględnij w pliku HTML wymagane pliki:

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

Inicjalizacja FirebaseUI

Po zaimportowaniu pakietu SDK zainicjuj interfejs użytkownika 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 sekcję Uwierzytelnianie i włącz uwierzytelnianie za pomocą adresu e-mail i hasła.

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

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

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

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

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie. Na karcie Metoda logowania włącz dostawcę 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.

  2. W tej samej sekcji włącz metodę logowania Link w e-mailu (logowanie bez hasła) i kliknij Zapisz.

  3. Dodaj identyfikator dostawcy poczty e-mail do listy FirebaseUI signInOptions wraz z linkiem do poczty e-mail 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. Podczas warunkowego renderowania interfejsu logowania (w przypadku aplikacji jednostronicowych) użyj elementu ui.isPendingRedirect(), aby wykryć, czy adres URL odpowiada logowaniu z linkiem e-mail, 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);
}

  5. Opcjonalnie: opcję EmailAuthProvider dla logowania za pomocą linku w e-mailu można skonfigurować tak, aby zezwolić użytkownikowi na logowanie się na różnych urządzeniach lub zablokować tę możliwość.

    Można zdefiniować opcjonalne wywołanie zwrotne emailLinkSignIn, które zwróci konfigurację firebase.auth.ActionCodeSettingsdo użycia podczas wysyłania linku. Dzięki temu możesz określić, jak ma być obsługiwany link, np. czy ma to być link dynamiczny, czy ma zawierać dodatkowe informacje itp. Jeśli nie podasz linku, zostanie użyty bieżący URL i uruchomiony proces tylko w witrynie.

    Logowanie za pomocą linku e-mail w FirebaseUI-web jest zgodne z FirebaseUI-Android i FirebaseUI-iOS, dzięki czemu użytkownik, który rozpoczyna proces logowania w FirebaseUI-Android, może otworzyć link i dokończyć logowanie w FirebaseUI-web. To samo dotyczy odwrotnego przepływu.

    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 sekcję Uwierzytelnianie i włącz logowanie do określonego dostawcy OAuth. Sprawdź, czy są też podane odpowiadające identyfikator i tajny klucz klienta OAuth.

  2. W sekcji Uwierzytelnianie sprawdź też, czy domena, w której będzie renderowana strona logowania, jest dodana do listy autoryzowanych domen.

  3. Dodaj identyfikator dostawcy OAuth do listy 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. Opcjonalnie: aby określić niestandardowe zakresy lub niestandardowe parametry OAuth dla danego dostawcy, możesz przekazać obiekt zamiast 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 sekcję Uwierzytelnianie i włącz logowanie za pomocą numeru telefonu.

  2. Upewnij się, że domena, w której renderowana jest strona logowania, jest również dodana do listy autoryzowanych domen.

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

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

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

    Możesz też ustawić domyślny kraj, który będzie wybierany w polu numeru telefonu. Pełną listę kodów znajdziesz w sekcji z obsługiwanymi kodami krajów. Jeśli nie podasz numeru telefonu, zostanie on domyślnie ustawiony na 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 FirebaseUI, zainicjuj instancję FirebaseUI, pomijając podstawową instancję Auth.

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

Określ element HTML, w którym ma być 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ługiwanych dostawców i dostosowywanie interfejsu użytkownika, a także wywołania zwrotne po powodzeniu 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 wyświetl interfejs FirebaseUI Auth:

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

Uaktualnianie użytkowników anonimowych

Włączanie uaktualnienia anonimowego użytkownika

Gdy użytkownik anonimowy loguje się na stałe konto lub rejestruje się na nie, musi mieć możliwość kontynuowania tego, co robił przed rejestracją. Aby to zrobić, podczas konfigurowania interfejsu logowania ustaw wartość autoUpgradeAnonymousUsers na true (ta opcja jest domyślnie wyłączona).

Rozwiązywanie konfliktów podczas łączenia kont anonimowych użytkowników

Czasami zdarza się, że użytkownik, który początkowo zalogował się anonimowo, próbuje przejść na konto dotychczasowego użytkownika Firebase. Ponieważ obecnego użytkownika nie można połączyć z innym obecnym użytkownikiem, w przypadku wystąpienia tego problemu FirebaseUI wywoła funkcję signInFailure z kodem błędu firebaseui/anonymous-upgrade-merge-conflict. Obiekt błędu będzie też zawierać trwałe dane logowania. Aby dokończyć logowanie, należy wywołać logowanie z trwałymi danymi logowania. Zanim auth.signInWithCredential(error.credential) będzie można zalogować się za pomocą anonimowego konta, musisz zapisać dane anonimowego użytkownika i usunąć to konto. Następnie, po zalogowaniu się, skopiuj dane z powrotem do nieanonimowego użytkownika. Poniżej znajdziesz przykładowy przepływ danych.

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