JavaScript ile Yahoo Kullanarak Kimlik Doğrulama

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

Başlamadan önce

Kullanıcıların Yahoo hesaplarını kullanarak oturum açabilmesi için önce Yahoo'u 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. Sağlayıcının geliştirici konsolundaki İstemci Kimliği ve İstemci Gizli Anahtarı'nı sağlayıcı yapılandırmasına ekleyin:
    1. Yahoo OAuth istemcisi kaydetmek için Yahoo'a web uygulaması kaydetme ile ilgili Yahoo geliştirici belgelerini uygulayın.

      İki OpenID 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ıyla yönetme

Web uygulaması geliştiriyorsanız kullanıcılarınızın Yahoo hesaplarını kullanarak Firebase ile kimlik doğrulamanın en kolay yolu, oturum açma akışının tamamını Firebase JavaScript SDK ile yönetmek olacaktır.

Oturum açma akışını Firebase JavaScript SDK'sı ile işlemek için aşağıdaki adımları uygulayın:

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

    WebWeb
    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    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.

    WebWeb
    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  
    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 dokümanlarına bakın. setCustomParameters() ile Firebase için zorunlu parametreleri iletemeyeceğinizi unutmayın. Bu parametreler client_id, redirect_uri, response_type, scope ve state'dir.

  3. İsteğe bağlı: Kimlik doğrulama sağlayıcıdan istemek istediğiniz profile ve email dışındaki ek OAuth 2.0 kapsamlarını belirtin. Uygulamanız, Yahoo API'lerinden gizli kullanıcı verilerine erişim gerektiriyorsa Yahoo Developer Console'da API İzinleri bölümünden Yahoo API'leri için izin isteğinde bulunmanız 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 isteniyorsa ve uygulamanın API izinlerinde önceden yapılandırılmışsa salt okunur OAuth kapsamı sdct-r yerine sdct-w iletilmesi gerekir. Aksi takdirde akış başarısız olur ve son kullanıcıya bir hata gösterilir.

    WebWeb
    // 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');
    // 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ğrulama Kullanıcılarınızdan bir pop-up pencere açarak veya oturum açma sayfasına yönlendirerek Yahoo Hesaplarıyla oturum açmalarını isteyebilirsiniz. Yönlendirme yöntemi, mobil cihazlarda tercih edilir.

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

      WebWeb
      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.
        });
      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önlendirilerek oturum açmak için signInWithRedirect numaralı telefonu arayın:

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

      firebase.auth().signInWithRedirect(provider);
      

    Kullanıcı oturum açmayı tamamlayıp sayfaya döndükten sonra getRedirectResult işlevini çağırarak oturum açma sonucunu elde edebilirsiniz.

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

    İşlem başarıyla 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, firebase.auth().currentUser.providerData[0].uid alanından veya result.additionalUserInfo.profile alanından 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ıyı mevcut bir kullanıcıya bağlayabilirsiniz. Örneğin, aynı kullanıcıya birden fazla sağlayıcı bağlayabilir ve kullanıcının bu sağlayıcılardan biriyle oturum açmasına izin verebilirsiniz.

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

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

Firebase konsolunda E-posta adresi başına bir hesap ayarını etkinleştirdiyseniz bir kullanıcı, başka bir Firebase kullanıcısının sağlayıcısında (Google gibi) zaten mevcut olan bir e-posta ile bir sağlayıcıda (Yahoo gibi) oturum açmaya çalıştığında auth/account-exists-with-different-credential hatası ve bir AuthCredential nesnesi (Yahoo kimlik bilgisi) oluşturulur. Kullanıcının, istenen sağlayıcıda oturum açmayı tamamlaması için önce mevcut sağlayıcıda (Google) oturum açması, ardından eski AuthCredential'e (Yahoo kimlik bilgisi) bağlantı oluşturması gerekir.

signInWithPopup kullanıyorsanız auth/account-exists-with-different-credential hatalarını aşağıdaki örnekteki gibi bir kodla yönetebilirsiniz:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Yahoo.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Yahoo credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Yahoo credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Yönlendirme modu

Bu hata, bekleyen kimlik bilgisinin sayfa yönlendirmeleri arasında önbelleğe alınması (ör. oturum depolama alanı kullanılarak) gerektiği dışında yönlendirme modunda benzer şekilde ele alınır.

Oturum açmanın doğrudan OAuth erişim jetonu tabanlı kimlik bilgileriyle sağlanabildiği Google, Facebook ve Twitter gibi Firebase tarafından desteklenen diğer OAuth sağlayıcıların aksine Firebase Auth, Firebase Auth sunucusunun Yahoo OAuth erişim jetonlarının kitlesini doğrulayamadığı için Yahoo gibi sağlayıcılar için aynı özelliği desteklemez. Bu kritik bir güvenlik koşuludur ve uygulamaları ve web sitelerini, bir proje (saldırgan) için elde edilen Yahoo OAuth erişim jetonunun başka bir projede (kurban) oturum açmak için kullanılabileceği yeniden oynatma saldırılarına maruz bırakabilir. Bunun yerine Firebase Auth, Firebase konsolunda yapılandırılmış OAuth istemci kimliğini ve sırrını kullanarak OAuth akışının tamamını ve yetkilendirme kodu alışverişini yönetme olanağı sunar. Yetkilendirme kodu yalnızca belirli bir istemci kimliği/gizli anahtarıyla birlikte kullanılabildiğinden, bir proje için elde edilen yetkilendirme kodu başka bir projede kullanılamaz.

Bu sağlayıcıların desteklenmeyen ortamlarda kullanılması gerekiyorsa bir üçüncü taraf OAuth kitaplığı ve Firebase özel kimlik doğrulaması kullanılmalıdır. İlki, sağlayıcıyla kimlik doğrulama yapmak için, ikincisi ise sağlayıcının kimlik bilgilerini özel bir jetonla değiştirmek için gereklidir.

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

Chrome uzantısı uygulaması geliştiriyorsanız Ekran Dışı Dokümanlar kılavuzuna göz atın.

Proje oluşturulduğunda Firebase, projeniz için benzersiz bir alt alan adı sağlar: https://my-app-12345.firebaseapp.com.

Bu URL, OAuth ile oturum açma işlemi için yönlendirme mekanizması olarak da kullanılır. Bu alanın, desteklenen tüm OAuth sağlayıcıları için izin vermesi gerekir. Ancak bu, kullanıcıların uygulamaya geri yönlendirilmeden önce Yahoo'da oturum açarken şu alanı görebileceği anlamına gelir: https://uygulamam-12345.firebaseapp.com adresine devam edin.

Alt alan adınızın gösterilmesini önlemek için Firebase Hosting ile özel bir alan adı oluşturabilirsiniz:

  1. Hosting için alanınızı ayarlama başlıklı makaledeki 1 ile 3 arasındaki adımları uygulayın. Alanınızın sahipliğini doğruladığınızda Hosting, özel alanınız için SSL sertifikası sağlar.
  2. Özel alanınızı Firebase konsolundaki yetkili alanlar listesine ekleyin: auth.custom.domain.com.
  3. Yahoo Developer Console'da veya OAuth kurulum sayfasında, özel alanınızda erişilebilen yönlendirme sayfasının URL'sini beyaz listeye ekleyin: https://auth.custom.domain.com/__/auth/handler.
  4. JavaScript kitaplığını başlatırken authDomain alanıyla özel alanınızı belirtin:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

Sonraki adımlar

Kullanıcı ilk kez oturum açtıktan sonra yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açarken kullandığı kimlik bilgilerine (yani kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) 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 öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları yönetme başlıklı makaleyi inceleyin.

  • Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açmış 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 uygulamanızda birden fazla kimlik doğrulama sağlayıcı kullanarak oturum açmasına izin verebilirsiniz.

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

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

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