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

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

دکمه ورود به سیستم شخصی.

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

پیش نیازها

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

رندر دکمه

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

HTML

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

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></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></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 تعیین می‌شود. همچنین می توانید با افزودن پارامتر hl و کد زبان به دستورالعمل src هنگام بارگیری کتابخانه و با افزودن گزینه data-locale یا پارامتر محلی data-locale در HTML یا محلی در جاوا اسکریپت، زبان را به صورت دستی انتخاب کنید.

HTML

قطعه کد زیر نحوه نمایش زبان دکمه را با افزودن پارامتر hl به URL کتابخانه مشتری و با تنظیم ویژگی data-locale به فرانسوی نشان می دهد: 

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

جاوا اسکریپت

قطعه کد زیر نحوه نمایش زبان دکمه را به زبان فرانسوی با افزودن پارامتر hl به URL کتابخانه مشتری و فراخوانی متد google.accounts.id.renderButton با پارامتر locale تنظیم شده روی فرانسوی نشان می دهد: 

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

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

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

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

استفاده از حالت UX popup ، جریان UX ورود به سیستم را در یک پنجره بازشو انجام می دهد. این معمولاً یک تجربه کمتر مزاحم برای کاربران است و حالت 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 مراجعه کنید.