دکمه Sign In With Google را نمایش دهید

یک دکمه Sign In With Google را به سایت خود اضافه کنید تا کاربران بتوانند در برنامه وب شما ثبت نام یا وارد شوند. از HTML یا جاوا اسکریپت برای رندر کردن دکمه و ویژگی ها برای سفارشی کردن شکل، اندازه، متن و موضوع دکمه استفاده کنید.

Alt text

پس از اینکه کاربر یک حساب Google را انتخاب کرد و رضایت خود را اعلام کرد، Google نمایه کاربر را با استفاده از JSON Web Token (JWT) به اشتراک می گذارد. برای مروری بر مراحل مربوط به ورود به سیستم و تجربه کاربر، نحوه کارکرد آن را ببینید. درک دکمه شخصی‌شده شرایط و حالت‌های مختلف را که بر نحوه نمایش دکمه به کاربران تأثیر می‌گذارد، مرور می‌کند.

پیش نیازها

قبل از افزودن دکمه به صفحه ورود، موارد زیر را تکمیل کنید:

رندر دکمه

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

HTML

دکمه ورود به سیستم را با استفاده از HTML رندر کنید و JWT را به نقطه پایانی ورود به سیستم پلتفرم خود بازگردانید.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-login_uri="https://your.domain/your_login_endpoint"
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </body>
</html>

یک عنصر با کلاس g_id_signin به عنوان دکمه ورود با Google ارائه می شود. دکمه با پارامترهای ارائه شده در ویژگی های داده سفارشی می شود.

برای نمایش دکمه ورود با Google و ضربه زدن روی Google One در همان صفحه، data-auto_prompt="false" را حذف کنید. این برای کاهش اصطکاک و بهبود نرخ ورود به سیستم توصیه می شود.

برای لیست کامل ویژگی های داده، به صفحه مرجع g_id_signin مراجعه کنید

جاوا اسکریپت

دکمه ورود به سیستم را با استفاده از جاوا اسکریپت رندر کنید و JWT را به کنترل کننده پاسخ به تماس جاوا اسکریپت مرورگر بازگردانید.

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
        function handleCredentialResponse(response) {
          console.log("Encoded JWT ID token: " + response.credential);
        }
        window.onload = function () {
          google.accounts.id.initialize({
            client_id: "YOUR_GOOGLE_CLIENT_ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

عنصر مشخص شده به عنوان اولین پارامتر برای renderButton به عنوان یک دکمه ورود به سیستم با Google نمایش داده می شود. در این مثال از buttonDiv برای نمایش دکمه در صفحه استفاده می شود. دکمه با استفاده از ویژگی های مشخص شده در پارامتر دوم برای renderButton می شود.

برای به حداقل رساندن اصطکاک کاربر، google.accounts.id.prompt() برای نمایش One Tap به عنوان جایگزین دوم برای استفاده از دکمه ثبت نام یا ورود به سیستم فراخوانی می شود.

کتابخانه GIS سند HTML را برای عناصری با ویژگی شناسه تنظیم شده روی g_id_onload یا ویژگی های کلاس حاوی g_id_signin می کند. اگر عنصر منطبقی پیدا شود، دکمه با استفاده از HTML نیز ارائه می شود، صرف نظر از اینکه دکمه را در جاوا اسکریپت نیز رندر کرده باشید. برای جلوگیری از نمایش دوبار دکمه، احتمالاً با پارامترهای متناقض، عناصر HTML مطابق با این نام ها را در صفحات HTML خود وارد نکنید.

رسیدگی به اعتبارنامه

پس از ارائه رضایت کاربر، Google یک اعتبار JSON Web Token (JWT) که به عنوان شناسه شناسه شناخته می‌شود، به مرورگر کاربر یا مستقیماً به نقطه پایانی ورود به سیستم میزبانی شده توسط پلتفرم شما برمی‌گرداند.

جایی که شما برای دریافت JWT انتخاب می کنید بستگی به این دارد که آیا دکمه را با استفاده از HTML یا جاوا اسکریپت رندر می کنید و از حالت UX بازشو یا تغییر مسیر استفاده می کنید.

استفاده از حالت UX پاپ آپ، جریان UX ورود به سیستم را در یک popup انجام می دهد. این به طور کلی یک تجربه کمتر مزاحم برای کاربران است و حالت UX پیش فرض است.

هنگام رندر کردن دکمه با استفاده از:

  • HTML را می توانید تنظیم کنید:

    • data-callback برای برگرداندن JWT به کنترل کننده پاسخ به تماس یا
    • data-login_uri برای Google تا با استفاده از درخواست POST ، JWT را مستقیماً به نقطه پایانی ورود به سیستم شما ارسال کند.

    اگر هر دو مقدار تنظیم شده باشند، data-callback بر data-login_uri دارد. به عنوان مثال، این ممکن است زمانی مفید باشد که در حین اشکال‌زدایی از کنترلر برگشت تماس استفاده شود.

  • جاوا اسکریپت باید callback را تنظیم کنید، حالت بازشو هنگام باز کردن دکمه در جاوا اسکریپت از تغییر مسیرها پشتیبانی نمی کند. در صورت تنظیم، login_uri نادیده گرفته می شود.

    رسیدگی به پاسخ اعتبارنامه برگشتی را ببینید. برای اطلاعات بیشتر در مورد رمزگشایی JWT در کنترلر پاسخ به تماس JS شما.

حالت تغییر مسیر

استفاده از حالت redirect UX، جریان UX ورود به سیستم را با استفاده از تغییر جهت صفحه کامل مرورگر کاربر انجام می‌دهد و Google با استفاده از درخواست POST ، JWT را مستقیماً به نقطه پایانی ورود به سیستم شما برمی‌گرداند. این به طور کلی یک تجربه مزاحم تر برای کاربران است، اما امن ترین روش ورود به سیستم محسوب می شود.

هنگام رندر کردن دکمه با استفاده از:

  • HTML به صورت اختیاری data-login_uri را به URI نقطه پایانی ورود شما تنظیم می کند.
  • جاوا اسکریپت به صورت اختیاری login_uri را به URI نقطه پایانی ورود شما تنظیم می کند.

اگر مقداری ارائه نکنید، Google JWT را به URI صفحه فعلی برمی‌گرداند.

URI نقطه پایانی ورود شما

هنگام تنظیم data-login_uri یا login_uri از HTTPS و یک URI مطلق استفاده کنید. برای مثال، https://example.com/path .

HTTP فقط هنگام استفاده از لوکال هاست در طول توسعه مجاز است: http://localhost/path .

برای توضیح کامل الزامات و قوانین اعتبارسنجی Google، به استفاده از مبداهای امن جاوا اسکریپت و تغییر مسیر URIها مراجعه کنید.