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

FirebaseUI ile Web uygulamanıza kolayca oturum açma özelliğini ekleyin

FirebaseUI açılan UI uygulamanızda kullanmak için akar sağlar Firebase Kimlik SDK üzerine inşa kütüphanesidir. FirebaseUI aşağıdaki avantajları sağlar:

  • Çoklu Sağlayıcıları - oturum açma e-posta / şifre, e-posta bağlantısı, telefon doğrulaması Google, Facebook, Twitter ve GitHub oturum açma için akışları.
  • Hesabı Bağlama - güvenle bağlantı kullanıcı kimlik sağlayıcıları arasında hesapları akar.
  • Özelleştirme - FirebaseUI ait geçersiz kılma CSS stilleri uygulama gereksinimlerini karşılamak için. Ayrıca, FirebaseUI açık kaynak olduğu için projeyi çatallayabilir ve tam olarak ihtiyaçlarınıza göre özelleştirebilirsiniz.
  • Tek kademe kayıt ve otomatik oturum açma - otomatik entegrasyonu ile tek kademe kaydolma oturum açma hızlı çapraz cihaz için.
  • Yerelleştirilmiş UI - 40 için uluslararası dilde .
  • Oturum açma / kaydolma aracılığıyla anonim kullanıcılar yükseltme olanağı - anonim kullanıcılara yükseltiliyor. Daha fazla bilgi için, ziyaret Yükseltme anonim kullanıcılar bölümünü .

Sen başlamadan önce

  1. Web uygulaması için Firebase Authentication ekleyin .

  2. FirebaseUI'yi aşağıdaki seçeneklerden biriyle dahil edin:

    1. CDN

      Firebase Konsolundan başlatma snippet'inin altına, sayfanızın <head> etiketine aşağıdaki komut dosyasını ve CSS dosyasını ekleyin:

      <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 Modülü

      Aşağıdaki komutu kullanarak FirebaseUI ve bağımlılıklarını npm aracılığıyla kurun:

      $ npm install firebaseui --save
      

      require kaynak dosyaları içinde aşağıdaki modülleri:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Bower Bileşeni

      Aşağıdaki komutu kullanarak FirebaseUI ve bağımlılıklarını Bower aracılığıyla yükleyin:

      $ bower install firebaseui --save
      

      HTML'nize gerekli dosyaları dahil, HTTP Sunucusu içindeki dosyaları hizmet veriyorsa 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'yi başlat

SDK'yı içe aktardıktan sonra Auth UI'yi başlatın.

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

Oturum açma yöntemlerini ayarlayın

Kullanıcıların oturum açması için Firebase'i kullanmadan önce, desteklemek istediğiniz oturum açma yöntemlerini etkinleştirmeniz ve yapılandırmanız gerekir.

E-posta adresi ve şifre

  1. In Firebase konsoluna , Kimlik Doğrulama bölümünü açmak ve e-posta ve şifre kimlik doğrulamasını etkinleştirmek.

  2. FirebaseUI listesine e-posta sağlayıcısı kimliği ekle signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. İsteğe bağlı: EmailAuthProvider bir görünen ad (varsayılan girmesini gerektirecek şekilde yapılandırılabilir true ).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. In Firebase konsoluna , Kimlik Doğrulama bölümünü açın. Yöntem sekmesinde İşaret Üzerine, E-posta / Şifre sağlayıcı sağlar. E-posta bağlantısı oturum açmayı kullanmak için e-posta/şifre oturum açmanın etkinleştirilmesi gerektiğini unutmayın.

  2. Aynı bölümde, yöntemde oturum açma E-posta bağlantısını (şifresiz oturum açma) etkinleştirmek ve Kaydet'i tıklayın.

  3. FirebaseUI listesine e-posta sağlayıcısı kimliği ekle signInOptions e-posta bağlantısıyla birlikte 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. (Tek sayfa uygulamalar için ilgili) koşullu olarak oturum açma UI render zaman kullanmak ui.isPendingRedirect() e-posta bağlantı ile bir oturum URL karşılık ve UI ihtiyaçları tam oturum açma ilişkin sunulacak olmadığını algılamak.

    // 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. İsteğe bağlı: EmailAuthProvider izin vermek veya oturum açma çapraz cihaz tamamladıktan kullanıcıyı engellemek için yapılandırılabilir de oturum açma e-posta bağlantısı için.

    İsteğe bağlı emailLinkSignIn geri arama dönmek için tanımlanabilir firebase.auth.ActionCodeSettings linki gönderirken kullanımına yapılandırmayı. Bu, bağlantının nasıl işlenebileceğini, özel dinamik bağlantıyı, derin bağlantıdaki ek durumu vb. belirtme olanağı sağlar. Sağlanmadığında, geçerli URL kullanılır ve yalnızca web akışı tetiklenir.

    E-posta bağlantısı oturum açma FirebaseUI-web uyumlu FirebaseUI-Android ve FirebaseUI-iOS nerede FirebaseUI-web ile oturum açma bağlantısını ve komple açabilirsiniz FirebaseUI-Android'den akışını başlayan bir kullanıcı. Aynı şey ters akış için de geçerlidir.

    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 sağlayıcıları (Google, Facebook, Twitter ve GitHub)

  1. In Firebase konsoluna , Kimlik Doğrulama bölümünü açmak ve belirtilen OAuth sağlayıcı oturumu etkinleştirebilirsiniz. İlgili OAuth istemci kimliğinin ve sırrının da belirtildiğinden emin olun.

  2. Ayrıca Kimlik Doğrulama bölümünde, emin oturum açma sayfası da yetkili etki listesine eklenir işlenecek domain olun.

  3. FirebaseUI listesine OAuth sağlayıcı kimliği ekle 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. İsteğe bağlı: Özel dürbün veya sağlayıcıya başına özel OAuth parametrelerini belirlemek için, sadece sağlayıcı değeri yerine bir nesne geçirebilirsiniz:

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

Telefon numarası

  1. In Firebase konsoluna , Kimlik Doğrulama bölümünü açmak ve telefon numarası oturumu etkinleştirebilirsiniz.

  2. Oturum açma sayfanızın oluşturulacağı alanın da yetkili alan listesine eklendiğinden emin olun.

  3. FirebaseUI listesine telefon numarası sağlayıcı kimliği ekle signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. İsteğe bağlı: PhoneAuthProvider Güvenlik kodu görünür ya da görünmez (normal bir varsayılan) olup, özel Güvenlik kodu parametreleri ile yapılandırılabilir. Bakınız reCAPTCHA API docs Daha fazla ayrıntı için.

    Telefon numarası girişinde seçilecek varsayılan ülke de ayarlanabilir. Bakınız desteklenen ülke kodları listesinde kodlarının tam listesi için. Belirtilmezse, telefon numarası girişi varsayılan olarak Amerika Birleşik Devletleri (+1) olur.

    Aşağıdaki seçenekler şu anda desteklenmektedir.

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

Kayıt olmak

Akışında FirebaseUI işareti kapalı tekme için, altta yatan geçerek FirebaseUI örneğini başlatmak Auth örneği.

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

FirebaseUI oturum açma widget'ının oluşturulacağı HTML öğesini tanımlayın.

<!-- 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 yapılandırmasını belirtin (desteklenen sağlayıcılar ve UI özelleştirmelerinin yanı sıra başarılı geri aramalar vb.).

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

Son olarak, FirebaseUI Auth arayüzünü oluşturun:

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

Anonim kullanıcıları yükseltme

Anonim kullanıcı yükseltmesini etkinleştirme

Anonim bir kullanıcı kalıcı bir hesapla oturum açtığında veya kaydolduğunda, kullanıcının kaydolmadan önce yaptıklarına devam edebileceğinden emin olmak istersiniz. Böylece, sadece set yapmak için autoUpgradeAnonymousUsers için true sen oturum açma UI (Bu seçenek varsayılan olarak devre dışıdır) yapılandırırken.

Anonim kullanıcı yükseltme birleştirme çakışmalarını işleme

Başlangıçta anonim olarak oturum açan bir kullanıcının mevcut bir Firebase kullanıcısına yükseltmeye çalıştığı durumlar vardır. Mevcut bir kullanıcı başka bir mevcut kullanıcı ile bağlantılı olamaz yana, FirebaseUI tetikleyecek signInFailure bir hata kodu ile geri arama firebaseui/anonymous-upgrade-merge-conflict yukarıda ortaya çıktığında. Hata nesnesi ayrıca kalıcı kimlik bilgilerini de içerecektir. Oturum açmayı tamamlamak için geri aramada kalıcı kimlik bilgileriyle oturum açma tetiklenmelidir. Oturum açma yoluyla tamamlanabilir önce auth.signInWithCredential(error.credential) , anonim kullanıcının verilerini kaydetmek ve anonim kullanıcı silmek gerekir. Ardından, oturum açma tamamlandıktan sonra verileri anonim olmayan kullanıcıya geri kopyalayın. Aşağıdaki bir örnek, bu akışın nasıl çalışacağını göstermektedir.

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

Sonraki adımlar

  • FirebaseUI kullanarak ve özelleştirme ile ilgili daha fazla bilgi için ziyaret README .
  • Eğer FirebaseUI bir sorunu bulup bildirmek istiyorsanız, kullanmak GitHub sorunu izci .