מדריך | כיצד יוצרים התחברות עם גוגל באתר הסטטי שלנו!! ללא צורך בצד שרת כלל. (רלוונטי כמובן גם לבעלי שרת)

ס מנותק

איך עושים התחברות עם גוגל לאתר שלנו

לאחר מכן לוחצים על שלוש פסים (לפעמים בחר פרוייקט זה כבר על המסך)
לאחר מכן הכי למעלה "בחר פרוייקט" (Select project)
אחר כך 3 נקודות ו/או New project (פרויקט חדש)
בוחרים שם ומיקום לפרויקט

ואז על APIs and Services (APIs ושירותים)
ואז על Project - APIs and Service (פרויקט - APIs ושירותים)
ואז Credentials (אישורים)
ואז Create Credentials (צור אישורים)
ואז OAuth Client ID

אם כתוב שאין אישורים עדיין לוחצים בריבוע שנפתח, מאשרים, ממלאים שם לאתר חשבון גוגל אימייל ואת התקנון ומאשרים לאחר מכן יוצרים מזהה OAuth

בוחרים סוג אפליקציה Web Application (אפליקציית אינטרנט)

מוסיפים Authorized JavaScript origins (מקורות JavaScript מורשים)
את ה URL שלכם לדוגמא הכתובת המלאה
בשדה השני מוסיפים Authorized redirect URIs (כתובות להפנייה הטוקן לכתובת זו בלבד (לאמצעי אבטחה) רלוונטי רק אם יש לכם כבר שרת משלכם זה בעצם הדף שמקבל את אישור ההתחברות, אותו דף שאליו חוזרים אחרי ההתחברות
אם עושים הכל בצד לקוח בלבד זה לא חובה אבל אם רוצים בדיקה בצד שרת אז כן חובה )
לוחצים על צור (create)
מזל טוב יש לכם Client ID !!
מעתיקים אותו ומכניסים בקובץ HTML במקום המיועד.

בקובץ HTML כותבים כך

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>התחברות עם גוגל</title>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 100px;
      background-color: #f9f9f9;
    }
    h2 {
      color: #333;
    }
    #g_id_signin {
      margin-top: 20px;
      display: inline-block;
    }
    .user-info {
      margin-top: 30px;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      display: none;
    }
    .user-info img {
      border-radius: 50%;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h2>ברוכים הבאים, התחברו עם גוגל</h2>
  <div id="g_id_signin"></div>
  <div class="user-info" id="user-info">
    <img id="user-picture" width="80" height="80"><br>
    <strong id="user-name"></strong><br>
    <span id="user-email"></span>
  </div>
  <script>
    function handleCredentialResponse(response) {
      const token = response.credential
      const payload = JSON.parse(atob(token.split('.')[1]))
      localStorage.setItem("user", JSON.stringify({
        name: payload.name,
        email: payload.email,
        picture: payload.picture
      }))
      document.getElementById("user-picture").src = payload.picture
      document.getElementById("user-name").textContent = payload.name
      document.getElementById("user-email").textContent = payload.email
      document.getElementById("user-info").style.display = "block"
      // window.location.href = "index.html" // כאן אפשר להפנות לדף אחר אחרי התחברות
    }
    window.onload = function () {
      google.accounts.id.initialize({
        client_id: "*", // כאן ( במקום *) יש להכניס את Client ID שקיבלתם
        callback: handleCredentialResponse,
        auto_select: false,
        cancel_on_tap_outside: true,
        locale: "he"
      })
      google.accounts.id.renderButton(
        document.getElementById("g_id_signin"),
        {
          theme: "outline",
          size: "large",
          text: "continue_with",
          shape: "pill"
        }
      )
      google.accounts.id.prompt()
    }
  </script>
</body>
</html>

הערות חשובות:

Client ID חייב להיות אמיתי
Authorized JavaScript origins חייב להיות כתובת האתר בלבד, לא תיקיות
Authorized redirect URIs חובה רק אם עושים בדיקה בצד שרת
הערכים של text בכפתור מוגבלים (continue_with, signin_with וכו')
אפשר לשמור את פרטי המשתמש ב-localStorage או לשלוח לשרת לבדיקה

בדיקת התחברות בצד שרת:

שולחים את ה-JWT שמתקבל מהלקוח לשרת
מאמתים מול Google אם הטוקן תקין
אם תקין המשתמש מאושר, אם לא דוחים את ההתחברות

עכשיו יש לנו דף התחברות עם גוגל ללא צורך באימות בשרת.

בהצלחה