FirebaseUI ile web uygulamanızda kolayca oturum açma olanağı ekleyin

FirebaseUI, Firebase Authentication SDK'sının üst kısmındaki en iyi şekilde yararlanabilirsiniz. FirebaseUI aşağıdaki avantajları sağlar:

  • Birden Fazla Sağlayıcı: E-posta/şifre, e-posta bağlantısı, telefon için oturum açma akışları kimlik doğrulama, Google, Facebook, Twitter ve GitHub ile oturum açma.
  • Hesap Bağlama: Kullanıcı hesaplarını kimlik genelinde güvenli bir şekilde bağlama akışları sağlayıcılar.
  • Özelleştirme - Uygulamanızla eşleştirmek için FirebaseUI'nin CSS stillerini geçersiz kılın gereksinimlerini karşılayın. Ayrıca, FirebaseUI açık kaynak olduğundan ihtiyaçlarınıza göre özelleştirebilirsiniz.
  • Tek dokunuşla kaydolma ve otomatik oturum açma - Tek dokunuşla kaydolma cihazlar arası oturum açmayı deneyin.
  • Yerelleştirilmiş kullanıcı arayüzü - 40'tan fazla dil için uluslararası hale getirme dilleri kontrol edin.
  • Anonim kullanıcıları yükseltme - Anonim kullanıcıları oturum açın/kaydolun. Daha fazla bilgi için Anonim kullanıcıları yükseltme bölümünü inceleyin.
ziyaret edin.

Başlamadan önce

  1. Firebase Authentication'ı web uygulamanıza ekleyin, v9 uyumlu (önerilir) veya daha eski bir SDK kullandığınızdan emin olun kenar çubuğunu kullanın).

  2. Aşağıdaki seçeneklerden biriyle FirebaseUI'yi ekleyin:

    1. CDN

      Aşağıdaki komut dosyasını ve CSS dosyasını <head> bölümüne ekleyin etiketi Firebase Konsolu'ndaki ilk kullanıma hazırlama snippet'inin altında:

      <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'yi ve bağımlılarını npm üzerinden yükleyin: komut:

      $ npm install firebaseui --save

      Kaynak dosyalarınızda bulunan şu modülleri require:

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

    3. Yay Bileşeni

      Aşağıdakini kullanarak FirebaseUI'yi ve bağımlılıklarını Bower üzerinden yükleyin: komut:

      $ bower install firebaseui --save

      HTTP sunucunuz bower_components/ içindeki dosyalar:

      <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ın

SDK'yı içe aktardıktan sonra Auth kullanıcı arayüzünü başlatın.

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

Oturum açma yöntemlerini ayarlayın

Firebase'i kullanıcıların oturumlarında oturum açmak için kullanmadan önce nasıl oturum açacağınızı belirleyin.

E-posta adresi ve şifre

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın ve E-posta ve şifre doğrulaması.

  2. E-posta sağlayıcı kimliğini FirebaseUI 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 tercih etmesini gerektirecek şekilde yapılandırılabilir değerini girin (varsayılan olarak true değerine ayarlanır).

    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. Sign in method (Oturum açma yöntemi) sekmesinde, Email/Password (E-posta/Şifre) sağlayıcısını etkinleştirin. Not e-posta bağlantısıyla oturum açmayı kullanmak için e-posta/şifre oturum açma etkinleştirilmelidir.

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

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

    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ı arayüzünü koşullu olarak (tek sayfalık uygulamalar için geçerli) oluştururken URL'nin bir oturum açma işlemine karşılık gelip gelmediğini algılamak için ui.isPendingRedirect() kullanın ve oturum açma işlemini tamamlamak için kullanıcı arayüzünün oluşturulması gerekir.

    // 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ıyla oturum açmak için EmailAuthProvider kullanıcının cihazlar arası oturum açma işlemini tamamlamasına izin verecek veya engelleyecek şekilde yapılandırılmalıdır.

    emailLinkSignIn firebase.auth.ActionCodeSettings yapılandırma ayarları var. Bu özellik, bağlantının nasıl kullanılabileceğini belirtin, özel dinamik bağlantı, ek durum vb. sağlar. Sağlanmazsa, mevcut URL kullanılır ve bir web yalnızca akış tetiklenir.

    FirebaseUI-web'de e-posta bağlantısıyla oturum açma özelliği şununla uyumlu: FirebaseUI-Android ve FirebaseUI-iOS FirebaseUI-Android'den akışı başlatan bir kullanıcı, ve FirebaseUI-web ile oturum açma işlemini tamamlayın. Aynı durum, akışı sağlar.

    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ısı oturum açma bilgilerini açın. İlgili OAuth istemci kimliği ve gizli anahtar da belirtilir.

  2. Ayrıca Kimlik Doğrulama bölümünde, oturum açma sayfası oluşturulur.

  3. OAuth sağlayıcı kimliğini FirebaseUI 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ı: Özel kapsamlar veya özel OAuth parametreleri belirtmek üzere provider ise yalnızca provider (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ı deneyin.

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

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

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

  4. İsteğe bağlı: PhoneAuthProvider, özel reCAPTCHA ile yapılandırılabilir parametrelerini kullanır (varsayılan olarak normal değerine ayarlanır). Daha fazla bilgi için reCAPTCHA API belgeleri inceleyebilirsiniz.

    Telefon numarası girişinde seçilecek varsayılan ülke de ayarlanabilir. Daha fazla bilgi için desteklenen ülke kodlarının listesi sayfasına bakın. Belirtilmemesi durumunda telefon numarası girişi varsayılan olarak ABD olur (+1) tuşuna basın.

    Şu anda aşağıdaki seçenekler 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'
    }
  ]
});

Oturum aç

FirebaseUI oturum açma akışını başlatmak için FirebaseUI örneğini şu şekilde başlatın: temel Auth örneğini iletir.

// 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ı (desteklenen sağlayıcılar ve kullanıcı arayüzü özelleştirmeleri) belirtin ve başarılı geri aramalar vb. bulunur).

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ı yeni sürüme geçirme

Anonim kullanıcı yükseltmesini etkinleştirme

Anonim bir kullanıcı oturum açtığında veya kalıcı bir hesapla kaydolduğunda kullanıcının kaydolmadan önce yaptığı işe devam edebileceğinden emin olmak için gereklidir. Bunun için, yapılandırma işlemi sırasında autoUpgradeAnonymousUsers politikasını true olarak ayarlamanız yeterlidir. oturum açma kullanıcı arayüzünü açın (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 yeni sürüme geçmeye çalıştığı durumlar olabilir. mevcut bir Firebase kullanıcısına dönüştürmenizi sağlar. Mevcut bir kullanıcı başka bir kullanıcıya bağlanamayacağı için mevcut kullanıcıysanız FirebaseUI, signInFailure geri çağırmasını hata kodu firebaseui/anonymous-upgrade-merge-conflict. Hata nesnesi, kalıcı kimlik bilgisini de içerir. Şununla oturum açın: oturum açmayı tamamlamak için geri çağırmada kalıcı kimlik bilgisi tetiklenmelidir. Oturum açma işleminin tamamlanması için: auth.signInWithCredential(error.credential), anonim olanı kaydetmelisiniz anonim kullanıcıyı silmelisiniz. Ardından, oturum açma işlemi tamamlandıktan sonra veriler, anonim olmayan kullanıcıya gönderilir. Aşağıdaki bir örnek, bunun nasıl çalıştığını göreceğiz.

// 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 BENİOKU.
  • FirebaseUI'de bir sorun bulursanız ve bunu bildirmek isterseniz GitHub sorun izleyici.