Check out what’s new from Firebase at Google I/O 2022. Learn more

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

FirebaseUI , uygulamanızda kullanım için açılır UI akışları sağlayan Firebase Authentication SDK'nın üzerine kurulmuş bir kitaplıktır. FirebaseUI aşağıdaki avantajları sağlar:

  • Birden Çok Sağlayıcı - e-posta/parola, e-posta bağlantısı, telefonla kimlik doğrulama, Google, Facebook, Twitter ve GitHub oturum açma için oturum açma akışları.
  • Hesap Bağlama - kimlik sağlayıcılar arasında kullanıcı hesaplarını güvenli bir şekilde bağlamak için akışlar.
  • Özelleştirme - uygulama gereksinimlerinize uyması için FirebaseUI'nin CSS stillerini geçersiz kılın. Ayrıca, FirebaseUI açık kaynak olduğu için projeyi çatallayabilir ve tam olarak ihtiyaçlarınıza göre özelleştirebilirsiniz.
  • Tek dokunuşla kaydolma ve otomatik oturum açma - hızlı cihazlar arası oturum açma için Tek dokunuşla kaydolma ile otomatik entegrasyon.
  • Yerelleştirilmiş UI - 40'tan fazla dil için uluslararasılaştırma.
  • Anonim kullanıcıları yükseltme - oturum açma/kaydolma yoluyla anonim kullanıcıları yükseltme yeteneği. Daha fazla bilgi için, Anonim kullanıcıları yükseltme bölümünü ziyaret edin.

Sen başlamadan önce

  1. Web uygulamanıza 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.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. npm Modülü

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

      $ npm install firebaseui --save
      

      kaynak dosyalarınızda aşağıdaki modülleri require :

      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
      

      HTTP Sunucunuz dosyaları bower_components/ içinde sunuyorsa, gerekli dosyaları HTML'nize ekleyin:

      <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ılarda oturum açmak için Firebase'i kullanmadan önce, desteklemek istediğiniz oturum açma yöntemlerini etkinleştirmeli ve yapılandırmalısınız.

E-posta adresi ve şifre

  1. Firebase konsolunda , Kimlik Doğrulama bölümünü açın ve e-posta ve parola kimlik doğrulamasını etkinleştirin.

  2. E-posta sağlayıcı kimliğini signInOptions listesine ekleyin.

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

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. Firebase konsolunda , Kimlik Doğrulama bölümünü açın. Oturum açma yöntemi sekmesinde E-posta/Parola sağlayıcısını etkinleştirin. 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, E-posta bağlantısı (parolasız oturum açma) oturum açma yöntemini etkinleştirin ve Kaydet'i tıklayın .

  3. E-posta sağlayıcı kimliğini, e-posta bağlantısı signInMethod ile birlikte signInOptions listesine ekleyin.

    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. Oturum açma kullanıcı arabirimini koşullu olarak oluştururken (tek sayfalı uygulamalar için geçerlidir), URL'nin e-posta bağlantısıyla oturum açmaya karşılık gelip gelmediğini ve oturum açmayı tamamlamak için kullanıcı arabiriminin oluşturulması gerekip gerekmediğini algılamak için ui.isPendingRedirect() kullanın.

    // 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ı : E-posta bağlantısı oturum açma için EmailAuthProvider , kullanıcının cihazlar arası oturum açma işlemini tamamlamasına izin verecek veya bunu engelleyecek şekilde yapılandırılabilir.

    Bağlantı gönderilirken kullanılacak firebase.auth.ActionCodeSettings yapılandırmasını döndürmek için isteğe bağlı bir emailLinkSignIn geri araması tanımlanabilir. 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.

    FirebaseUI-web'de e-posta bağlantısı oturum açma, FirebaseUI-Android ve FirebaseUI-iOS ile uyumludur; burada akışı FirebaseUI-Android'den başlatan bir kullanıcı, bağlantıyı açabilir ve FirebaseUI-web ile oturum açmayı tamamlayabilir. 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. Firebase konsolunda Kimlik Doğrulama bölümünü açın ve belirtilen OAuth sağlayıcı oturum açmasını etkinleştirin. İ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, oturum açma sayfanızın oluşturulacağı alan adının da yetkili alan adları listesine eklendiğinden emin olun.

  3. OAuth sağlayıcı kimliğini signInOptions listesine ekleyin.

    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ı : Sağlayıcı başına özel kapsamlar veya özel OAuth parametreleri belirtmek için yalnızca sağlayıcı değeri yerine bir nesne iletebilirsiniz:

    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. Firebase konsolunda , Kimlik Doğrulama bölümünü açın ve telefon numarasıyla oturum açmayı etkinleştirin.

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

  3. Telefon numarası sağlayıcı kimliğini signInOptions listesine ekleyin.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. İsteğe bağlı : PhoneAuthProvider, reCAPTCHA görünür veya görünmez (varsayılan olarak normaldir) özel reCAPTCHA parametreleriyle yapılandırılabilir. Daha fazla ayrıntı için reCAPTCHA API belgelerine bakın.

    Telefon numarası girişinde seçilecek varsayılan ülke de ayarlanabilir. Kodların tam listesi için desteklenen ülke kodları listesine bakın. 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

FirebaseUI oturum açma akışını başlatmak için, temel Auth örneğini ileterek FirebaseUI örneğini başlatın.

// 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. Bunu yapmak için, oturum açma kullanıcı arabirimini yapılandırırken autoUpgradeAnonymousUsers true olarak ayarlamanız yeterlidir (bu seçenek varsayılan olarak devre dışıdır).

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ıya bağlanamadığından, FirebaseUI, yukarıdaki gerçekleştiğinde firebaseui/anonymous-upgrade-merge-conflict signInFailure tetikler. 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 auth.signInWithCredential(error.credential) aracılığıyla tamamlanabilmesi için anonim kullanıcının verilerini kaydetmeli ve anonim kullanıcıyı silmelisiniz. 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'yi kullanma ve özelleştirme hakkında daha fazla bilgi için README sayfasını ziyaret edin.
  • FirebaseUI'de bir sorun bulursanız ve bunu bildirmek isterseniz GitHub sorun izleyicisini kullanın.