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 Girişini 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 olanak tanıyabilirsiniz.

Sen başlamadan önce

Yahoo hesaplarını kullanarak kullanıcılarda oturum açmak için öncelikle Yahoo'yu Firebase projenizde oturum açma sağlayıcısı olarak 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. Bu sağlayıcının geliştirici konsolundan İstemci Kimliğini ve İstemci Sırrını sağlayıcı yapılandırmasına ekleyin:
    1. Bir Yahoo OAuth istemcisini kaydetmek için, Yahoo'ya bir web uygulamasının kaydedilmesine ilişkin Yahoo geliştirici belgelerini izleyin.

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

    2. Uygulamaları bu sağlayıcılara kaydederken projeniz için *.firebaseapp.com alan adını uygulamanızın yönlendirme 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, Yahoo hesaplarını kullanarak kullanıcılarınızın Firebase ile kimliklerini doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase JavaScript SDK ile yönetmektir.

Firebase JavaScript SDK'sıyla 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 modular API

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

    Web namespaced API

    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 modular API

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

    Web namespaced API

    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 client_id , yönlendirme_uri , yanıt_tipi , kapsam ve durumdur .

  3. İsteğe bağlı : Kimlik doğrulama sağlayıcısından istemek istediğiniz profile ve email ötesinde ek OAuth 2.0 kapsamlarını belirtin. Uygulamanız, Yahoo API'lerinden gelen özel kullanıcı verilerine erişim gerektiriyorsa, Yahoo geliştirici konsolundaki API İzinleri altında Yahoo API'lerine yönelik izinler 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 istenirse ve uygulamanın API izinlerinde önceden yapılandırılmışsa, salt okunur OAuth kapsamı sdct-r yerine sdct-w iletilmelidir. Aksi halde akış başarısız olacak ve son kullanıcıya bir hata gösterilecektir.

    Web modular API

    // 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 namespaced API

    // 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.

    • Açılır pencereyle oturum açmak için signInWithPopup çağırın:

      Web modular API

      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 namespaced API

      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 çağırın:

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

      firebase.auth().signInWithRedirect(provider);
      

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

    Web modular API

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

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

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

    OAuth erişim belirtecini kullanarak Yahoo API'yi çağırabilirsiniz.

    Ö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ısının kimliğidir.

  5. Yukarıdaki örnekler oturum açma akışlarına odaklansa da, linkWithPopup / linkWithRedirect kullanarak bir Yahoo sağlayıcısını mevcut bir kullanıcıya bağlama olanağınız da vardır. Örneğin, birden fazla sağlayıcıyı aynı kullanıcıya bağlayarak onların ikisinden biriyle oturum açmasına olanak tanıyabilirsiniz.

    Web modular API

    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 namespaced API

    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 amacıyla kullanılabilen reauthenticateWithPopup / reauthenticateWithRedirect ile birlikte kullanılabilir.

    Web modular API

    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 namespaced API

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

Chrome uzantısında Firebase ile kimlik doğrulama

Bir Chrome uzantısı uygulaması oluşturuyorsanız Ekran Dışı Belgeler kılavuzuna bakın.

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 bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanı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 Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

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

Kimlik doğrulama sağlayıcısı 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 modular API

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

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

Web namespaced API

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