JavaScript ile Yahoo Kullanarak Kimlik Doğrulama

Kullanıcılarınızın aşağıdaki gibi OAuth sağlayıcıları kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz: Firebase SDK'sını kullanıp uygulamanıza genel OAuth Giriş'i entegre ederek Yahoo! uçtan uca oturum açma akışını nasıl uygulayacağınızı belirleyin.

Başlamadan önce

Yahoo hesaplarını kullanarak kullanıcıların oturumunu açmak için öncelikle Yahoo'yu oturum açma bilgileri olarak etkinleştirmeniz gerekir Firebase projeniz için sağlayıcı:

  1. Firebase'i JavaScript projenize ekleyin.
  2. Firebase konsolunda Auth bölümünü açın.
  3. Oturum açma yöntemi sekmesinde Yahoo sağlayıcısını etkinleştirin.
  4. Söz konusu sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Gizli Anahtarı'nı sağlayıcı yapılandırması:

    1. Yahoo OAuth istemcisi kaydetmek için: Yahoo OAuth geliştiricisindeki ile ilgili dokümanlar Yahoo'ya bir web uygulaması kaydetme.

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

    2. Bu sağlayıcılara uygulama kaydederken şunu kaydettiğinizden emin olun: Projenizin *.firebaseapp.com alan adını uygulamasını indirin.
  5. Kaydet'i tıklayın.

Oturum açma akışını Firebase SDK'sı ile yönetme

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu Yahoo hesaplarını kullanan Firebase, oturum açma akışının tamamını yönetmek için .

Oturum açma akışını Firebase JavaScript SDK ile yönetmek için aşağıdaki adımları uygulayın:

  1. Sağlayıcı kimliğini kullanarak OAuthProvider örneği oluşturma yahoo.com adresinde kayıtlıdır.

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');
    auth_yahoo_provider_create.js

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    yahoo-oauth.js

  2. İsteğe bağlı: Eklemek istediğiniz ek özel OAuth parametrelerini belirtin OAuth isteğiyle gönderir.

    Web

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

    Web

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

    Yahoo'nun desteklediği parametreler için Yahoo OAuth dokümanları. Firebase'in gerekli parametrelerini setCustomParameters() Bu parametreler client_id, redirect_uri, response_type, scope ve state değişkenlerini kullanabilirsiniz.

  3. İsteğe bağlı: profile dışında ek OAuth 2.0 kapsamları belirtin ve Kimlik doğrulama sağlayıcıdan istekte bulunmak istediğiniz email. Eğer uygulamasının Yahoo API'lerinden gizli kullanıcı verilerine erişmesi gerektiğinde, API İzinleri altında Yahoo API'lerine Yahoo geliştirici konsolu. İstenen OAuth kapsamları uygulamanın API izinlerinde önceden yapılandırılmış olanları içerir. Örneğin, okuma/yazma kullanıcının kişilerine erişim istendi ve uygulamanın API'sinde önceden yapılandırıldı izinleri için salt okunur OAuth kapsamı yerine sdct-w iletilmelidir sdct-r. Aksi takdirde, akış başarısız olur ve yardımcı olur.

    Web

    // 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');
    auth_yahoo_provider_scopes.js

    Web

    // 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');
    yahoo-oauth.js

    Daha fazla bilgi edinmek için Yahoo kapsamları dokümanları.

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Etkili bir ekip oluşturmak için önce bir oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilir.

    • Pop-up pencereyle oturum açmak için signInWithPopup numaralı telefonu arayın:

      Web

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

      Web

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

    • Oturum açma sayfasına yönlendirerek oturum açmak için signInWithRedirect çağırın:

      firebase.auth().signInWithRedirect(provider);

    Kullanıcı oturum açmayı tamamlayıp sayfaya geri döndüğünde oturum açma sonucunu getRedirectResult çağırarak devre dışı bırakabilirsiniz.

    Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_yahoo_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    yahoo-oauth.js

    İşlem tamamlandığında, OAuth kimlik jetonu ve erişim jetonu ilişkilendirilir. sağlayıcıdan alınabilir: firebase.auth.UserCredential nesne döndürüldü.

    OAuth erişim jetonunu kullanarak Yahoo API'sı.

    Örneğin, temel profil bilgilerini almak için aşağıdaki REST API şöyle adlandı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, Yahoo kullanıcısının kimliğidir ve şuradan alınabilir: firebase.auth().currentUser.providerData[0].uid alanından veya result.additionalUserInfo.profile.

  5. Yukarıdaki örneklerde oturum açma akışlarına odaklanılsa da kullanarak bir Yahoo sağlayıcısını mevcut bir kullanıcıya bağlama linkWithPopup/linkWithRedirect Örneğin, birden çok sağlayıcıyı aynı kullanıcıya göstererek bu iki sağlayıcıdan ikisiyle de oturum açabilmesini sağlar.

    Web

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

    Web

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

  6. Aynı desen aşağıdaki Şu amaçlarla kullanılabilir: reauthenticateWithPopup/reauthenticateWithRedirect yakın zamanda işlem yapılmasını gerektiren hassas işlemler için yeni kimlik bilgilerini alma giriş yapın.

    Web

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

    Web

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

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

Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

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

Web

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

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

Web

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