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

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

מידע על Codelab זה

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

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

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

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

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

מה צריך בשביל להצטרף

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

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

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 באמצעות 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. לדוגמה, אם פרויקט Glitch שלכם נקרא 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: הצגת דף האינטרנט.

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

    מקור מקומי שמתארח במחשב שלכם

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

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

אחרון חביב

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

בואו נתחבר!

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

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

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

מה קורה בשלב הבא:

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

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

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

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

ה-JWT המוצפן מתועד ב-Developer Console. אחרי פענוח ה-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.

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

נשנה את צבע הלחצן לכחול, ובמקום הכיתוב הנוכחי נציג את הכיתוב הרשמה באמצעות חשבון 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>

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

לחצן להרשמה באמצעות Google.

אפשר להתאים אישית את הלחצן. כאן מופיעה רשימה מלאה של האפשרויות. אפשר גם לנסות את מחולל קוד ה-HTML שלנו.

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

מעולה!

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

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

שאלות נפוצות

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