Z łatwością dodaj logowanie do swojej aplikacji internetowej za pomocą FirebaseUI

FirebaseUI to biblioteka zbudowana na bazie pakietu SDK Firebase Authentication, która zapewnia przepływy interfejsu użytkownika do wykorzystania w Twojej aplikacji. FirebaseUI zapewnia następujące korzyści:

  • Wielu dostawców — przepływy logowania dla adresu e-mail/hasła, łącza e-mail, uwierzytelniania telefonicznego, logowania do Google, Facebooka, Twittera i GitHuba.
  • Łączenie kont — przepływy umożliwiające bezpieczne łączenie kont użytkowników u różnych dostawców tożsamości.
  • Dostosowywanie — zastąp style CSS FirebaseUI, aby dopasować je do wymagań aplikacji. Ponadto, ponieważ FirebaseUI jest oprogramowaniem typu open source, możesz rozwidlić projekt i dostosować go dokładnie do swoich potrzeb.
  • Rejestracja jednym dotknięciem i automatyczne logowanie — automatyczna integracja z funkcją rejestracji jednym dotknięciem w celu szybkiego logowania na różnych urządzeniach.
  • Zlokalizowany interfejs użytkownika – internacjonalizacja dla ponad 40 języków .
  • Aktualizacja użytkowników anonimowych - możliwość aktualizacji użytkowników anonimowych poprzez logowanie/rejestrację. Aby uzyskać więcej informacji, odwiedź sekcję Uaktualnianie użytkowników anonimowych .

Zanim zaczniesz

  1. Dodaj uwierzytelnianie Firebase do swojej aplikacji internetowej , upewniając się, że używasz wersji zgodnej z wersją 9 (zalecane) lub starszego pakietu SDK (patrz pasek boczny powyżej).

  2. Dołącz FirebaseUI za pomocą jednej z następujących opcji:

    1. CDN

      Dołącz następujący skrypt i plik CSS w tagu <head> swojej strony, poniżej fragmentu 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 poprzez npm, używając następującego polecenia:

      $ npm install firebaseui --save
      

      require następujących modułów w plikach źródłowych:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Komponent Bowera

      Zainstaluj FirebaseUI i jego zależności poprzez Bower, używając następującego polecenia:

      $ bower install firebaseui --save
      

      Dołącz wymagane pliki do kodu HTML, jeśli Twój serwer HTTP udostępnia pliki w bower_components/ :

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

Zainicjuj FirebaseUI

Po zaimportowaniu pakietu SDK zainicjuj interfejs uwierzytelniania.

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

Skonfiguruj metody logowania

Zanim będziesz mógł 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ą poczty elektronicznej i hasła.

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

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. Opcjonalnie : Element EmailAuthProvider można skonfigurować tak, aby wymagał od użytkownika wprowadzenia nazwy wyświetlanej (wartość domyślna to 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ę adresu e-mail/hasła . Pamiętaj, że aby móc logować się za pomocą łącza e-mail, musi być włączone logowanie za pomocą adresu e-mail/hasła.

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

  3. Dodaj identyfikator dostawcy poczty e-mail do listy signInOptions wraz z linkiem 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 użytkownika logowania (istotnego w przypadku aplikacji jednostronicowych) użyj ui.isPendingRedirect() , aby wykryć, czy adres URL odpowiada linkowi do logowania za pomocą adresu e-mail i czy interfejs użytkownika musi zostać wyrenderowany, aby zakoń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 : element EmailAuthProvider do logowania za pomocą łącza e-mail można skonfigurować tak, aby zezwalał użytkownikowi na logowanie na różnych urządzeniach lub blokował go.

    Można zdefiniować opcjonalne wywołanie zwrotne emailLinkSignIn w celu zwrócenia konfiguracji firebase.auth.ActionCodeSettings , która będzie używana podczas wysyłania łącza. Zapewnia to możliwość określenia sposobu obsługi łącza, niestandardowego łącza dynamicznego, dodatkowego stanu w precyzyjnym łączu itp. Jeśli nie zostanie podany, używany będzie bieżący adres URL i uruchamiany będzie przepływ wyłącznie przez Internet.

    Logowanie za pomocą łącza e-mail w FirebaseUI-web jest kompatybilne z FirebaseUI-Android i FirebaseUI-iOS , gdzie jeden użytkownik rozpoczynający przepływ z FirebaseUI-Android może otworzyć łącze i dokończyć logowanie za pomocą FirebaseUI-web. To samo dotyczy przepływu przeciwnego.

    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 określonego dostawcy OAuth. Upewnij się, że określono również odpowiedni identyfikator klienta OAuth i klucz tajny.

  2. Również w sekcji Uwierzytelnianie upewnij się, że domena, w której będzie wyświetlana Twoja strona logowania, jest również dodana do listy autoryzowanych domen.

  3. Dodaj identyfikator dostawcy OAuth do listy 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 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 sekcję Uwierzytelnianie i włącz logowanie za pomocą numeru telefonu.

  2. Upewnij się, że domena, w której będzie wyświetlana strona logowania, jest również dodana do listy autoryzowanych domen.

  3. Dodaj identyfikator dostawcy numeru telefonu do listy signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Opcjonalnie : element PhoneAuthProvider można skonfigurować przy użyciu niestandardowych parametrów reCAPTCHA, niezależnie od tego, czy reCAPTCHA jest widoczny, czy niewidoczny (domyślnie jest to normalne). Więcej szczegółów znajdziesz w dokumentacji API reCAPTCHA .

    Można także ustawić domyślny kraj wybierany przy wprowadzaniu numeru telefonu. Pełną listę kodów znajdziesz na liście obsługiwanych kodów krajów . Jeśli nie określono, domyślnym numerem telefonu będą Stany Zjednoczone (+1).

    Obecnie obsługiwane są następujące 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'
        }
      ]
    });
    

Zalogować się

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

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

Zdefiniuj 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 użytkownika, a także wywołania zwrotne dotyczące powodzenia 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);

Aktualizacja anonimowych użytkowników

Włączanie aktualizacji anonimowego użytkownika

Kiedy anonimowy użytkownik loguje się lub rejestruje za pomocą konta stałego, chcesz mieć pewność, że będzie mógł kontynuować to, co robił przed rejestracją. Aby to zrobić, po prostu ustaw autoUpgradeAnonymousUsers na true podczas konfigurowania interfejsu użytkownika logowania (ta opcja jest domyślnie wyłączona).

Obsługa konfliktów scalania uaktualnień anonimowych użytkowników

Zdarzają się przypadki, gdy użytkownik początkowo zalogowany anonimowo, próbuje dokonać aktualizacji do istniejącego użytkownika Firebase. Ponieważ istniejącego użytkownika nie można połączyć z innym istniejącym użytkownikiem, FirebaseUI uruchomi wywołanie signInFailure z kodem błędu firebaseui/anonymous-upgrade-merge-conflict gdy wystąpi powyższa sytuacja. Obiekt błędu będzie również zawierał stałe dane uwierzytelniające. Logowanie przy użyciu stałego poświadczenia powinno zostać wyzwolone w wywołaniu zwrotnym, aby ukończyć logowanie. Zanim będzie można zakończyć logowanie za pomocą auth.signInWithCredential(error.credential) , musisz zapisać dane anonimowego użytkownika i usunąć anonimowego użytkownika. Następnie po zakończeniu logowania skopiuj dane z powrotem do użytkownika nieanonimowego. Poniższy przykład ilustruje działanie tego przepływu.

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