Nutzer mit Twitter anmelden
In diesem Artikel erfahren Sie, wie Sie Nutzer mit Identity Platform bei Twitter anmelden.
Hinweis
In dieser Anleitung wird davon ausgegangen, dass Sie Identity Platform bereits aktiviert und eine einfache Webanwendung erstellt haben, die mit HTML und JavaScript geschrieben wurde. Weitere Informationen dazu finden Sie in der Kurzanleitung.
Twitter als Anbieter konfigurieren
So konfigurieren Sie Twitter als Identitätsanbieter:
Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.
Klicken Sie auf Anbieter hinzufügen.
Wählen Sie in der Liste Twitter aus.
Geben Sie Ihre Twitter Anwendungs-ID und Ihr Anwendungs-Secret ein. Wenn noch keine ID und kein Secret haben, können Sie diese über die Twitter-Apps Seite.
Konfigurieren Sie den unter Twitter konfigurieren aufgeführten URI als gültigen OAuth. Weiterleitungs-URI für Ihre Twitter-App. Wenn Sie eine benutzerdefinierte Domain in Identity Platform konfiguriert haben, Aktualisieren Sie den Weiterleitungs-URI in der Konfiguration Ihrer Twitter-App, damit stattdessen die benutzerdefinierte Domain verwendet wird. der Standarddomain. Ändern Sie beispielsweise
https://myproject.firebaseapp.com/__/auth/handler
zuhttps://auth.myownpersonaldomain.com/__/auth/handler
.Klicken Sie unter Autorisierte Domains auf Domain hinzufügen, um die Domains Ihrer Anwendung zu registrieren. Für Entwicklungszwecke ist
localhost
bereits standardmäßig aktiviert.Klicken Sie unter Anwendung konfigurieren auf Einrichtungsdetails. Kopieren Sie das Snippet in den Code Ihrer Anwendung, um das Identity Platform Client SDK zu initialisieren.
Klicken Sie auf Speichern.
Nutzer mit dem Client SDK anmelden
Erstellen Sie eine Instanz des Twitter-Anbieter-Objekts:
Web version 9
<ph type="x-smartling-placeholder">import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
Web version 8
var provider = new firebase.auth.TwitterAuthProvider();
Optional: Lokalisieren Sie den Authentifizierungsablauf. Sie können eine Sprache angeben oder die Standardsprache des Geräts verwenden:
Web version 9
<ph type="x-smartling-placeholder">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 version 8
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-Parameter an. Sie gelten speziell für Twitter und werden meist verwendet, um die Authentifizierung anzupassen. Sie können keine von OAuth oder Identity Platform reservierten Parameter übergeben.
Web version 9
<ph type="x-smartling-placeholder">provider.setCustomParameters({ 'lang': 'es' });
Web version 8
provider.setCustomParameters({ 'lang': 'es' });
Verwenden Sie das Twitter-Anbieterobjekt, um den Nutzer anzumelden. Sie können entweder ein Pop-up-Fenster öffnen oder die aktuelle Seite weiterleiten. Für Nutzer von Mobilgeräten ist die Weiterleitung einfacher.
Rufen Sie
signInWithPopup()
auf, um ein Pop-up-Fenster einzublenden:Web version 9
<ph type="x-smartling-placeholder">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 version 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; // 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; // ... });
Rufe zum Weiterleiten der Seite zuerst
signInWithRedirect()
auf.Folgen Sie den Best Practices für die Verwendung von
signInWithRedirect
,linkWithRedirect
oderreauthenticateWithRedirect
.Web version 9
<ph type="x-smartling-placeholder">import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
Rufen Sie dann das Twitter-Token beim Laden der Seite ab. Rufen Sie dazu
getRedirectResult()
auf:Web version 9
<ph type="x-smartling-placeholder">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 version 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; // 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; // ... });
Sobald Sie ein Zugriffstoken haben, können Sie es zum Aufrufen der Twitter API verwenden. Beispiel:
REST
curl --request POST --url 'https://api.twitter.com/1.1/statuses/update.json?status=Hello%20world' --header 'authorization: OAuth oauth_consumer_key="CONSUMER_API_KEY", oauth_nonce="OAUTH_NONCE", oauth_signature="OAUTH_SIGNATURE", oauth_signature_method="HMAC-SHA1", oauth_timestamp="OAUTH_TIMESTAMP", oauth_token="ACCESS_TOKEN", oauth_version="1.0"'
Nutzer manuell anmelden
Wenn Sie das Client SDK nicht verwenden möchten, können Sie den Anmeldevorgang auch manuell ausführen:
Binden Sie die Twitter-Authentifizierung in Ihre Anwendung ein. Folgen Sie dazu den Schritten in der Entwicklerdokumentation.
Melden Sie sich mit dem Nutzer, der im vorherigen Schritt implementiert wurde, in Twitter an.
Tauschen Sie das Token, das Sie von Twitter erhalten, gegen Anmeldedaten für Identity Platform ein:
Web version 9
<ph type="x-smartling-placeholder">import { TwitterAuthProvider } from "firebase/auth"; const credential = TwitterAuthProvider.credential(accessToken, secret);
Web version 8
var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);
Verwenden Sie die Anmeldedaten, um den Nutzer mit Identity Platform anzumelden:
Web version 9
<ph type="x-smartling-placeholder">import { getAuth, signInWithCredential } from "firebase/auth"; // Sign in with the credential from the user. const auth = getAuth(); signInWithCredential(auth, credential) .then((result) => { // Signed in // ... }) .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; // ... });
Web version 8
// Sign in with the credential from the user. firebase.auth() .signInWithCredential(credential) .then((result) => { // Signed in // ... }) .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; // ... });
Nächste Schritte
- Weitere Informationen zu Identity Platform-Nutzern
- Nutzer mit anderen Identitätsanbietern anmelden