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

۱. مرور کلی

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

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

آنچه یاد خواهید گرفت

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

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

  1. یک ویرایشگر متن و مکانی برای میزبانی یک صفحه وب، محیط‌هایی که در این Codelab پوشش خواهیم داد:
    • اجرای محلی در ترمینال دستگاه شما، یا
    • با استفاده از پلتفرمی مانند Glitch .
    محیطی را انتخاب کنید که در آن راحت‌تر هستید.
  2. یک پروژه گوگل کلود. می‌توانید از پروژه موجود خود استفاده کنید یا یک پروژه جدید ایجاد کنید. حساب کاربری و پروژه پلتفرم گوگل کلود رایگان هستند.
  3. دانش پایه در مورد HTML، CSS، جاوا اسکریپت و Chrome DevTools (یا معادل آن).

پس بیایید شروع کنیم.

۲. صفحه ورود به سیستم خود را ایجاد کنید

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

  • کتابخانه سرویس‌های هویت گوگل را با استفاده از g_id_onload پیکربندی می‌کند.
  • دکمه ورود با گوگل را با استفاده از g_id_signin نمایش می‌دهد.
  • یک تابع فراخوانی جاوا اسکریپت به نام handleCredentialResponse اضافه می‌کند تا اطلاعات ورود کاربر را از گوگل دریافت کند، و
  • یک تابع decodeJWT برای تبدیل اعتبارنامه JSON Web Token (JWT) به JSON ساده.

ممکن است چیزی در مورد data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" کمی نامتعارف به نظر برسد.

فعلاً از آن صرف نظر کنید، کمی بعد به آن برمی‌گردیم.

۳. صفحه وب خود را ارائه دهید

ما قصد داریم دو محیط برای ارائه index.html به مرورگر را مورد بحث قرار دهیم:

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

موردی را که با آن راحت‌تر هستید انتخاب کنید. پس از راه‌اندازی، از URL برای پیکربندی یک کلاینت وب OAuth استفاده خواهیم کرد.

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

مطمئن شوید که پایتون ۳ روی سیستم شما نصب شده است. مراحل نصب بسته به سیستم عامل و پلتفرم متفاوت است، اگر نیاز به نصب پایتون روی دستگاه خود دارید، از بخش تنظیمات و نحوه استفاده از پایتون شروع کنید.

وب سرور پایتون را در دایرکتوری حاوی index.html اجرا کنید:

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

اکنون یک وب سرور در حال گوش دادن به اتصالات روی پورت ۸۰۰۰ است و آماده ارائه صفحه ورود به سیستم شما می‌باشد. URL به صورت زیر است:

http://localhost:8000

از یک پلتفرم توسعه وب

اگر تصمیم گرفته‌اید صفحه ورود خود را با استفاده از Glitch (یا معادل آن) ویرایش و میزبانی کنید، باید بتوانید index.html در یک صفحه پیش‌نمایش یا یک برگه جدید مرورگر باز کنید.

معمولاً، URL ای که استفاده خواهید کرد، نام پروژه‌ای است که هنگام راه‌اندازی پروژه glich.com خود وارد کرده‌اید. برای مثال، اگر پروژه glitch شما gis-example نام دارد، URL آن https://gis-example.glitch.me خواهد بود. البته، شما نام پروژه دیگری را انتخاب کرده‌اید و نمی‌توانید از این نام دوباره استفاده کنید. URL به صورت زیر است:

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

صفحه را بارگذاری کنید

یه لحظه صبر کن...

ابتدا باید یک کلاینت وب OAuth 2.0 ایجاد و آن را پیکربندی کنیم.

آدرس اینترنتی (URL) را کپی یا یادداشت کنید، در مرحله بعدی از آن استفاده خواهد شد.

۴. یک کلاینت وب OAuth راه‌اندازی کنید

بیایید OAuth را طوری پیکربندی کنیم که افراد بتوانند واقعاً وارد سیستم شوند.

  • برای ایجاد یک کلاینت وب OAuth 2.0 روی این لینک کلیک کنید. در صورت نیاز، یک ویزارد به شما در ایجاد و راه‌اندازی یک پروژه جدید Google Cloud کمک خواهد کرد.
  • از منوی کشویی نوع برنامه، برنامه وب را انتخاب کنید.
  • دکمه افزودن آدرس اینترنتی (Add URI) را در زیر Authorized Javascript origins فشار دهید.
  • آدرس اینترنتی (URL) میزبان فایل index.html از مرحله ۳ «صفحه وب خود را ارائه دهید» را وارد کنید.

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

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

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

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

یک نکته آخر

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

بیایید وارد سیستم شویم!

۵. وارد شوید

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

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

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

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

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

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

۶. توکن 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 قبل از استفاده از آن استفاده می‌شوند. توکن ID اطلاعات کاربر را از روی آن دریافت می‌کند و اطلاعات بیشتری در مورد معنی همه فیلدها ارائه می‌دهد.

۷. دکمه را سفارشی کنید

قرار دادن دکمه ورود پیش‌فرض در یک صفحه به این صورت انجام می‌شود

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

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

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

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

بیایید رنگ دکمه را به آبی تغییر دهیم و در عوض عبارت «با گوگل ثبت نام کنید» را روی آن بنویسیم.

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>

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

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

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

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

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

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

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

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