Catch up on everthing we announced at this year's Firebase Summit. Learn more

Authentifizieren Sie sich mit Twitter in JavaScript

Sie können Ihren Benutzern erlauben, sich mit ihren Twitter-Konten bei Firebase zu authentifizieren, indem Sie die Twitter-Authentifizierung in Ihre App integrieren. Sie können die Twitter-Authentifizierung integrieren, indem Sie entweder das Firebase SDK verwenden, um den Anmeldevorgang auszuführen, oder indem Sie den Twitter-OAuth-Vorgang manuell ausführen und das resultierende Zugriffstoken und das Geheimnis an Firebase übergeben.

Bevor Sie beginnen

  1. In Firebase zu Ihrem JavaScript - Projekt .
  2. In der Firebase Konsole , öffnen Sie den Abschnitt Auth.
  3. Auf dem Anmelden Methode Registerkarte, aktivieren Sie den Twitter - Anbieter.
  4. Fügen Sie den API - Schlüssel und API Geheimnis von den betreffenden Anbieter Entwickler - Konsole an die Provider - Konfiguration:
    1. Registrieren Sie Ihre App als Entwickler - Anwendung auf Twitter und erhalten Sie Ihre App-OAuth - API - Schlüssel und API Geheimnis.
    2. Stellen Sie sicher , dass Ihre Firebase OAuth Umleitung URI (zB my-app-12345.firebaseapp.com/__/auth/handler ) , wird als Ihre URL Authorization Rückrufs in Ihrem App - Einstellungen Seite auf Ihrem Twitter - App config .
  5. Klicken Sie auf Speichern.

Verwalten Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, können Sie Ihre Benutzer am einfachsten über ihre Twitter-Konten bei Firebase authentifizieren, indem Sie den Anmeldevorgang mit dem Firebase JavaScript SDK durchführen. (Wenn Sie einen Benutzer in Node.js oder einer anderen Nicht-Browser-Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell durchführen.)

Führen Sie die folgenden Schritte aus, um den Anmeldevorgang mit dem Firebase JavaScript SDK zu handhaben:

  1. Erstellen Sie eine Instanz des Twitter-Provider-Objekts:

    Webversion 9

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();

    Webversion 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. Optional: Um den Anbieter OAuth Fluss in den bevorzugten Sprache des Benutzers zu lokalisieren , ohne explizit die entsprechenden benutzerdefinierte OAuth Parameter übergeben, aktualisieren Sie den Sprachcode auf der Auth - Instanz vor dem OAuth Fluss zu starten. Zum Beispiel:

    Webversion 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Webversion 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth - Anbieter Parameter , die Sie mit dem OAuth Anfrage senden möchten. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie setCustomParameters auf dem initialisierten Anbieter mit einem Objekt mit dem Schlüssel wie von der OAuth - Anbieter Dokumentation zu entnehmen und dem entsprechenden Wert. Zum Beispiel:

    Webversion 9

    provider.setCustomParameters({
      'lang': 'es'
    });

    Webversion 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    Reservierte erforderliche OAuth-Parameter sind nicht zulässig und werden ignoriert. Siehe den Authentifizierungsanbieter Referenz für weitere Details.
  4. Authentifizieren Sie sich bei Firebase mithilfe des Twitter-Provider-Objekts. Sie können Ihre Benutzer auffordern, sich mit ihren Twitter-Konten anzumelden, indem Sie entweder ein Popup-Fenster öffnen oder auf die Anmeldeseite umleiten. Die Umleitungsmethode wird auf mobilen Geräten bevorzugt.
    • So melden Sie sich mit einem Pop-up - Fenster, Anruf signInWithPopup :

      Webversion 9

      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;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Webversion 8

      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;
          // ...
        }).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;
          // ...
        });
      Beachten Sie auch, dass Sie das OAuth-Token des Twitter-Anbieters abrufen können, mit dem zusätzliche Daten über die Twitter-APIs abgerufen werden können.

      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes haben einen Blick auf die Auth Reference Docs .

    • Um sich anzumelden , indem auf die Anmeldeseite umgeleitet, rufen signInWithRedirect :

      Webversion 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Webversion 8

      firebase.auth().signInWithRedirect(provider);
      Dann können Sie auch Antworten auf die OAuth - Token des Twitter - Anbieter durch den Aufruf getRedirectResult wenn Ihre Seite geladen wird :

      Webversion 9

      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;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Webversion 8

      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;
        }).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 haben einen Blick auf die Auth Reference Docs .

Behandeln Sie den Anmeldevorgang manuell

Sie können sich auch mit einem Twitter-Konto bei Firebase authentifizieren, indem Sie den Anmeldevorgang durch Aufrufen der Twitter-OAuth-Endpunkte abwickeln:

  1. Integrieren Sie Twitter - Authentifizierung in Ihrer Anwendung durch die folgende Dokumentation des Entwicklers . Am Ende des Twitter-Anmeldevorgangs erhalten Sie ein OAuth-Zugriffstoken und ein OAuth-Geheimnis.
  2. Wenn Sie sich bei einer Node.js-Anwendung anmelden müssen, senden Sie das OAuth-Zugriffstoken und das OAuth-Secret an die Node.js-Anwendung.
  3. Nachdem ein Benutzer erfolgreich mit Twitter Zeichen, tauschen Sie die OAuth - Zugriffstoken und OAuth Geheimnis für eine Firebase Berechtigungsnachweis:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Authentifizieren Sie sich bei Firebase mit den Firebase-Anmeldedaten:

    Webversion 9

    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.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    Webversion 8

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

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine Chrome-Erweiterungs-App erstellen, müssen Sie Ihre Chrome-Erweiterungs-ID hinzufügen:

  1. Öffnen Sie das Projekt in der Firebase Konsole .
  2. Im Abschnitt Authentifizierung, öffnen Sie das Anmelde-Verfahren Seite.
  3. Fügen Sie einen URI wie folgt aus der Liste der autorisierten Domains:
    chrome-extension://CHROME_EXTENSION_ID

Nur Popup - Operationen ( signInWithPopup , linkWithPopup und reauthenticateWithPopup ) sind auf Chrome - Erweiterungen zur Verfügung, da Chrome - Erweiterungen nicht HTTP - Redirects verwenden können. Sie sollten diese Methoden über ein Hintergrundseitenskript statt über ein Browseraktions-Popup aufrufen, da das Authentifizierungs-Popup das Browseraktions-Popup abbricht. Die Popup - Methoden können nur in Erweiterungen verwendet werden Manifest V2 . Das neuere Manifest V3 erlaubt nur Hintergrund - Skripte in Form von Service - Mitarbeitern, die nicht die Pop - up - Operationen überhaupt durchführen können.

In Ihrer Manifest - Datei macht die Chrome - Erweiterung sicher , dass Sie das Add https://apis.google.com URL zum content_security_policy AllowList.

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal anmeldet, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – d. h. Benutzername und Kennwort, Telefonnummer oder Authentifizierungsanbieterinformationen – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Anwendungen, ist der empfohlene Weg , den Auth - Status Ihres Benutzers zu kennen , einen Beobachter auf dem einzustellen Auth Objekt. Sie können dann bekommen den grundlegenden Profilinformationen des Benutzers aus dem User Siehe Benutzer verwalten .

  • In Ihrer Datenbank und Firebase Realtime Cloud Storage Sicherheitsregeln , können Sie die angemeldeten Nutzer die eindeutige Benutzer - ID aus der bekommen auth Variable, und es verwenden , um steuern kann ein Benutzer Zugriff , welche Daten.

Sie können Benutzer erlauben , durch mehrere Authentifizierungsanbieter anmelden, um Ihre App Verknüpfung Auth - Provider - Anmeldeinformationen zu einem vorhandenen Benutzerkonto.

Um einen Benutzer abzumelden, rufen signOut :

Webversion 9

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

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

Webversion 8

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