JavaScript ile Yahoo Kullanarak Kimlik Doğrulama

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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.

   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ı: OAuth isteğiyle birlikte 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 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.

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

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

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

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

   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

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) {
  // ...
}

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.

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:

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

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

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