نمایش Google One Tap

یک درخواست One Tap را به سایت خود اضافه کنید تا کاربران را قادر به ثبت نام یا ورود به برنامه وب خود کنید. از HTML و جاوا اسکریپت برای رندر و سفارشی کردن درخواست استفاده کنید.

پیش نیازها

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

یک دکمه ورود با گوگل را به صفحه ورود خود اضافه کنید.

رندر سریع

یک قطعه کد را در هر صفحه ای که می خواهید One Tap نمایش داده شود، قرار دهید.

HTML

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

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

ویژگی data-login_uri URI نقطه پایانی ورود به برنامه وب شما است. می‌توانید ویژگی‌های داده سفارشی را اضافه کنید که به همراه شناسه صادر شده توسط Google به نقطه پایانی ورود به سیستم شما ارسال می‌شوند.

در صورت تمایل، از ویژگی data-skip_prompt_cookie و یک کوکی برای کنترل اینکه آیا درخواست One Tap در صفحات HTML ایستا نمایش داده می شود یا خیر استفاده کنید که نمی توانید محتوا را تغییر دهید. اگر کوکی مشخص شده تنظیم شده باشد، درخواست نمایش داده نمی شود.

از ویژگی اختیاری data-context برای تغییر متن استفاده شده در عنوان درخواست استفاده کنید. به عنوان مثال، data-context: "signup" "Sign in to" را به "Sign up to" تغییر می دهد.

به طور پیش فرض، اگر کاربر خارج از اعلان کلیک کند، درخواست One Tap به طور خودکار بسته می شود. اگر ویژگی data-cancel_on_tap_outside را روی false تنظیم کنید، می توانید این رفتار را غیرفعال کنید.

برای فهرست کامل ویژگی های پشتیبانی شده، به مرجع g_id_onload مراجعه کنید.

جاوا اسکریپت

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

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

برای پیکربندی درخواست One Tap در جاوا اسکریپت، ابتدا باید متد initialize() فراخوانی کنید. سپس، متد prompt() را فراخوانی کنید تا UI prompt نمایش داده شود.

از فیلد context اختیاری برای تغییر متن استفاده شده در عنوان درخواست استفاده کنید. به عنوان مثال، context: 'signup' "ورود به سیستم" را به "ثبت نام در" تغییر می دهد.

به طور پیش فرض، اگر کاربر خارج از اعلان کلیک کند، درخواست One Tap به طور خودکار بسته می شود. اگر ویژگی cancel_on_tap_outside را روی false تنظیم کنید، می توانید این رفتار را غیرفعال کنید.

برای فهرست کامل گزینه های داده، مرجع idConfiguration را ببینید.

وضعیت سریع

از یک تابع فراخوانی جاوا اسکریپت برای گوش دادن به اعلان‌های وضعیت رابط کاربری سریع استفاده کنید.

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

  • نمایش لحظه: این پس از فراخوانی متد prompt() رخ می دهد. اعلان حاوی یک مقدار بولی است که نشان می دهد رابط کاربری نمایش داده می شود یا خیر.

  • لحظه رد شدن: این زمانی اتفاق می‌افتد که درخواست One Tap با لغو خودکار، لغو دستی، یا زمانی که Google اعتبارنامه صادر نمی‌کند، مانند زمانی که جلسه انتخاب‌شده از سیستم Google خارج می‌شود، بسته می‌شود.

    در این مورد، توصیه می کنیم در صورت وجود، به سراغ ارائه دهندگان هویت بعدی بروید.

  • Dismissed moment: زمانی اتفاق می‌افتد که Google با موفقیت یک اعتبارنامه را بازیابی می‌کند یا کاربر می‌خواهد جریان بازیابی اعتبار را متوقف کند. به عنوان مثال، هنگامی که کاربر شروع به وارد کردن نام کاربری و رمز عبور خود در کادر گفتگوی ورود می کند، می توانید متد google.accounts.id.cancel() را فراخوانی کنید تا دستور One Tap را ببندید و یک لحظه رد شده را فعال کنید.

HTML

از ویژگی data-moment_callback برای تعیین تابع فراخوانی جاوا اسکریپت استفاده کنید. برای دریافت اعلان‌ها به یک کنترلر پاسخ تماس نیاز است.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

برای تسهیل ورود کاربران یا ثبت نام، می توانید با چندین ارائه دهنده هویت برای یافتن اعتبارنامه های موجود ارتباط برقرار کنید. ممکن است بخواهید وضعیت رابط کاربری سریع ما را بدانید تا بتوانید با ارائه دهنده هویت بعدی تماس بگیرید.

جاوا اسکریپت

کنترل کننده پاسخ تماس خود را به عنوان پارامتر به google.accounts.id.prompt ارسال کنید، در اینجا یک تابع پیکان برای رسیدگی به به‌روزرسانی‌های اعلان استفاده می‌شود.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

دکمه و اعلان

دکمه ورود با Google و درخواست One Tap ممکن است با هم در یک صفحه نمایش داده شوند.

HTML

دکمه ورود با Google و درخواست One Tap را با درج عناصر g_id_onload و g_id_signin نمایش دهید.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

جاوا اسکریپت

دکمه Sign in with Google و درخواست One Tap را با فراخوانی هر دو تابع renderButton() و prompt() به طور همزمان نمایش دهید.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

یک ضربه را پوشش ندهید

این بخش فقط زمانی اعمال می شود که FedCM غیرفعال باشد، وقتی FedCM فعال باشد، مرورگر درخواست های کاربر را در بالای محتوای صفحه نمایش می دهد.

برای اطمینان از مشاهده تمام اطلاعات نمایش داده شده توسط کاربران نهایی، Google One Tap نباید تحت پوشش هیچ محتوای دیگری قرار گیرد. در غیر این صورت، پنجره های پاپ آپ ممکن است در برخی موارد فعال شوند.

طرح‌بندی صفحه‌تان و ویژگی‌های z-index عناصر را دوباره بررسی کنید تا مطمئن شوید که Google One Tap در هر زمانی تحت پوشش هیچ محتوای دیگری قرار نمی‌گیرد. تغییر جریان UX ممکن است حتی زمانی که تنها یک پیکسل در مرزها پوشانده شده باشد، فعال شود.

پاسخ اعتبارنامه

در پاسخ اعتبارنامه یک JWT با امضای Google گنجانده شده است. پاسخ یا با استفاده از یک تابع فراخوانی جاوا اسکریپت به مرورگر برگردانده می شود یا از طریق تغییر مسیر به نقطه پایانی ورود به سیستم عامل شما.

پاسخ به تماس JS

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

HTML 

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

جاوا اسکریپت 

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

به عنوان مثال، handleCredentialResponse JWT را رمزگشایی می کند و برخی از فیلدهای رمز شناسه را در کنسول چاپ می کند.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(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);
  }
</script>

تغییر مسیر

برای بازگرداندن اعتبار به نقطه پایانی ورود به پلتفرم خود، URL را به تنظیمات URI تغییر مسیر مجاز مشتری وب OAuth 2.0 خود اضافه کنید.

از HTML یا JavaScript برای پیکربندی URI تغییر مسیر استفاده کنید.

HTML 

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

جاوا اسکریپت 

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});