Sie können die Twitter-Authentifizierung in Ihre App einbinden, damit sich Nutzer mit ihren Twitter-Konten bei Firebase authentifizieren können. Sie können die Twitter-Authentifizierung entweder mit dem Firebase SDK für den Anmeldevorgang oder manuell für den Twitter OAuth-Vorgang einbinden und das resultierende Zugriffstoken und Secret an Firebase übergeben.
Hinweis
- Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
- Öffne in der Firebase Console den Bereich Auth.
- Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter Twitter.
- Fügen Sie der Anbieterkonfiguration den API-Schlüssel und das API-Secret aus der Entwicklerkonsole des Anbieters hinzu:
- Registriere deine App als Entwickleranwendung bei Twitter und erhalte den OAuth-API-Schlüssel und das API-Secret deiner App.
- Achte darauf, dass der OAuth-Weiterleitungs-URI von Firebase (z.B.
my-app-12345.firebaseapp.com/__/auth/handler
) in der Konfigurationsdatei deiner Twitter-App auf der Seite „Einstellungen“ deiner App als Autorisierungs-Callback-URL festgelegt ist.
- Klicken Sie auf Speichern.
Anmeldevorgang mit dem Firebase SDK abwickeln
Wenn Sie eine Webanwendung entwickeln, ist die einfachste Möglichkeit, Ihre Nutzer mit Firebase über ihre Twitter-Konten zu authentifizieren, die Anmeldung über das Firebase JavaScript SDK zu verarbeiten. Wenn Sie einen Nutzer in Node.js oder einer anderen nicht browserbasierten Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell abwickeln.
So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:
- Erstellen Sie eine Instanz des Twitter-Anbieter-Objekts:
Web
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
Web
var provider = new firebase.auth.TwitterAuthProvider();
- Optional: Wenn du den OAuth-Ablauf des Anbieters in die bevorzugte Sprache des Nutzers lokalisieren möchtest, ohne die entsprechenden benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisiere den Sprachcode in der Auth-Instanz, bevor du den OAuth-Ablauf startest. Beispiel:
Web
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
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Anbieterparameter an, die mit der OAuth-Anfrage gesendet werden sollen. Wenn Sie einen benutzerdefinierten Parameter hinzufügen möchten, rufen Sie
setCustomParameters
beim initialisierten Anbieter mit einem Objekt auf, das den in der OAuth-Anbieterdokumentation angegebenen Schlüssel und den entsprechenden Wert enthält. Beispiel:Web
provider.setCustomParameters({ 'lang': 'es' });
Web
provider.setCustomParameters({ 'lang': 'es' });
- Authentifizieren Sie sich mit Firebase über das Twitter-Anbieterobjekt. Sie können Nutzer auffordern, sich mit ihren Twitter-Konten anzumelden. Dazu können Sie entweder ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.
- Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie
signInWithPopup
:Web
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
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; // ... });
Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.
- Rufen Sie
signInWithRedirect
auf, um sich anzumelden und zur Anmeldeseite weiterzuleiten: Beachten Sie die Best Practices für die Verwendung von „signInWithRedirect“.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
aufrufst:Web
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
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; // ... });
- Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie
Anmeldevorgang manuell verarbeiten
Sie können sich auch mit einem Twitter-Konto bei Firebase authentifizieren. Rufen Sie dazu die Twitter-OAuth-Endpunkte auf, um den Anmeldevorgang zu steuern:
- Binden Sie die Twitter-Authentifizierung in Ihre Anwendung ein. Folgen Sie dazu der Entwicklerdokumentation. Am Ende des Twitter-Anmeldevorgangs erhältst du ein OAuth-Zugriffstoken und ein OAuth-Secret.
- Wenn Sie sich in einer Node.js-Anwendung anmelden müssen, senden Sie das OAuth-Zugriffstoken und das OAuth-Secret an die Node.js-Anwendung.
- Nachdem sich ein Nutzer erfolgreich mit Twitter angemeldet hat, tauschen Sie das OAuth-Zugriffstoken und das OAuth-Secret gegen Firebase-Anmeldedaten aus:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- Authentifizieren Sie sich mit den Firebase-Anmeldedaten bei Firebase:
Web
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
// 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; // ... });
In einer Chrome-Erweiterung mit Firebase authentifizieren
Wenn Sie eine Chrome-Erweiterung entwickeln, lesen Sie den Leitfaden zu Offscreen-Dokumenten.
Nächste Schritte
Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.
-
In Ihren Apps sollten Sie den Authentifizierungsstatus des Nutzers am besten über einen Beobachter für das
Auth
-Objekt ermitteln. Die grundlegenden Profilinformationen des Nutzers können Sie dann aus demUser
-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten. In Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen
auth
abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.
Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.
Wenn Sie einen Nutzer abmelden möchten, rufen Sie
signOut
auf:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });