JavaScript ile Yahoo Kullanarak Kimlik Doğrulama

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

Başlamadan önce

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

  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ına ekleyin:

    1. Yahoo OAuth istemcisi kaydetmek için Yahoo'ya web uygulaması kaydetme konulu Yahoo geliştirici dokümanlarını uygulayın.

      Şu iki RFC Connect API iznini seçtiğinizden emin olun: profile ve email.

    2. Bu sağlayıcılara uygulama kaydederken projenizin *.firebaseapp.com alanı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'sı ile yönetme

Bir web uygulaması oluşturuyorsanız, Yahoo hesaplarını kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu, oturum açma akışının tamamını Firebase JavaScript SDK ile yürütmektir.

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

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

    Web modüler API

    import { OAuthProvider } from "firebase/auth";

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

    Web ad alanı API'si

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

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

    Web modüler API

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

    Web ad alanı API'si

    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ına bakın. Firebase için gerekli parametreleri setCustomParameters() ile iletemeyeceğinizi unutmayın. Bu parametreler client_id, redirect_uri, response_type, scope ve state parametreleridir.

  3. İsteğe bağlı: Kimlik doğrulama sağlayıcısından istemek istediğiniz, profile ve email dışında ek OAuth 2.0 kapsamları belirtin. Uygulamanız Yahoo API'lerinden gizli kullanıcı verilerine erişim gerektiriyorsa Yahoo geliştirici konsolundaki API İzinleri bölümünden Yahoo API'lerine izin istemeniz gerekir. İstenen OAuth kapsamları, uygulamanın API izinlerindeki önceden yapılandırılmış kapsamlarla 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 geçirilmelidir. Aksi takdirde, akış başarısız olur ve son kullanıcıya bir hata gösterilir.

    Web modüler 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');
    auth_yahoo_provider_scopes.js

    Web ad alanı API'si

    // 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ına bakın.

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Bir pop-up 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 edilir.

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

      Web modüler 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.
  });
      auth_yahoo_signin_popup.js

      Web ad alanı API'si

      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:

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

      firebase.auth().signInWithRedirect(provider);

    Kullanıcı oturum açmayı tamamlayıp sayfaya geri döndüğünde, getRedirectResult numaralı telefonu arayarak oturum açma sonucunu alabilirsiniz.

    Web modüler API

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

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

    Web ad alanı API'si

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

    İşlem tamamlandığında, sağlayıcıyla ilişkili OAuth kimlik jetonu ve erişim jetonu, döndürülen firebase.auth.UserCredential nesnesinden alınabilir.

    OAuth erişim jetonunu 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

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

  5. Yukarıdaki örnekler oturum açma akışlarına odaklansa da, bir Yahoo sağlayıcısını mevcut bir kullanıcıya linkWithPopup/linkWithRedirect kullanarak bağlayabilirsiniz. Örneğin, birden fazla sağlayıcıyı aynı kullanıcıya bağlayarak bu iki sağlayıcıdan biriyle oturum açmalarını sağlayabilirsiniz.

    Web modüler 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.
    });
    auth_yahoo_link_popup.js

    Web ad alanı API'si

    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ı kalıp, yakın zamanda giriş yapılmasını gerektiren hassas işlemler için yeni kimlik bilgilerini almak amacıyla reauthenticateWithPopup/reauthenticateWithRedirect ile kullanılabilir.

    Web modüler 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.
    });
    auth_yahoo_reauth_popup.js

    Web ad alanı API'si

    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 Dokümanlar Dışı Dokümanlar rehberine 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 bilgilerine (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgisi) 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 kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmek için önerilen yol, Auth nesnesinde bir gözlemci ayarlamaktır. Daha sonra, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları Yönetme sayfasına göz atın.

  • Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve 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ı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

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

Web modüler API

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 ad alanı API'si

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