כניסת משתמשים באמצעות Twitter

במאמר הזה מוסבר איך להשתמש ב-Identity Platform כדי לאפשר למשתמשים להיכנס באמצעות חשבון טוויטר.

לפני שמתחילים

ההדרכה הזו מיועדת למשתמשים שכבר הפעילו את Identity Platform, ויש להם אפליקציית אינטרנט בסיסית שנכתבה באמצעות HTML ו-JavaScript. במדריך למתחילים מוסבר איך להפעיל את Identity Platform ולהיכנס לחשבון.

הגדרת Twitter כספק

כדי להגדיר את טוויטר כספק זהויות:

1. נכנסים לדף Identity Providers במסוף Google Cloud .

   כניסה לדף Identity Providers

2. לוחצים על הוספת ספק.
3. בוחרים באפשרות Twitter מהרשימה.
4. מזינים את מזהה האפליקציה וסוד האפליקציה שלכם בטוויטר. אם עדיין אין לכם מזהה וסוד, אתם יכולים לקבל אותם בדף Twitter Apps.
5. מגדירים את ה-URI שמופיע בקטע הגדרת Twitter כ-URI תקף להפניה אוטומטית של OAuth באפליקציית Twitter. אם הגדרתם דומיין בהתאמה אישית ב-Identity Platform, צריך לעדכן את ה-URI להפניה אוטומטית בהגדרות של אפליקציית Twitter כדי להשתמש בדומיין בהתאמה אישית במקום בדומיין שמוגדר כברירת מחדל. לדוגמה, שינוי של https://myproject.firebaseapp.com/__/auth/handler ל-https://auth.myownpersonaldomain.com/__/auth/handler.
6. בחלונית הצדדית Project settings (הגדרות הפרויקט), לוחצים על Add Domain (הוספת דומיין) ומוסיפים את הדומיין של האפליקציה.

   מומלץ לא לכלול את localhost בפרויקטים שלכם בסביבת הייצור.

   הערה: בפרויקטים שנוצרו לפני 28 באפריל 2025, ‏localhost מופעל כברירת מחדל.
7. בקטע הגדרת האפליקציה, לוחצים על פרטי ההגדרה. מעתיקים את קטע הקוד לקוד של האפליקציה כדי להפעיל את Identity Platform client SDK.
8. לוחצים על Save.

כניסת משתמשים באמצעות Client SDK

1. יוצרים מופע של אובייקט הספק Twitter:

   גרסה 9 לאינטרנט

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

   גרסה 8 לאינטרנט

   var provider = new firebase.auth.TwitterAuthProvider();
   twitter.js

2. אופציונלי: התאמה לשפה המקומית של תהליך האימות. אפשר לציין שפה או להשתמש בשפת ברירת המחדל של המכשיר:

   גרסה 9 לאינטרנט

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

   גרסה 8 לאינטרנט

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

3. אופציונלי: מציינים פרמטרים נוספים של OAuth בהתאמה אישית. ההגדרות האלה ספציפיות לטוויטר, ובדרך כלל משמשות להתאמה אישית של חוויית האימות. אי אפשר להעביר פרמטרים ששמורים על ידי OAuth או Identity Platform.

   גרסה 9 לאינטרנט

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

   גרסה 8 לאינטרנט

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

4. משתמשים באובייקט של ספק Twitter כדי להכניס את המשתמש. אפשר לפתוח חלון קופץ או להפנות לדף הנוכחי. ההפניה קלה יותר למשתמשים במכשירים ניידים.

   כדי להציג חלון קופץ, מתקשרים אל signInWithPopup():

   גרסה 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;
       // 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);
       // ...
     });
   auth_twitter_signin_popup.js

   גרסה 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;
       // ...
     });
   twitter.js

   כדי להפנות את הדף, קודם קוראים ל-signInWithRedirect().

   כדאי לפעול לפי השיטות המומלצות כשמשתמשים ב-signInWithRedirect, ב-linkWithRedirect או ב-reauthenticateWithRedirect.

   גרסה 9 לאינטרנט

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

   גרסה 8 לאינטרנט

   firebase.auth().signInWithRedirect(provider);
   index.js

   לאחר מכן, מאחזרים את טוקן הגישה ל-Twitter על ידי קריאה ל-getRedirectResult() כשהדף נטען:

   גרסה 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;
       // 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);
       // ...
     });
   auth_twitter_signin_redirect_result.js

   גרסה 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;
       // ...
     });
   twitter.js

אחרי שיש לכם אסימון גישה, אתם יכולים להשתמש בו כדי להפעיל את Twitter API. לדוגמה:

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"'

כניסה ידנית של משתמשים

אם אתם לא רוצים להשתמש ב-SDK של הלקוח, אתם יכולים גם לטפל בתהליך הכניסה באופן ידני:

1. כדי לשלב את אימות Twitter באפליקציה, פועלים לפי השלבים שמפורטים בתיעוד למפתחים.
2. נכנסים עם חשבון המשתמש לטוויטר באמצעות התהליך שהטמעתם בשלב הקודם.
3. ממירים את האסימון שמתקבל מטוויטר לפרטי כניסה של Identity Platform:

   גרסה 9 לאינטרנט

   import { TwitterAuthProvider } from "firebase/auth";
   
   const credential = TwitterAuthProvider.credential(accessToken, secret);
   auth_twitter_provider_credential.js

   גרסה 8 לאינטרנט

   var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);
   twitter.js

4. משתמשים באמצעי האימות כדי להכניס את המשתמש באמצעות Identity Platform:

   גרסה 9 לאינטרנט

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

   גרסה 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;
       // ...
     });
   index.js

המאמרים הבאים

• מידע נוסף על משתמשי Identity Platform
• כניסה של משתמשים באמצעות ספקי זהויות אחרים.