Yahoo'yu JavaScript ile Kullanarak Kimlik Doğrulama

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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ı yapmasına izin verebilirsiniz.

Sen başlamadan önce

Kullanıcıların Yahoo hesaplarını kullanarak oturum açması için öncelikle Firebase projeniz için bir oturum açma sağlayıcısı olarak Yahoo'yu etkinleştirmeniz gerekir:

  1. Firebase'i JavaScript projenize ekleyin .
  2. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
  3. Oturum açma yöntemi sekmesinde Yahoo sağlayıcısını etkinleştirin.
  4. Sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Sırrını sağlayıcı yapılandırmasına ekleyin:
    1. Bir Yahoo OAuth istemcisini kaydettirmek için, Yahoo'ya web uygulaması kaydetme hakkındaki Yahoo geliştirici belgelerini izleyin.

      İki OpenID Connect API iznini seçtiğinizden emin olun: profile ve email .

    2. Bu sağlayıcılara uygulama kaydederken, projeniz için *.firebaseapp.com etki alanını uygulamanız için yönlendirme etki alanı olarak kaydettiğinizden emin olun.
  5. Kaydet'i tıklayın .

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

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

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

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

    Web version 9

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

    Web version 8

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

    Web version 9

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

    Web version 8

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

    Yahoo'nun desteklediği parametreler için Yahoo OAuth belgelerine bakın. Firebase için gerekli parametreleri setCustomParameters() ile iletemeyeceğinizi unutmayın. Bu parametreler şunlardır: client_id , redirect_uri , answer_type , kapsam ve durum .

  3. İsteğe bağlı : Kimlik doğrulama sağlayıcısından talep etmek istediğiniz profile ve email ötesinde ek OAuth 2.0 kapsamları belirtin. Uygulamanız Yahoo API'lerinden özel kullanıcı verilerine erişim gerektiriyorsa, Yahoo geliştirici konsolundaki API İzinleri altında Yahoo API'leri için izin istemeniz gerekir. İstenen OAuth kapsamları, uygulamanın API izinlerinde önceden yapılandırılmış olanlarla tam olarak eşleşmelidir. Örneğin, kullanıcı kişilerine okuma/yazma erişimi isteniyorsa ve uygulamanın API izinlerinde önceden yapılandırılmışsa, salt okunur OAuth kapsamı sdct-r yerine sdct-w geçirilmelidir. Aksi takdirde akış başarısız olur ve son kullanıcıya bir hata gösterilir.

    Web version 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 version 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 edinmek için Yahoo kapsamları belgelerine bakın.

  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 yönlendirerek kullanıcılarınızdan Yahoo Hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilmektedir.

    • Bir açılır pencereyle oturum açmak için signInWithPopup :

      Web version 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 version 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ına yönlendirerek oturum açmak için signInWithRedirect :

    signInWithRedirect , linkWithRedirect veya reauthenticateWithRedirect kullanırken en iyi uygulamaları takip edin.

      firebase.auth().signInWithRedirect(provider);
      

    Kullanıcı oturum açma işlemini tamamlayıp sayfaya döndükten sonra getRedirectResult çağırarak oturum açma sonucunu alabilirsiniz.

    Web version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    Başarıyla tamamlandığında, sağlayıcıyla ilişkili OAuth Kimliği belirteci ve erişim belirteci, döndürülen firebase.auth.UserCredential nesnesinden alınabilir.

    OAuth erişim belirtecini kullanarak Yahoo API'yi arayabilirsiniz.

    Ö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
    

    YAHOO_USER_UID , firebase.auth().currentUser.providerData[0].uid alanından veya result.additionalUserInfo.profile adresinden alınabilen Yahoo kullanıcı kimliğidir.

  5. Yukarıdaki örnekler oturum açma akışlarına odaklansa da, bir Yahoo sağlayıcısını linkWithPopup / linkWithRedirect kullanarak mevcut bir kullanıcıya bağlama olanağına da sahipsiniz. Örneğin, birden çok sağlayıcıyı aynı kullanıcıya bağlayarak onların herhangi biriyle oturum açmasını sağlayabilirsiniz.

    Web version 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 version 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ı model, yakın zamanda oturum açmayı gerektiren hassas işlemler için yeni kimlik bilgileri almak üzere kullanılabilen reauthenticateWithPopup / reauthenticateWithRedirect ile kullanılabilir.

    Web version 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 version 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ı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemelisiniz:

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

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) Chrome uzantıları tarafından 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 penceresinden ziyade bir arka plan sayfası komut dosyasından çağırmalısınız. Açılır pencere yöntemleri yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni Manifest V3 , yalnızca açılır pencere işlemlerini hiç gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.

Chrome uzantınızın bildirim dosyasında, https://apis.google.com URL'sini content_security_policy izin verilenler listesine eklediğinizden emin olun.

Sonraki adımlar

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

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu, Auth nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz. Kullanıcıları Yönetin .

  • Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenlik Kurallarınızda , oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, bir kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak, kullanıcıların birden fazla kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut arayın:

Web version 9

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

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

Web version 8

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