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:
- Firebase'i JavaScript projenize ekleyin.
- Firebase konsolunda Auth bölümünü açın.
- Oturum açma yöntemi sekmesinde Yahoo sağlayıcısını etkinleştirin.
- Sağlayıcının geliştirici konsolundaki İstemci Kimliği ve İstemci Gizli Anahtarı'nı sağlayıcı yapılandırmasına ekleyin:
-
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
veemail
. - Bu sağlayıcılara uygulama kaydederken projenizin
*.firebaseapp.com
alanını, uygulamanızın yönlendirme alanı olarak kaydettiğinizden emin olun.
-
- 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:
yahoo.com sağlayıcı kimliğini kullanarak bir OAuthProvider örneği oluşturun.
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
var provider = new firebase.auth.OAuthProvider('yahoo.com');
İsteğe bağlı: OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth parametrelerini belirtin.
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.İsteğe bağlı: Kimlik doğrulama sağlayıcıdan istemek istediğiniz
profile
veemail
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
yerinesdct-w
iletilmesi gerekir. Aksi takdirde akış başarısız olur ve son kullanıcıya bir hata gösterilir.// 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.
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: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
veyareauthenticateWithRedirect
'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.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 veyaresult.additionalUserInfo.profile
alanından alınabilen Yahoo kullanıcısının kimliğidir.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.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. });
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.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. });
"account-exists-with-different-credential" hatalarını işleme
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.
Pop-up modu
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.
Gelişmiş: Oturum açma akışını manuel olarak işleme
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.
Yahoo oturum açma için yönlendirme alanını özelleştirme
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:
- 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.
- Özel alanınızı Firebase konsolundaki yetkili alanlar listesine ekleyin:
auth.custom.domain.com
. - 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
. - 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: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_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 bilgileriniUser
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. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });