دکمه ورود با گوگل برای وب، دکمه ورود با گوگل برای وب، دکمه ورود با گوگل برای وب

با دکمه Google برای وب وارد شوید

درباره این codelab

subjectآخرین به‌روزرسانی: ژوئیه ۹, ۲۰۲۵
account_circleنویسنده: Brian Daugherty

1. نمای کلی

در این لبه کد، یک صفحه وب برای ورود کاربر ایجاد می کنیم. شما از کتابخانه جاوا اسکریپت خدمات هویت گوگل برای نمایش و سفارشی کردن دکمه ورود به سیستم با Google استفاده خواهید کرد.

دکمه ورود با گوگل

  • نحوه اضافه کردن دکمه ورود با گوگل به یک صفحه وب
  • نحوه راه اندازی یک برنامه وب OAuth 2.0
  • نحوه رمزگشایی رمز شناسه
  • نحوه سفارشی سازی دکمه ورود با گوگل

آنچه شما نیاز دارید

  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 و جاوا اسکریپت است و چندین کار را انجام می دهد:

  • کتابخانه خدمات هویت Google را با استفاده از g_id_onload پیکربندی می کند،
  • با استفاده از g_id_signin یک دکمه ورود با Google را نمایش می دهد،
  • یک کنترل کننده تابع پاسخ به تماس جاوا اسکریپت به نام 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 شروع کنید.

وب سرور پایتون را در دایرکتوری حاوی 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 مورد استفاده شما نام پروژه ای است که هنگام راه اندازی پروژه glich.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 انتخاب کنید.
  • دکمه Add URI را در قسمت Authorized Javascript Sources فشار دهید
  • نشانی اینترنتی میزبان index.html را از مرحله 3 وارد کنید. صفحه وب خود را ارائه دهید .

    بر روی دستگاه محلی شما میزبانی می شود

    منشاء محلی روی دستگاه شما میزبانی می شود

    بر روی یک پلت فرم از راه دور میزبانی می شود

    با استفاده از یک پلت فرم میزبانی از راه دور
  • ایجاد را فشار دهید
  • شناسه مشتری جدید را کپی کنید.

یک چیز آخر

برای استفاده از Client ID جدید باید به عقب برگردیم و index.html به روز کنیم. در ویرایشگر خود، PUT_YOUR_WEB_CLIENT_ID_HERE با شناسه مشتری جدید خود جایگزین کنید. شناسه مشتری مانند مثال زیر است: 1234567890-abc123def456.apps.googleusercontent.com .

بیایید وارد شوید

5. وارد شوید

ابتدا، کنسول توسعه دهنده مرورگر خود را باز کنید، هر گونه خطا و اعتبار رمز JWT ID که از Google بازگردانده شده است در اینجا ثبت می شود.

دکمه ورود با گوگل را فشار دهید!

آنچه بعد اتفاق می افتد ممکن است کمی متفاوت باشد:

  • اگر در حال حاضر به بیش از یک حساب Google وارد شده‌اید، از شما خواسته می‌شود انتخاب کنید از کدام حساب برای ورود به این برنامه وب استفاده کنید.
  • اگر این اولین باری است که به سیستم این برنامه وب وارد می‌شوید، یک درخواست رضایت نشان داده می‌شود.

پس از انتخاب اختیاری یک حساب و رضایت شما، Google سپس با JWT پاسخ می دهد. تابع callback handleCredentialResponse که در مرورگر اجرا می شود JWT را دریافت می کند.

در این Codelab ما محتویات JWT را رمزگشایی و چاپ می کنیم، در یک برنامه وب تولیدی، JWT رمزگشایی شده را تأیید کرده و از آن برای انجام کارهای معنی دارتر استفاده می کنید، مانند ایجاد یک حساب کاربری جدید در پلتفرم باطن خود یا ایجاد یک جلسه جدید برای کاربر.

6. رمز JWT ID را بررسی کنید

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>

و این دکمه را خواهید دید

دکمه ورود با گوگل

اما شاید بخواهید رنگ، اندازه یا متن را مطابق با موضوع سایت خود تغییر دهید.

بیایید رنگ دکمه را به آبی تغییر دهیم و به جای آن بگوییم Sign up with 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>

پس از ذخیره و بارگذاری مجدد صفحه، یک دکمه آبی با متن جدید خواهید دید.

دکمه ثبت نام با گوگل

می‌توانید دکمه را بیشتر سفارشی کنید، ویژگی‌های Visual Data را برای فهرست کامل گزینه‌ها ببینید و مولد کد HTML ما را امتحان کنید.

8. منابع اضافی

تبریک می گویم!

شما یک دکمه ورود با Google را به یک صفحه وب اضافه کرده اید، یک سرویس گیرنده وب OAuth 2.0 را پیکربندی کرده اید، یک رمز JWT ID را رمزگشایی کرده اید و یاد گرفته اید که چگونه ظاهر دکمه را سفارشی کنید.

این پیوندها ممکن است در مراحل بعدی به شما کمک کند:

سوالات متداول

bug_report گزارش اشتباه