نمایش Google One Tap

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

پیش‌نیازها

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

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

رندرینگ سریع

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

اچ‌تی‌ام‌ال

نمایش اعلان 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) نقطه ورود به سیستم برنامه وب شما است. می‌توانید ویژگی‌های داده سفارشی اضافه کنید که به همراه شناسه توکن صادر شده توسط گوگل به نقطه ورود شما ارسال می‌شوند.

در صورت تمایل، از ویژگی 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>

برای پیکربندی اعلان تک‌ضربه‌ای در جاوااسکریپت، ابتدا باید متد initialize() را فراخوانی کنید. سپس، متد prompt() را برای نمایش رابط کاربری اعلان فراخوانی کنید.

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

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

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

وضعیت فوری

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

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

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

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

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

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

اچ‌تی‌ام‌ال

از ویژگی 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 ارسال کنید، در اینجا از یک تابع arrow برای مدیریت به‌روزرسانی‌های اعلان استفاده شده است.

<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>

دکمه و اعلان

دکمه ورود با گوگل و دکمه 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>

جاوا اسکریپت

دکمه ورود با گوگل و اعلان تک‌ضربه‌ای را با فراخوانی همزمان توابع 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>

روی One Tap را نپوشانید

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

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

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

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

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

فراخوانی مجدد JS

برای پیکربندی یک فراخوانی مجدد، از 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 تغییر مسیر مجاز (Authed redirect URI) کلاینت وب OAuth 2.0 خود اضافه کنید.

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

اچ‌تی‌ام‌ال 

<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'
});