JavaScript ile Yahoo Kullanarak Kimlik Doğrulama

Firebase SDK'yı kullanarak uçtan uca oturum açma akışını gerçekleştirmek için genel OAuth oturum açma özelliğ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çmasını sağlamak için öncelikle Firebase projenizde oturum açma sağlayıcısı olarak Yahoo'yu etkinleştirmeniz gerekir:

Firebase'i JavaScript projenize ekleyin.
Firebase konsolunda Auth (Kimlik Doğrulama) bölümünü açın.
Oturum açma yöntemi sekmesinde Yahoo sağlayıcısını etkinleştirin.
İlgili 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 geliştirici belgelerindeki Yahoo ile web uygulaması kaydetme bölümünü inceleyin.
  
  İki OpenID Connect API iznini seçtiğinizden emin olun: profile ve email.
2. Uygulamaları bu sağlayıcılara kaydederken projenizin *.firebaseapp.com alanını uygulamanızın yönlendirme alanı olarak kaydettiğinizden emin olun.
Kaydet'i tıklayın.

Firebase SDK ile oturum açma akışını yönetme

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

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

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

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

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

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

İsteğe bağlı: Kimlik doğrulama sağlayıcısından istemek istediğiniz profile ve email dışındaki ek OAuth 2.0 kapsamlarını belirtin. Uygulamanızın Yahoo API'lerinden gelen özel kullanıcı verilerine erişmesi gerekiyorsa Yahoo geliştirici konsolundaki API İzinleri bölümünde Yahoo API'lerine izin isteğinde bulunmanız 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ı yerine sdct-w kapsamı iletilmelidir sdct-r. Aksi takdirde akış başarısız olur ve son kullanıcıya bir hata gösterilir.
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 için Yahoo kapsamları belgelerine bakın.

OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Kullanıcılarınızdan, 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 işlevini çağırı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 numaralı telefonu arayın:

  firebase.auth().signInWithRedirect(provider);

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

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

Başarıyla tamamlandıktan sonra, 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'sini ç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 adresinden alınabilen Yahoo kullanıcısının kimliğidir.

Yukarıdaki örnekler oturum açma akışlarına odaklanırken linkWithPopup/linkWithRedirect kullanarak bir Yahoo sağlayıcısını mevcut bir kullanıcıya bağlama olanağına da sahipsiniz. Örneğin, aynı kullanıcıya birden fazla sağlayıcı bağlayarak kullanıcının her ikisiyle de oturum açmasına izin verebilirsiniz.

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

Aynı kalıp, son giriş gerektiren hassas işlemler için yeni kimlik bilgilerini almak üzere kullanılabilen reauthenticateWithPopup/reauthenticateWithRedirect ile de kullanılabilir.

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

Hesap-farklı-kimlik-bilgisiyle-var hatasını düzeltme

Firebase konsolunda Her e-posta adresi için bir hesap ayarını etkinleştirdiyseniz bir kullanıcı, başka bir Firebase kullanıcısının sağlayıcısı (ör. Google) için zaten mevcut olan bir e-postayla bir sağlayıcıda (ör. Yahoo) oturum açmaya çalıştığında auth/account-exists-with-different-credential hatası ve AuthCredential nesnesi (Yahoo kimlik bilgisi) oluşturulur. Kullanıcının, oturum açma işlemini tamamlamak için önce mevcut sağlayıcıda (Google) oturum açması, ardından da eski sağlayıcıya AuthCredential (Yahoo kimlik bilgisi) bağlanması gerekir.

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

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, yönlendirme modunda benzer şekilde ele alınır. Aradaki fark, bekleyen kimlik bilgilerinin sayfa yönlendirmeleri arasında (örneğin, oturum depolama alanı kullanılarak) önbelleğe alınması gerektiğidir.

Firebase tarafından desteklenen Google, Facebook ve Twitter gibi diğer OAuth sağlayıcılarının aksine, oturum açma işleminin doğrudan OAuth erişim jetonu tabanlı kimlik bilgileriyle yapılabildiği Firebase Auth, Firebase Auth sunucusunun Yahoo OAuth erişim jetonlarının hedef kitlesini doğrulayamaması nedeniyle Yahoo gibi sağlayıcılar için aynı özelliği desteklemez. Bu, kritik bir güvenlik şartıdır 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ılan OAuth istemci kimliği ve gizli anahtarı kullanılarak tüm OAuth akışının ve yetkilendirme kodu değişiminin işlenmesini sağlar. Yetkilendirme kodu yalnızca belirli bir istemci kimliği/gizli anahtarla birlikte kullanılabildiğinden bir proje için alınan yetkilendirme kodu başka bir projede kullanılamaz.

Bu sağlayıcıların desteklenmeyen ortamlarda kullanılması gerekiyorsa üçüncü taraf OAuth kitaplığı ve Firebase özel kimlik doğrulaması kullanılması gerekir. Birincisi sağlayıcıda kimlik doğrulamak, ikincisi ise sağlayıcının kimlik bilgisini ö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 Offscreen Documents rehberine bakın.

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

Bu, OAuth ile oturum açma için yönlendirme mekanizması olarak da kullanılır. Bu alanın, desteklenen tüm OAuth sağlayıcıları için izin verilmiş olması gerekir. Ancak bu, kullanıcıların uygulamaya geri yönlendirilmeden önce Yahoo'da oturum açarken bu alanı görebileceği anlamına gelir: Şuraya git: https://my-app-12345.firebaseapp.com.

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

için alanınızı ayarlama başlıklı makaledeki 1-3 arasındaki adımları uygulayın.Hosting Alan sahipliğinizi doğruladığınızda Hosting, özel alanınız için bir SSL sertifikası sağlar.
Özel alanınızı, Firebase konsolundaki yetkili alanlar listesine ekleyin: auth.custom.domain.com.
Yahoo geliştirici konsolunda veya OAuth kurulum sayfasında, özel alanınızda erişilebilecek olan yönlendirme sayfasının URL'sini beyaz listeye ekleyin: https://auth.custom.domain.com/__/auth/handler.

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

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ı 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ığına bakılmaksızın 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 nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini 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 bu kimliği 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 numaralı telefonu arayın:

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

JavaScript ile Yahoo Kullanarak Kimlik Doğrulama Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.