לחצן כניסה באמצעות חשבון Google בדפדפן

לחצן כניסה באמצעות חשבון Google בדפדפן

מידע על Codelab זה

subjectהעדכון האחרון: אפר׳ 28, 2025
account_circleנכתב על ידי Brian Daugherty

1.‏ סקירה כללית

ב-Codelab הזה ניצור דף אינטרנט פשוט לכניסת משתמשים. כדי להציג את הלחצן 'כניסה באמצעות חשבון Google' ולהתאים אותו אישית, צריך להשתמש בספריית JavaScript של Google Identity Services.

לחצן לכניסה באמצעות חשבון Google.

מה תלמדו

  • איך מוסיפים לדף אינטרנט לחצן 'כניסה באמצעות חשבון Google'
  • איך להגדיר אפליקציית אינטרנט מסוג OAuth 2.0
  • איך לפענח אסימון מזהה
  • איך להתאים אישית את הלחצן לכניסה באמצעות חשבון Google

מה נדרש

  1. כלי לעריכת טקסט ומקום לאירוח דף אינטרנט, סביבות שנעסוק בהן ב-Codelab הזה:
    • שפועלת באופן מקומי במסוף במחשב, או
    • באמצעות פלטפורמה כמו Glitch.
    בוחרים את הסביבה שמתאימה לכם.
  2. פרויקט ב-Google Cloud. אפשר להשתמש בפרויקט קיים או ליצור פרויקט חדש. חשבון ופרויקט ב-Google Cloud Platform הם בחינם.
  3. ידע בסיסי ב-HTML, CSS, JavaScript וכלי פיתוח ל-Chrome (או שווה ערך).

אז בואו נתחיל.

2.‏ יצירת דף כניסה לחשבון

אפשר להוסיף את דוגמת הקוד הזו לקובץ בשם index.html. אפשר לעשות זאת במחשב באמצעות כלי לעריכת טקסט המועדף עליכם או בפלטפורמה כמו Glitch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

הקוד הזה הוא שילוב של HTML ו-JavaScript, והוא מבצע כמה פעולות:

  • מגדיר את הספרייה הזו של Google Identity Services באמצעות g_id_onload,
  • מציג לחצן לכניסה באמצעות חשבון Google באמצעות g_id_signin,
  • מוסיף handler של פונקציית קריאה חוזרת ב-JavaScript בשם handleCredentialResponse כדי לקבל מ-Google פרטי כניסה של משתמש, וגם
  • פונקציה decodeJWT כדי להמיר את פרטי הכניסה של JSON Web Token (JWT) ל-JSON פשוט.

יכול להיות שמשהו השתבש במהלך השימוש ב-data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE".

בינתיים, אפשר פשוט להתעלם ממנו, נחזור אליו עוד מעט.

3.‏ הצגת דף האינטרנט

נדון בשתי סביבות להצגת index.html בדפדפן:

  • הפעלת שרת אינטרנט באופן מקומי במחשב
  • פלטפורמה מרוחקת כמו Glitch.

יש לבחור את השיטה שמתאימה לך. אחרי ההגדרה נשתמש בכתובת ה-URL כדי להגדיר לקוח אינטרנט של OAuth.

באופן מקומי מהמחשב

צריך לוודא ש-Python3 מותקן במערכת. ההגדרה משתנה לפי מערכת ההפעלה והפלטפורמה, כדי להתחיל עם ההגדרה והשימוש ב-Python תוכלו להתקין את Python במחשב.

מפעילים את שרת האינטרנט של Python בספרייה שמכילה את index.html:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

שרת אינטרנט מאזין עכשיו לחיבורים ביציאה 8000 ומוכן להציג את דף הכניסה שלך. כתובת ה-URL היא

http://localhost:8000

שימוש בפלטפורמה מרוחקת

אם בחרתם לערוך ולארח את דף הכניסה באמצעות Glitch (או דף מקביל), תוכלו לפתוח את index.html בחלונית תצוגה מקדימה או בכרטיסייה חדשה בדפדפן.

בדרך כלל, כתובת ה-URL שבה תשתמשו היא שם הפרויקט שהזנתם כשהגדרתם את הפרויקט ב-glitch.com. לדוגמה, אם השם של הפרויקט התקלה הוא gis-example, כתובת ה-URL היא https://gis-example.glitch.me. כמובן שתבחרו שם פרויקט אחר ולא תוכלו להשתמש שוב בשם הזה. כתובת ה-URL היא

https://<var>your-project-name</var>.glitch.me

טעינת הדף

חכו רגע...

קודם צריך ליצור לקוח אינטרנט מסוג OAuth 2.0 ולהגדיר אותו.

מעתיקים או בודקים את כתובת ה-URL, כי נעשה בה שימוש בשלב הבא.

4.‏ הגדרה של לקוח אינטרנט מסוג OAuth

עכשיו נגדיר את OAuth כדי שאנשים יוכלו להיכנס לחשבון.

  • יש ללחוץ על הקישור הזה כדי ליצור לקוח אינטרנט מסוג OAuth 2.0. במקרה הצורך, אשף יעזור לכם ליצור ולהגדיר פרויקט חדש ב-Google Cloud.
  • בתפריט הנפתח Application type, בוחרים באפשרות Web application.
  • לוחצים על הלחצן הוספת URI בקטע מקורות מורשים של JavaScript.
  • צריך להזין את כתובת ה-URL שמארחת את index.html משלב 3 להצגת דף האינטרנט.

    מתארח במחשב המקומי שלך

    מקור מקומי שמתארח במכונה שלך

    מתארח בפלטפורמה מרוחקת

    שימוש בפלטפורמת אירוח מרחוק
  • לוחצים על יצירה.
  • מעתיקים את מזהה הלקוח החדש.

אחרון חביב

אנחנו צריכים לחזור אחורה ולעדכן את index.html כדי להשתמש במזהה הלקוח החדש. בעורך, מחליפים את PUT_YOUR_WEB_CLIENT_ID_HERE במזהה הלקוח החדש. מזהה לקוח ייראה כמו בדוגמה הבאה: 1234567890-abc123def456.apps.googleusercontent.com.

קדימה, נכנסים!

5.‏ כניסה לחשבון

קודם כול צריך לפתוח את Developer Console של הדפדפן. כאן יתועדו השגיאות ופרטי הכניסה של אסימון מזהה ה-JWT שהוחזרו מ-Google.

יש ללחוץ על הלחצן 'כניסה באמצעות חשבון Google'!

מה שיקרה בהמשך עשוי להשתנות מעט:

  • אם את מחוברת כרגע ליותר מחשבון Google אחד, תוצג בקשה לבחור באיזה חשבון להשתמש כדי להיכנס לאפליקציית האינטרנט הזו.
  • אם זו הפעם הראשונה שנכנסת לחשבון באפליקציית האינטרנט הזו, תוצג בקשה להבעת הסכמה.

אחרי שבוחרים חשבון ונותנים את הסכמתכם, Google תגיב באמצעות JWT. פונקציית הקריאה החוזרת handleCredentialResponse שפועלת בדפדפן מקבלת את ה-JWT.

בשיעור הזה ב-Codelab, אנחנו מפענחים ומדפיסים את תכני ה-JWT. באפליקציית אינטרנט לסביבת הייצור מאמתים את ה-JWT המפוענח ומשתמשים בו כדי לבצע פעולה משמעותית יותר, כמו יצירת חשבון חדש בפלטפורמת הקצה העורפי או יצירת סשן חדש למשתמש.

6.‏ בדיקת אסימון מזהה של JWT

ה-JWT המקודד נרשם במסוף המפתחים. לאחר הפענוח של ה-JWT, חלק מהשדות הנפוצים של אסימון המזהה מתועדים במסוף.

אתם יכולים להשתמש בכלים באינטרנט כמו jwt.io כדי לפענח את ה-JWT.

לחלופין, אפשר להשתמש ב-jq שבטרמינל גם כדי לפענח ולהציג את ה-JWT (יכול להיות שתצטרכו להשתמש במנהל החבילות כדי להתקין jq). קודם מדביקים את מחרוזת ה-JWT המקודדת במירכאות הכפולות:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

ואז להשתמש בפקודה הזו כדי לפענח אותו

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

חלק מהמפתחות והערכים, כמו כתובת אימייל, שם ותמונה, צריכים להיות קלים להבנה. ערכים אחרים משמשים לאימות ה-JWT לפני שמשתמשים בו. קבלת פרטי משתמש מהאסימון המזהה כוללת מידע נוסף על המשמעות של כל השדות.

7.‏ התאמה אישית של הלחצן

כך תתבצע הצבת לחצן הכניסה שמוגדר כברירת מחדל בדף

    <div class="g_id_signin"></div>

ותראו את הלחצן הזה

לחצן לכניסה באמצעות חשבון Google.

אבל אולי תרצו לשנות את הצבע, הגודל או הטקסט כך שיתאימו לעיצוב האתר.

נשנה את הצבע של הלחצן לכחול ובמקומם יופיע הכיתוב Sign up with Google (הרשמה באמצעות חשבון Google).

פותחים את index.html, מאתרים את הרכיב g_id_signin ומוסיפים את המאפיינים data-theme="filled_blue" ו-data-text="signup_with":

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

לאחר שמירה וטעינה מחדש של הדף, יופיע לחצן כחול עם הטקסט החדש.

לחצן Subscribe with Google.

אפשר לבצע התאמה אישית נוספת של הלחצן. הרשימה המלאה מופיעה בקטע מאפיינים של נתונים חזותיים.

8.‏ מקורות מידע נוספים

מעולה!

הוספת לדף אינטרנט לחצן לכניסה באמצעות חשבון Google, הגדרת לקוח אינטרנט מסוג OAuth 2.0, פענוח של אסימון מזהה של JWT והסבר איך להתאים אישית את מראה הלחצן.

הקישורים האלה יעזרו לכם בשלבים הבאים:

שאלות נפוצות

bug_report דיווח על טעות