Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

FirebaseUI, Firebase Authentication SDK'sının üzerine kurulmuş bir kitaplıktır ve uygulamanızda kullanılmak üzere hazır kullanıcı arayüzü akışları sağlar. FirebaseUI aşağıdaki avantajları sunar:

Birden fazla sağlayıcı: E-posta/şifre, e-posta bağlantısı, telefon kimlik doğrulaması, Google, Facebook, Twitter ve GitHub ile 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ğlama akışları.
Özelleştirme: FirebaseUI'nin CSS stillerini, uygulamanızın gereksinimlerine uyacak şekilde geçersiz kılın. Ayrıca FirebaseUI açık kaynaklı olduğundan projeyi çatallayabilir ve tam olarak ihtiyaçlarınıza göre özelleştirebilirsiniz.
Tek dokunuşla kaydolma ve otomatik oturum açma: Cihazlar arasında hızlı oturum açma için tek dokunuşla kaydolma özelliğiyle otomatik entegrasyon.
Yerelleştirilmiş kullanıcı arayüzü: 40'tan fazla dil için uluslararasılaştırma.
Anonim kullanıcıları yükseltme: Anonim kullanıcıları oturum açma/kaydolma yoluyla yükseltme olanağı. Daha fazla bilgi için Anonim kullanıcıları yükseltme bölümünü ziyaret edin.

Başlamadan önce

Web uygulamanıza Firebase Authentication'ı ekleyin. Bu işlemi yaparken v9 veya sonraki ad alanlı API'yi kullandığınızdan emin olun (modüler API değil; yukarıdaki kenar çubuğuna bakın).
FirebaseUI'yı aşağıdaki seçeneklerden biriyle ekleyin:
- CDN
  
  Aşağıdaki komut dosyasını ve CSS dosyasını sayfanızın <head> etiketine, Firebase konsolundan alınan başlatma snippet'inin altına 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" />
```
- npm Modülü
  
  Aşağıdaki komutu kullanarak FirebaseUI'ı ve bağımlılıklarını npm üzerinden yükleyin:
```
$ npm install firebaseui --save
```
  Kaynak dosyalarınızdaki require modülleri:
```
var firebase = require('firebase');
var firebaseui = require('firebaseui');
```
- Bower Component
  
  Aşağıdaki komutu kullanarak FirebaseUI'ı ve bağımlılıklarını Bower üzerinden 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'yı başlatma

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 ayarlama

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

E-posta adresi ve şifre

Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.
Oturum açma yöntemi sekmesinde, E-posta/Şifre oturum açma sağlayıcısını etkinleştirin.

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

İsteğe bağlı: EmailAuthProvider, kullanıcının görünen ad girmesini gerektirecek şekilde yapılandırılabilir (varsayılan olarak true).

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

E-posta bağlantısı kimlik doğrulaması

Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.
Oturum açma yöntemi sekmesinde, E-posta/Şifre oturum açma sağlayıcısını etkinleştirin. E-posta bağlantısı ile oturum açma özelliğini kullanmak için e-posta/şifre ile oturum açma özelliğinin etkinleştirilmesi gerektiğini unutmayın.
Aynı bölümde E-posta bağlantısı (şifresiz oturum açma) oturum açma sağlayıcısını etkinleştirin.
Kaydet'i tıklayın.

E-posta sağlayıcı kimliğini, e-posta bağlantısıyla birlikte FirebaseUI signInOptions listesine ekleyin 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...
});

Oturum açma kullanıcı arayüzünü koşullu olarak oluştururken (tek sayfalık 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çma işlemini tamamlamak için kullanıcı arayüzünün 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);
}
```

İsteğe bağlı: E-posta bağlantısıyla oturum açma için EmailAuthProvider, kullanıcının cihazlar arası oturum açma işlemini tamamlamasına izin verecek veya bu işlemi 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 çağırma işlevi tanımlanabilir. Bu parametre, bağlantının nasıl işleneceğini, özel dinamik bağlantıyı, derin bağlantıdaki ek durumu vb. belirtme olanağı sağlar. Bu parametre sağlanmadığında mevcut URL kullanılır ve yalnızca web'e özel bir akış tetiklenir.

FirebaseUI-web'deki e-posta bağlantısı ile giriş özelliği, FirebaseUI-Android ve FirebaseUI-iOS ile uyumludur. Bu durumda, akışı FirebaseUI-Android'den başlatan bir kullanıcı bağlantıyı açıp FirebaseUI-web ile giriş işlemini tamamlayabilir. Aynı durum 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)

Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.
Oturum açma yöntemi sekmesinde, belirtilen OAuth sağlayıcı oturum açma özelliğini etkinleştirin. İlgili OAuth istemci kimliğinin ve gizli anahtarının da belirtildiğinden emin olun.
Henüz yapmadıysanız uygulamanızın alanını yetkilendirin:
1. Firebase konsolunda Güvenlik > Kimlik doğrulama > Ayarlar sekmesine gidin.
2. Yetkili alanlar bölümünde Alan ekle'yi tıklayın ve alanınızı ekleyin.

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

İsteğe bağlı: Özel kapsamlar veya sağlayıcı başına ö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ı

Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.
Oturum açma yöntemi sekmesinde, Telefon oturum açma sağlayıcısını etkinleştirin.
Henüz yapmadıysanız uygulamanızın alanını yetkilendirin:
1. Firebase konsolunda Güvenlik> Kimlik doğrulama > Ayarlar sekmesine gidin.
2. Yetkili alanlar bölümünde Alan ekle'yi tıklayın ve alanınızı ekleyin.

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

İsteğe bağlı: PhoneAuthProvider, reCAPTCHA'nın görünür veya görünmez olmasına bakılmaksızın özel reCAPTCHA parametreleriyle yapılandırılabilir (varsayılan olarak normaldir). Daha fazla bilgi 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. Belirtilmemişse telefon numarası girişi varsayılan olarak ABD (+1) olur.

Ş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 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ı (desteklenen sağlayıcılar ve kullanıcı arayüzü özelleştirmelerinin yanı sıra başarı geri çağırmaları vb.) belirtin.

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ığı işlemlere devam edebildiğinden emin olmak istersiniz. Bunu yapmak için oturum açma kullanıcı arayüzünü yapılandırırken autoUpgradeAnonymousUsers seçeneğini 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 olabilir. Mevcut bir kullanıcı başka bir mevcut kullanıcıya bağlanamayacağından, yukarıdaki durum gerçekleştiğinde FirebaseUI, signInFailure geri çağırmasını firebaseui/anonymous-upgrade-merge-conflict hata koduyla tetikler. Hata nesnesi, kalıcı kimlik bilgisini de içerir. Oturum açma işlemini tamamlamak için geri çağırmada kalıcı kimlik bilgileriyle oturum açma işlemi tetiklenmelidir. Oturum açma işleminin auth.signInWithCredential(error.credential) üzerinden tamamlanabilmesi için anonim kullanıcının verilerini kaydetmeniz ve anonim kullanıcıyı silmeniz gerekir. Ardından, oturum açma işlemi tamamlandıktan sonra verileri anonim olmayan kullanıcıya geri kopyalayın. Aşağıdaki örnekte bu akışın nasıl işleyeceği gösterilmektedir.

// 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'ı kullanma ve özelleştirme hakkında daha fazla bilgi için README dosyasını ziyaret edin.
FirebaseUI'da bir sorun bulursanız ve bunu bildirmek isterseniz GitHub sorun izleyiciyi kullanın.