Kullanıcılarınızın Twitter hesaplarını kullanarak Firebase ile kimlik doğrulamasına izin verebilirsiniz uygulamanıza Twitter kimlik doğrulamasını entegre ederek. Twitter'ı entegre edebilirsiniz kullanarak oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanıp veya Twitter OAuth akışını manuel olarak gerçekleştirerek ve sonucunda ulaşılan sonucu erişim jetonu ve Firebase gizli anahtarı.
Başlamadan önce
- Firebase'i JavaScript projenize ekleyin.
- Firebase konsolunda Auth bölümünü açın.
- Oturum açma yöntemi sekmesinde, Twitter sağlayıcısını etkinleştirin.
- Söz konusu sağlayıcının geliştirici konsolundan API anahtarını ve API gizli anahtarını
sağlayıcı yapılandırması:
- Uygulamanızı kaydetme bir geliştirici uygulaması olarak Twitter'da yükleyin ve uygulamanızın OAuth API anahtarını alın ve API gizli anahtarı.
- Firebase OAuth yönlendirme URI'nizin (ör.
my-app-12345.firebaseapp.com/__/auth/handler
) emin olun uygulamanızın ayarlar sayfasında Yetkilendirme geri çağırma URL'niz olarak Twitter uygulamasının yapılandırması.
- Kaydet'i tıklayın.
Oturum açma akışını Firebase SDK'sı ile yönetme
Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliğini doğrulamanın en kolay yolu oturum açma akışını yönetmek için harika bir platform. Firebase JavaScript SDK'sı. (Node.js'de bir kullanıcının kimliğini doğrulamak istiyorsanız veya tarayıcı harici başka bir ortam kullanıyorsanız oturum açma akışını manuel olarak gerçekleştirmeniz gerekir.)
Oturum açma akışını Firebase JavaScript SDK ile yönetmek için şu adımları uygulayın: için şu adımları izleyin:
- Twitter sağlayıcı nesnesinin bir örneğini oluşturun:
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
var provider = new firebase.auth.TwitterAuthProvider();
- İsteğe bağlı: Sağlayıcının OAuth akışını kullanıcının tercih ettiği şekilde yerelleştirmek için
dil ayarını, ilgili özel OAuth parametrelerini açıkça iletmeden kullanılan bir dil kullanıyorsanız
kodunu ekleyin. Örneğin:
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- İsteğe bağlı: Ek özel OAuth sağlayıcı parametreleri belirtin
onay kutusunu işaretleyin. Özel parametre eklemek için şu çağrıyı yapın:
Başlatılan sağlayıcıda, anahtarı içeren bir nesneyle birlikte
setCustomParameters
OAuth sağlayıcı dokümanlarında ve ilgili değerde belirtildiği şekilde olmalıdır. Örneğin:provider.setCustomParameters({ 'lang': 'es' });
provider.setCustomParameters({ 'lang': 'es' });
- Twitter sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Şunları yapabilirsiniz:
bir
oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi
mobil cihazlarda tercih edilir.
- Pop-up pencereyle oturum açmak için
signInWithPopup
numaralı telefonu arayın: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); // ... });
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; // ... });
Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için Kimlik Doğrulama Referans Belgeleri'ne göz atın.
- Oturum açma sayfasına yönlendirerek oturum açmak için
signInWithRedirect
çağırın: "signInWithRedirect" özelliğini kullanırken en iyi uygulamaları izleyin.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
: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); // ... });
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; // ... });
- Pop-up pencereyle oturum açmak için
farklı kimlik bilgileriyle var olan hesap hatalarını ele alma
Firebase konsolunda E-posta adresi başına bir hesap ayarını etkinleştirdiyseniz
Kullanıcı daha önce Gmail'deki bir e-postayla bir sağlayıcıda (ör. Twitter) oturum açmaya çalıştığında
başka bir Firebase kullanıcısının sağlayıcısı (Google gibi) için mevcutsa
auth/account-exists-with-different-credential
,
AuthCredential
nesnesi (Twitter oauth jetonu ve gizli anahtarı). Oturum açma işlemini
kullanıcının ilk olarak mevcut sağlayıcı (Google) ile oturum açması ve ardından
eski AuthCredential
(Twitter oauth jetonu ve sırrı).
Pop-up modu
signInWithPopup
kullanıyorsanız
Aşağıdakine benzer bir kodla auth/account-exists-with-different-credential
hata
örnek:
import { getAuth, linkWithCredential, signInWithPopup, TwitterAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Twitter. let result = await signInWithPopup(getAuth(), new TwitterAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Twitter 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 Twitter 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 bir şekilde ele alınır. Beklemedeki hesabın kimlik bilgisi sayfa yönlendirmeleri arasında önbelleğe alınmalıdır (örneğin, oturum depolaması kullanılarak).
Oturum açma akışını manuel olarak yönetme
Ayrıca bir Twitter hesabı kullanarak Firebase ile kimlik doğrulamak için Twitter OAuth uç noktalarını çağırarak oturum açma akışı:
- Şu adımları izleyerek Twitter kimlik doğrulamasını uygulamanıza entegre edin: kontrol edin. Twitter oturum açma akışının sonunda OAuth erişim jetonu ve OAuth gizli anahtarı alacak.
- Bir Node.js uygulamasında oturum açmanız gerekiyorsa OAuth erişimini gönderin jetonu ile birlikte Node.js uygulamasına OAuth sırrını ekleyin.
- Kullanıcı Twitter ile başarıyla oturum açtıktan sonra OAuth erişimi değişimi yapın
Firebase kimlik bilgisi için jeton ve OAuth sırrı:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- Firebase kimlik bilgilerini kullanarak Firebase ile kimlik doğrulayın:
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); // ... });
// 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ılarında Firebase ile kimlik doğrulama
Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.
Twitter ile oturum açma için yönlendirme alan adını özelleştirme
Firebase, proje oluşturulurken projeniz için benzersiz bir alt alan sağlar:
https://my-app-12345.firebaseapp.com
Bu, OAuth'ta oturum açmak için yönlendirme mekanizması olarak da kullanılır. Bu alan adının desteklenen tüm OAuth sağlayıcıları için izin verilir. Ancak bu, kullanıcıların Twitter'da oturum açarken tekrar uygulamaya yönlendirmeden önce alan adıyla ilgili bir e-posta alırsınız: https://my-app-12345.firebaseapp.com adresine gidin.
Alt alan adınızın gösterilmesini önlemek için Firebase Hosting ile özel bir alan oluşturabilirsiniz:
- Şuradaki 1 ila 3. adımları uygulayın: Hosting için alanınızı ayarlayın. Doğrulama işlemi sırasında Hosting, özel alanınız için bir SSL sertifikası sağlar.
- Özel alan adınızı
Firebase konsolu:
auth.custom.domain.com
. - Twitter geliştirici konsolunda veya OAuth kurulum sayfasında, yönlendirme sayfasının URL'sini beyaz listeye ekleyin.
Bu URL'ye özel alanınızdan erişebilirsiniz:
https://auth.custom.domain.com/__/auth/handler
- JavaScript kitaplığını başlattığınızda özel alan adınızı
authDomain
alanı: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ığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.
-
Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu
Auth
nesnesine bir gözlemci ayarlayın. Ardından, kullanıcınınUser
nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz:
auth
değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.
Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.
Bir kullanıcının oturumunu kapatmak için numaralı telefonu arayın
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. });