Twitter kimlik doğrulamasını uygulamanıza entegre ederek kullanıcılarınızın Twitter hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmalarına olanak tanıyabilirsiniz. Twitter kimlik doğrulamasını, oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak veya Twitter OAuth akışını manuel olarak gerçekleştirip elde edilen erişim jetonunu ve sırrını Firebase'e ileterek entegre edebilirsiniz.
Sen başlamadan önce
- Firebase'i JavaScript projenize ekleyin .
- Firebase konsolunda Kimlik Doğrulama bölümünü açın.
- Oturum açma yöntemi sekmesinde Twitter sağlayıcısını etkinleştirin.
- Bu sağlayıcının geliştirici konsolundan API anahtarını ve API sırrını sağlayıcı yapılandırmasına ekleyin:
- Uygulamanızı Twitter'da geliştirici uygulaması olarak kaydedin ve uygulamanızın OAuth API anahtarını ve API sırrını alın.
- Firebase OAuth yönlendirme URI'nizin (ör.
my-app-12345.firebaseapp.com/__/auth/handler
) , Twitter uygulamanızın yapılandırmasındaki uygulamanızın ayarlar sayfasında Yetkilendirme geri çağırma URL'niz olarak ayarlandığından emin olun.
- Kaydet'i tıklayın.
Oturum açma akışını Firebase SDK ile yönetin
Bir web uygulaması oluşturuyorsanız Twitter hesaplarını kullanarak kullanıcılarınızın Firebase ile kimliklerini doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK ile yönetmektir. (Node.js'de veya tarayıcı olmayan başka bir ortamda bir kullanıcının kimliğini doğrulamak istiyorsanız oturum açma akışını manuel olarak gerçekleştirmelisiniz.)
Firebase JavaScript SDK'sıyla oturum açma akışını yönetmek için şu adımları izleyin:
- Twitter sağlayıcı nesnesinin bir örneğini oluşturun:
Web modular API
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
Web namespaced API
var provider = new firebase.auth.TwitterAuthProvider();
- İsteğe bağlı : Sağlayıcının OAuth akışını, ilgili özel OAuth parametrelerini açıkça iletmeden kullanıcının tercih ettiği dile yerelleştirmek için OAuth akışını başlatmadan önce Auth örneğindeki dil kodunu güncelleyin. Örneğin:
Web modular API
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web namespaced API
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- İsteğe bağlı : OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth sağlayıcı parametrelerini belirtin. Özel bir parametre eklemek için, OAuth sağlayıcı belgelerinde belirtilen anahtarı ve karşılık gelen değeri içeren bir nesneyle, başlatılan sağlayıcıda
setCustomParameters
çağırın. Örneğin:Ayrılmış gerekli OAuth parametrelerine izin verilmiyor ve göz ardı edilecek. Daha fazla ayrıntı için kimlik doğrulama sağlayıcısının referansına bakın.Web modular API
provider.setCustomParameters({ 'lang': 'es' });
Web namespaced API
provider.setCustomParameters({ 'lang': 'es' });
- Twitter sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. Bir açılır pencere açarak veya oturum açma sayfasına yönlendirerek kullanıcılarınızdan Twitter hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilmektedir.
- Açılır pencereyle oturum açmak için
signInWithPopup
çağırın:Ayrıca, Twitter API'lerini kullanarak ek veriler almak için kullanılabilecek Twitter sağlayıcısının OAuth jetonunu alabileceğinizi de unutmayın.Web modular API
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. const credential = TwitterAuthProvider.credentialFromResult(result); const token = credential.accessToken; const secret = credential.secret; // The signed-in user info. const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = TwitterAuthProvider.credentialFromError(error); // ... });
Web namespaced API
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = credential.accessToken; var secret = credential.secret; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
Burası aynı zamanda hataları yakalayıp yönetebileceğiniz yerdir. Hata kodlarının bir listesi için Yetkilendirme Referans Dokümanlarına bakın.
- Oturum açma sayfasına yönlendirerek oturum açmak için
signInWithRedirect
çağırın: 'signInWithRedirect'i kullanırken en iyi uygulamaları izleyin.Ardından, sayfanız yüklendiğindeWeb modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
çağırarak Twitter sağlayıcısının OAuth jetonunu da alabilirsiniz:Burası aynı zamanda hataları yakalayıp yönetebileceğiniz yerdir. Hata kodlarının bir listesi için Yetkilendirme Referans Dokümanlarına bakın.Web modular API
import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. const credential = TwitterAuthProvider.credentialFromResult(result); const token = credential.accessToken; const secret = credential.secret; // ... // The signed-in user info. const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = TwitterAuthProvider.credentialFromError(error); // ... });
Web namespaced API
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = credential.accessToken; var secret = credential.secret; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- Açılır pencereyle oturum açmak için
Oturum açma akışını manuel olarak yönetin
Ayrıca Twitter OAuth uç noktalarını çağırarak oturum açma akışını yöneterek bir Twitter hesabı kullanarak Firebase ile kimlik doğrulaması yapabilirsiniz:
- Geliştiricinin belgelerini takip ederek Twitter kimlik doğrulamasını uygulamanıza entegre edin. Twitter oturum açma akışının sonunda bir OAuth erişim belirteci ve bir OAuth sırrı alacaksınız.
- Bir Node.js uygulamasında oturum açmanız gerekiyorsa OAuth erişim belirtecini ve OAuth sırrını Node.js uygulamasına gönderin.
- Kullanıcı Twitter'da başarıyla oturum açtıktan sonra OAuth erişim belirtecini ve OAuth sırrını Firebase kimlik bilgisi ile değiştirin:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- Firebase kimlik bilgilerini kullanarak Firebase ile kimlik doğrulaması yapın:
Web modular API
import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth"; // Sign in with the credential from the Facebook user. const auth = getAuth(); signInWithCredential(auth, credential) .then((result) => { // Signed in const credential = FacebookAuthProvider.credentialFromResult(result); }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web namespaced API
// Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .then((result) => { // Signed in var credential = result.credential; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
Chrome uzantısında Firebase ile kimlik doğrulama
Bir Chrome uzantısı uygulaması oluşturuyorsanız Chrome uzantı kimliğinizi eklemeniz gerekir:
- Projenizi Firebase konsolunda açın.
- Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasını açın.
- Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:
chrome-extension://CHROME_EXTENSION_ID
Chrome uzantıları HTTP yönlendirmelerini kullanamadığından Chrome uzantıları için yalnızca açılır pencere işlemleri ( signInWithPopup
, linkWithPopup
ve reauthenticateWithPopup
) kullanılabilir. Kimlik doğrulama açılır penceresi tarayıcı eylemi açılır penceresini iptal edeceğinden, bu yöntemleri bir tarayıcı eylemi açılır penceresi yerine bir arka plan sayfası komut dosyasından çağırmalısınız. Açılan yöntemler yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni olan Manifest V3, yalnızca açılır pencere işlemlerini hiçbir şekilde gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.
Chrome uzantınızın manifest dosyasında https://apis.google.com
URL'sini content_security_policy
izin verilenler listesine eklediğinizden emin olun.
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 bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. 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 bir 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
Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgileriniUser
nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini
auth
değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.
Bir kullanıcının oturumunu kapatmak için signOut
arayın:
Web modular API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });