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

Yahoo'yu JavaScript ile Kullanarak Kimlik Doğrulama

Uçtan uca oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak genel OAuth Login'i uygulamanıza entegre ederek, kullanıcılarınızın Yahoo gibi OAuth sağlayıcılarını kullanarak Firebase ile kimlik doğrulamasını sağlayabilirsiniz.

Sen başlamadan önce

Yahoo hesaplarını kullanan kullanıcılarda oturum açmak için, önce Firebase projeniz için bir oturum açma sağlayıcısı olarak Yahoo'yu etkinleştirmelisiniz:

  1. JavaScript projeye Firebase ekleyin .
  2. In Firebase konsoluna , Auth bölümünü açın.
  3. Yöntem sekmesinde İşaret Üzerine, Yahoo sağlayıcı sağlar.
  4. Sağlayıcı yapılandırmasına o sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Sırrı ekleyin:
    1. Bir Yahoo OAuth istemcisi kaydetmek için, Yahoo geliştirici belgeleri izleyin Yahoo ile bir web uygulaması kaydedilirken .

      : İki OpenID Bağlan API izinlerini seçtiğinizden emin olun profile ve email .

    2. Bu sağlayıcılar ile uygulamaları kaydederken, kayıt emin olun *.firebaseapp.com uygulamanız için yönlendirme alanı olarak projeniz için domain.
  5. Kaydet seçeneğini tıklayın.

Firebase SDK ile oturum açma akışını yönetin

Bir web uygulaması oluşturuyorsanız, kullanıcılarınızın Yahoo hesaplarını kullanarak Firebase ile kimliklerini doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase JavaScript SDK'sı ile yönetmektir.

Firebase JavaScript SDK ile oturum açma akışını yönetmek için şu adımları izleyin:

  1. Sağlayıcı kimliğini yahoo.com kullanarak bir OAuthProvider bir örneğini oluşturun.

    Web sürümü 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    Web sürümü 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. İsteğe bağlı: OAuth isteği ile göndermek istediğiniz ek özel OAuth parametrelerini belirtin.

    Web sürümü 9

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Web sürümü 8

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Parametreler Yahoo desteklerin için bkz Yahoo OAuth belgelerine . Birlikte Firebase-gerekli parametreleri geçemediği Not setCustomParameters() . Bu parametreler client_id, redirect_uri, response_type, kapsam ve devlet vardır.

  3. İsteğe bağlı: Ek OAuth ötesinde 2.0 kapsamlarını belirtme profile ve email kimlik doğrulama sağlayıcısından talep istediğimi. Başvurunuz Yahoo API'larından özel kullanıcı verilerine erişim gerektiriyorsa, Yahoo geliştirici konsolunda API izinleriVarsayılanı Yahoo API'leri isteği izinleri gerekir. İstenen OAuth kapsamları, uygulamanın API izinlerinde önceden yapılandırılmış olanlarla tam olarak eşleşmelidir. Okuma, Örneğin / yazma erişimi Kullanıcı kişilerin istenir ve uygulamanın API izinleri önceden sdct-w yerine salt okunur OAuth kapsamı içinde geçirilmiş değil sdct-r . Aksi takdirde akış başarısız olur ve son kullanıcıya bir hata gösterilir.

    Web sürümü 9

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    Web sürümü 8

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    Daha fazla bilgi için bakınız Yahoo'nun kapsamları belgelerinde .

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. Bir açılır pencere açarak veya oturum açma sayfasına yeniden yönlendirerek kullanıcılarınızdan Yahoo Hesaplarıyla oturum açmalarını isteyebilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilmektedir.

    • Bir pop-up penceresi ile oturum için çağrı signInWithPopup :

      Web sürümü 9

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

      Web sürümü 8

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • Oturum açma sayfası, çağrı yönlendirme yaparak oturum açmak için signInWithRedirect :

      firebase.auth().signInWithRedirect(provider);
      

      Kullanıcı tamamlandıktan sonra oturum açma sayfasına ve iadeler, sen arayarak oturum açma sonucu elde edebilirsiniz getRedirectResult .

      Web sürümü 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web sürümü 8

      firebase.auth().signInWithRedirect(provider);

    Başarıyla tamamlayan OAuth jetonu kimliği ve sağlayıcısı ile bağlantılı belirteç ile erişim alınabilir firebase.auth.UserCredential döndürülen nesne.

    OAuth erişim jetonu kullanarak, çağırabilir Yahoo API .

    Örneğin, temel profil bilgilerini almak için aşağıdaki REST API çağrılabilir:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    Burada YAHOO_USER_UID alınabilir Yahoo kullanıcının ID firebase.auth().currentUser.providerData[0].uid alanı ya da gelen result.additionalUserInfo.profile .

  5. Yukarıdaki örnekler odaklanırken oturum açma akışları, ayrıca kullanarak mevcut kullanıcıya bir Yahoo sağlayıcı bağlama yetkisi vardır linkWithPopup / linkWithRedirect . Örneğin, birden çok sağlayıcıyı aynı kullanıcıya bağlayarak her ikisiyle de oturum açmalarını sağlayabilirsiniz.

    Web sürümü 9

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web sürümü 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. Aynı desen ile kullanılabilir reauthenticateWithPopup / reauthenticateWithRedirect son girişi gerektiren hassas operasyonlar için taze kimlik bilgilerini almak için kullanılabilir.

    Web sürümü 9

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web sürümü 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bir Chrome uzantısı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemeniz gerekir:

  1. Projenizi açın Firebase konsoluna .
  2. Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasında açın.
  3. : Yetkili Alanlar listesine aşağıdaki gibi bir URI ekle
    chrome-extension://CHROME_EXTENSION_ID

Sadece pop-up işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup Chrome uzantıları HTTP yönlendirmeleri kullanamaz gibi), Chrome uzantıları için kullanılabilir. Kimlik doğrulama açılır penceresi tarayıcı eylemi açılır penceresini iptal edeceğinden, bu yöntemleri bir tarayıcı eylemi açılır penceresi yerine bir arka plan sayfası komut dosyasından çağırmalısınız. Popup yöntemleri kullanarak uzantılarda yalnızca kullanılabilir Manifest V2 . Yeni Manifest V3 sadece hiç pop-up işlemleri gerçekleştiremiyor hizmet işçilerinin şeklinde, arka plan komut dosyaları sağlar.

Chrome uzantısının bildirim dosyası marka olarak eklemek emin https://apis.google.com URL content_security_policy AllowList.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açtığı kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcısı bilgileri gibi kimlik bilgilerine bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığından bağımsız olarak projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızla olarak, kullanıcı yetkilendirme durumunu öğrenmek için tavsiye edilen yöntem üzerinde bir gözlemci ayarlamaktır Auth nesnesine. Daha sonra, kullanıcının temel profil bilgileri alabilirsiniz User nesnesi. Bkz Kullanıcıları Yönetme .

  • Senin Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama yılında Güvenlik Kuralları , alabilirsiniz, kullanıcının benzersiz bir kullanıcı kimliği imzalı auth değişkeni ve hangi verilerin kullanıcı teneke erişimi kontrol etmek için kullanabilirsiniz.

Kullanıcıların birden çok kimlik doğrulama sağlayıcıları kullanarak uygulamada oturum izin verebilir mevcut bir kullanıcı hesabına auth sağlayıcı kimlik bilgilerini birbirine bağlayan.

Bir kullanıcı Oturumu kapatmak için çağrı signOut :

Web sürümü 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web sürümü 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});