با مرجع API HTML Google وارد شوید

این صفحه مرجع API ویژگی های داده HTML Sign In With Google را شرح می دهد. می‌توانید از API برای نمایش درخواست One Tap یا دکمه Sign In With Google در صفحات وب خود استفاده کنید.

عنصر با شناسه "g_id_onload"

می‌توانید ویژگی‌های داده ورود با Google را در هر عنصر قابل مشاهده یا نامرئی، مانند <div> و <span> قرار دهید. تنها شرط این است که شناسه عنصر روی g_id_onload تنظیم شود. این شناسه را روی چند عنصر قرار ندهید.

ویژگی های داده

جدول زیر ویژگی های داده را با توضیحات آنها فهرست می کند:

صفت
data-client_id شناسه مشتری برنامه شما
data-auto_prompt نمایش ضربه Google One.
data-auto_select انتخاب خودکار را در Google One Tap فعال می کند.
data-login_uri URL نقطه پایانی ورود شما
data-callback نام تابع کنترل کننده رمز شناسه جاوا اسکریپت
data-native_login_uri URL نقطه پایانی کنترل کننده اعتبار رمز عبور شما
data-native_callback نام تابع کنترل کننده اعتبار رمز عبور جاوا اسکریپت
data-native_id_param نام پارامتر برای مقدار credential.id
data-native_password_param نام پارامتر برای مقدار credential.password
data-cancel_on_tap_outside کنترل می کند که اگر کاربر خارج از درخواست کلیک کند، درخواست لغو شود یا خیر.
data-prompt_parent_id شناسه DOM عنصر ظرف فرمان One Tap
data-skip_prompt_cookie اگر کوکی مشخص شده دارای مقدار غیر خالی باشد، از یک ضربه رد می شود.
data-nonce یک رشته تصادفی برای نشانه های ID
data-context عنوان و کلمات در اعلان One Tap
data-moment_callback نام تابع شنونده اعلان وضعیت رابط کاربری سریع
data-state_cookie_domain اگر نیاز به فراخوانی One Tap در دامنه اصلی و زیر دامنه های آن دارید، دامنه والد را به این ویژگی منتقل کنید تا از یک کوکی مشترک استفاده شود.
data-ux_mode جریان UX دکمه Sign In With Google
data-allowed_parent_origin مبداهایی که مجاز به جاسازی iframe میانی هستند. اگر این ویژگی وجود داشته باشد، One Tap در حالت iframe میانی اجرا می شود.
data-intermediate_iframe_close_callback وقتی کاربران به صورت دستی One Tap را می‌بندند، رفتار میانی فریم پیش‌فرض را لغو می‌کند.
data-itp_support One Tap UX ارتقا یافته را در مرورگرهای ITP فعال می کند.
data-login_hint با ارائه یک راهنمایی کاربر از انتخاب حساب رد شوید.
data-hd محدود کردن انتخاب حساب بر اساس دامنه
data-use_fedcm_for_prompt به مرورگر اجازه دهید درخواست های ورود به سیستم کاربر را کنترل کند و جریان ورود به سیستم بین وب سایت شما و Google را واسطه کند.
data-enable_redirect_uri_validation جریان تغییر مسیر دکمه را فعال کنید که با قوانین اعتبارسنجی Redirect URI مطابقت دارد.

انواع صفات

بخش های زیر شامل جزئیات مربوط به نوع هر ویژگی و یک مثال است.

data-client_id

این ویژگی شناسه مشتری برنامه شما است که در کنسول Google Cloud پیدا و ایجاد شده است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته بله data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

این ویژگی تعیین می‌کند که One Tap نمایش داده شود یا خیر. مقدار پیش فرض true است. وقتی این مقدار false باشد، ضربه Google One نمایش داده نمی‌شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-auto_prompt="true"

data-auto_select

این ویژگی تعیین می‌کند که اگر فقط یک جلسه Google برنامه شما را تأیید کرده باشد، یک نشانه شناسه به‌طور خودکار، بدون هیچ گونه تعامل کاربر، بازگردانده شود یا نه. مقدار پیش فرض false است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-auto_select="true"

data-login_uri

این ویژگی URI نقطه پایانی ورود شما است.

مقدار باید دقیقاً با یکی از URIهای مجاز تغییر مسیر برای مشتری OAuth 2.0 مطابقت داشته باشد که در کنسول API پیکربندی کرده‌اید و باید با قوانین اعتبارسنجی Redirect URI ما مطابقت داشته باشد.

اگر صفحه فعلی صفحه ورود شما باشد، ممکن است این ویژگی حذف شود، در این صورت اعتبار به طور پیش فرض به این صفحه ارسال می شود.

پاسخ اعتبار شناسه رمز شناسه زمانی به نقطه پایانی ورود به سیستم شما پست می‌شود که هیچ عملکرد پاسخگویی تعریف نشده باشد و کاربر روی دکمه‌های Sign In With Google یا One Tap کلیک کند، یا ورود خودکار انجام شود.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید اختیاری مثال
URL به طور پیش فرض URI صفحه فعلی یا مقداری که شما مشخص می کنید.
هنگامی که data-ux_mode="popup" و data-callback تنظیم شده است نادیده گرفته می شود.
data-login_uri="https://www.example.com/login"

نقطه پایانی ورود به سیستم شما باید درخواست‌های POST حاوی یک کلید credential با مقدار رمز شناسه در بدنه را بررسی کند.

در زیر نمونه ای از درخواست برای نقطه پایانی ورود به سیستم شما آمده است:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

داده برگشت به تماس

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

تایپ کنید مورد نیاز مثال
رشته اگر data-login_uri تنظیم نشده باشد، الزامی است. data-callback="handleToken"

یکی از ویژگی های data-login_uri و data-callback ممکن است استفاده شود. بستگی به کامپوننت زیر و تنظیمات حالت UX دارد:

  • ویژگی data-login_uri برای دکمه Sign In With Google redirect UX مورد نیاز است، که ویژگی data-callback را نادیده می گیرد.

  • یکی از این دو ویژگی باید برای Google One Tap و دکمه Google Sign-In popup UX تنظیم شود. اگر هر دو تنظیم شده باشند، ویژگی data-callback اولویت بیشتری دارد.

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-native_login_uri

این ویژگی نشانی وب نقطه پایانی کنترل کننده اعتبار رمز عبور شما است. اگر ویژگی data-native_login_uri یا ویژگی data-native_callback را تنظیم کنید، کتابخانه جاوا اسکریپت زمانی که جلسه Google وجود ندارد به مدیر اعتبار داخلی باز می گردد. شما مجاز به تنظیم هر دو ویژگی data-native_callback و data-native_login_uri نیستید. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-login_uri="https://www.example.com/password_login"

data-native_callback

این ویژگی نام تابع جاوا اسکریپت است که اعتبار رمز عبور بازگردانده شده از مدیر اعتبار داخلی مرورگر را کنترل می کند. اگر ویژگی data-native_login_uri یا ویژگی data-native_callback را تنظیم کنید، کتابخانه جاوا اسکریپت زمانی که جلسه Google وجود ندارد به مدیر اعتبار داخلی باز می گردد. شما مجاز به تنظیم data-native_callback و data-native_login_uri نیستید. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-native_callback="handlePasswordCredential"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-native_id_param

هنگامی که اعتبار رمز عبور را به نقطه پایانی کنترل کننده اعتبار رمز عبور ارسال می کنید، می توانید نام پارامتر را برای فیلد credential.id تعیین کنید. نام پیش فرض email است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
URL اختیاری data-native_id_param="user_id"

data-native_password_param

هنگامی که اعتبار رمز عبور را به نقطه پایانی کنترل کننده اعتبار رمز عبور ارسال می کنید، می توانید نام پارامتر را برای مقدار credential.password تعیین کنید. نام پیش فرض password است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
URL اختیاری data-native_password_param="pwd"

data-cancel_on_tap_outside

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

تایپ کنید مورد نیاز مثال
بولی اختیاری data-cancel_on_tap_outside="false"

data-prompt_parent_id

این ویژگی DOM ID عنصر کانتینر را تنظیم می کند. اگر تنظیم نشده باشد، اعلان One Tap در گوشه سمت راست بالای پنجره نمایش داده می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-prompt_parent_id="parent_id"

اگر کوکی مشخص شده دارای مقدار غیر خالی باشد، این ویژگی یک ضربه را رد می کند. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-skip_prompt_cookie="SID"

داده-غیر

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-nonce="biaqbm70g23"

طول Nonce به حداکثر اندازه JWT پشتیبانی شده توسط محیط شما و محدودیت‌های اندازه HTTP مرورگر و سرور محدود می‌شود.

زمینه داده

این ویژگی متن عنوان و پیام های نمایش داده شده در اعلان One Tap را تغییر می دهد. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-context="use"

جدول زیر تمام زمینه های موجود و توضیحات آنها را فهرست می کند:

زمینه
signin "ورود با گوگل"
signup "ثبت نام با گوگل"
use "استفاده با گوگل"

data-moment_callback

این ویژگی نام تابع شنونده اعلان وضعیت UI است. برای اطلاعات بیشتر، به نوع داده PromptMomentNotification مراجعه کنید.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-moment_callback="logMomentNotification"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

اگر نیاز به نمایش One Tap در یک دامنه والد و زیر دامنه های آن دارید، دامنه والد را به این ویژگی منتقل کنید تا از یک کوکی حالت مشترک استفاده شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-state_cookie_domain="example.com"

data-ux_mode

این ویژگی جریان UX مورد استفاده توسط دکمه Sign In With Google را تنظیم می کند. مقدار پیش فرض popup است. این ویژگی هیچ تاثیری روی One Tap UX ندارد. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-ux_mode="redirect"

جدول زیر حالت های UX موجود و توضیحات آنها را فهرست می کند.

حالت UX
popup جریان UX ورود به سیستم را در یک پنجره بازشو انجام می دهد.
redirect جریان UX ورود به سیستم را با تغییر مسیر کامل صفحه انجام می دهد.

data-allowed_parent_origin

مبداهایی که مجاز به جاسازی iframe میانی هستند. اگر این ویژگی ارائه شود، One Tap در حالت iframe میانی اجرا می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته یا آرایه رشته ای اختیاری data-allowed_parent_origin="https://example.com"

جدول زیر انواع مقادیر پشتیبانی شده و توضیحات آنها را فهرست می کند.

انواع ارزش
string URI یک دامنه. "https://example.com"
string array فهرستی از URI های دامنه جدا شده با کاما. "https://news.example.com,https://local.example.com"

اگر مقدار ویژگی data-allowed_parent_origin نامعتبر باشد، مقداردهی اولیه با یک ضربه در حالت iframe میانی با شکست مواجه می‌شود و متوقف می‌شود.

پیشوندهای Wildcard نیز پشتیبانی می شوند. به عنوان مثال، "https://*.example.com" با example.com و زیر دامنه‌های آن در همه سطوح مطابقت دارد (به عنوان مثال news.example.com ، login.news.example.com ). مواردی که هنگام استفاده از حروف عامیانه باید در نظر داشته باشید:

  • رشته های الگو را نمی توان فقط از یک علامت عام و یک دامنه سطح بالا تشکیل داد. برای مثال https://*.com و https://*.co.uk نامعتبر هستند. همانطور که در بالا ذکر شد، "https://*.example.com" با example.com و زیر دامنه های آن مطابقت دارد. همچنین می توانید از یک لیست جدا شده با کاما برای نمایش 2 دامنه مختلف استفاده کنید. برای مثال، "https://example1.com,https://*.example2.com" با دامنه‌های example1.com ، example2.com و زیر دامنه‌های example2.com مطابقت دارد.
  • دامنه های Wildcard باید با یک طرح https:// امن شروع شوند، بنابراین "*.example.com" نامعتبر در نظر گرفته می شود.

data-intermediate_iframe_close_callback

وقتی کاربران به‌طور دستی One Tap را با ضربه زدن روی دکمه «X» در رابط کاربری One Tap می‌بندند، رفتار میانی فریم پیش‌فرض را لغو می‌کند. رفتار پیش‌فرض حذف فوری iframe میانی از DOM است.

قسمت data-intermediate_iframe_close_callback فقط در حالت iframe میانی اعمال می شود. و به جای iframe با یک ضربه، فقط بر فریم میانی تأثیر می گذارد. رابط کاربری One Tap قبل از فراخوانی تماس مجدد حذف می شود.

تایپ کنید مورد نیاز مثال
تابع اختیاری data-intermediate_iframe_close_callback="logBeforeClose"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-itp_support

این فیلد تعیین می کند که آیا One Tap UX ارتقا یافته باید در مرورگرهایی فعال شود که از پیشگیری از ردیابی هوشمند (ITP) پشتیبانی می کنند یا خیر. مقدار پیش فرض false است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-itp_support="true"

data-login_hint

اگر برنامه شما از قبل بداند چه کاربری باید وارد سیستم شود، می تواند یک راهنمایی ورود به سیستم به Google ارائه دهد. در صورت موفقیت آمیز بودن، انتخاب حساب حذف می شود. مقادیر پذیرفته شده عبارتند از: یک آدرس ایمیل یا یک فیلد فرعی نشانه شناسه.

برای اطلاعات بیشتر، به اسناد OpenID Connect برای login_hint مراجعه کنید.

تایپ کنید مورد نیاز مثال
رشته می تواند یک آدرس ایمیل یا مقدار فیلد sub از نشانه ID باشد. اختیاری data-login_hint="elisa.beckett@gmail.com"

داده-hd

هنگامی که یک کاربر چندین حساب دارد و فقط باید با حساب Workspace خود وارد شود، از این برای ارائه یک اشاره به نام دامنه به Google استفاده کنید. در صورت موفقیت آمیز بودن، حساب های کاربری نمایش داده شده در هنگام انتخاب حساب به دامنه ارائه شده محدود می شود. یک مقدار عام: * فقط حساب‌های Workspace را به کاربر ارائه می‌دهد و حساب‌های مصرف‌کننده (user@gmail.com) را در هنگام انتخاب حساب مستثنی می‌کند.

برای اطلاعات بیشتر، به اسناد OpenID Connect برای hd مراجعه کنید.

تایپ کنید مورد نیاز مثال
رشته یک نام دامنه کاملا واجد شرایط یا *. اختیاری data-hd="*"

data-use_fedcm_for_prompt

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

تایپ کنید مورد نیاز مثال
بولی اختیاری data-use_fedcm_for_prompt="true"

data-enable_redirect_uri_validation

جریان تغییر مسیر دکمه را فعال کنید که با قوانین اعتبارسنجی Redirect URI مطابقت دارد.

تایپ کنید مورد نیاز مثال
بولی اختیاری data-enable_redirect_uri_validation="true"

عنصر با کلاس "g_id_signin"

اگر g_id_signin به ویژگی class عنصر اضافه کنید، عنصر به عنوان یک دکمه Sign In With Google نمایش داده می شود.

می‌توانید چندین دکمه Sign In With Google را در همان صفحه ارائه دهید. هر دکمه می تواند تنظیمات بصری خود را داشته باشد. تنظیمات با ویژگی های داده زیر تعریف می شوند.

ویژگی های داده های بصری

جدول زیر ویژگی های داده های بصری و توضیحات آنها را فهرست می کند:

صفت
data-type نوع دکمه: نماد یا دکمه استاندارد.
data-theme تم دکمه. مثلا filled_blue یا filled_black.
data-size اندازه دکمه مثلاً کوچک یا بزرگ.
data-text متن دکمه به عنوان مثال، "Sign in with Google" یا "Sign up with Google".
data-shape شکل دکمه به عنوان مثال، مستطیل یا دایره.
data-logo_alignment تراز آرم Google: چپ یا وسط.
data-width عرض دکمه، بر حسب پیکسل.
data-locale متن دکمه در زبان تنظیم شده در این ویژگی ارائه می شود.
data-click_listener در صورت تنظیم، زمانی که دکمه Sign In With Google کلیک می شود، این تابع فراخوانی می شود.
data-state اگر تنظیم شود، این رشته با کد ID برمی گردد.

انواع صفات

بخش های زیر شامل جزئیات مربوط به نوع هر ویژگی و یک مثال است.

نوع داده

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

تایپ کنید مورد نیاز مثال
رشته بله data-type="icon"

جدول زیر تمام انواع دکمه های موجود و توضیحات آنها را فهرست می کند:

تایپ کنید
standard
دکمه ای با متن یا اطلاعات شخصی.
icon
یک دکمه نماد بدون متن.

موضوع داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-theme="filled_blue"

جدول زیر تم های موجود و توضیحات آنها را فهرست می کند:

تم
outline
یک دکمه استاندارد با پس زمینه سفیدیک دکمه آیکون با پس زمینه سفیدیک دکمه شخصی با پس زمینه سفید
تم دکمه استاندارد.
filled_blue
یک دکمه استاندارد با پس زمینه آبییک دکمه نماد با پس زمینه آبییک دکمه شخصی با پس زمینه آبی
تم دکمه آبی پر شده.
filled_black
یک دکمه استاندارد با پس زمینه مشکییک دکمه آیکون با پس زمینه سیاهیک دکمه شخصی سازی شده با پس زمینه مشکی
تم دکمه سیاه و سفید.

اندازه داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-size="small"

جدول زیر اندازه دکمه های موجود و توضیحات آنها را فهرست می کند.

اندازه
large
یک دکمه استاندارد بزرگیک دکمه آیکون بزرگیک دکمه بزرگ و شخصی سازی شده
یک دکمه بزرگ
medium
یک دکمه استاندارد متوسطیک دکمه آیکون متوسط
یک دکمه با اندازه متوسط
small
یک دکمه کوچکیک دکمه آیکون کوچک
یک دکمه کوچک

داده-متن

متن دکمه مقدار پیش فرض signin_with است. هیچ تفاوت بصری برای متن دکمه‌های آیکون که ویژگی‌های data-text متفاوتی دارند، وجود ندارد. تنها استثنا زمانی است که متن برای دسترسی به صفحه نمایش خوانده شود.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-text="signup_with"

جدول زیر متون دکمه های موجود و توضیحات آنها را فهرست می کند:

متن
signin_with
یک دکمه استاندارد با عنوان "ورود با Google"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ورود با گوگل" است.
signup_with
یک دکمه استاندارد با عنوان "ثبت نام با Google"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ثبت نام با گوگل" است.
continue_with
یک دکمه استاندارد با عنوان «ادامه با Google»یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ادامه با گوگل" است.
signin
یک دکمه استاندارد با عنوان "ورود به سیستم"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ورود به سیستم" است.

شکل داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-shape="rectangular"

جدول زیر اشکال دکمه های موجود و توضیحات آنها را فهرست می کند:

شکل
rectangular
یک دکمه استاندارد مستطیلییک دکمه آیکون مستطیلییک دکمه شخصی سازی شده مستطیلی
دکمه مستطیلی شکل. اگر برای نوع دکمه icon استفاده شود، همان square است.
pill
یک دکمه استاندارد به شکل قرصیک دکمه آیکون به شکل قرصیک دکمه شخصی سازی شده به شکل قرص
دکمه قرص شکل. اگر برای نوع دکمه icon استفاده می شود، همان circle است.
circle
یک دکمه استاندارد دایره اییک دکمه آیکون دایره اییک دکمه شخصی دایره ای
دکمه دایره ای شکل. اگر برای نوع دکمه standard استفاده شود، همان pill است.
square
یک دکمه استاندارد مربعییک دکمه آیکون مربعییک دکمه مربعی شخصی
دکمه مربع شکل اگر برای نوع دکمه standard استفاده شود، همان rectangular است.

data-logo_alignment

تراز آرم گوگل. مقدار پیش فرض left است. این ویژگی فقط برای نوع دکمه standard اعمال می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-logo_alignment="center"

جدول زیر ترازهای موجود و توضیحات آنها را فهرست می کند:

آرم_تراز
left
یک دکمه استاندارد با آرم G در سمت چپ
نشان‌واره Google را تراز چپ می‌کند.
center
یک دکمه استاندارد با آرم G در مرکز
نشان‌واره Google را در مرکز تراز می‌کند.

پهنای داده

حداقل عرض دکمه، بر حسب پیکسل. حداکثر عرض موجود 400 پیکسل است.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-width=400

داده-محلی

اختیاری. متن دکمه را با استفاده از محل مشخص شده نمایش دهید، در غیر این صورت به طور پیش فرض برای تنظیمات حساب Google یا مرورگر کاربران. هنگام بارگیری کتابخانه، پارامتر hl و کد زبان را به دستورالعمل src اضافه کنید، برای مثال: gsi/client?hl=<iso-639-code> .

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

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-locale="zh_CN"

data-click_listener

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

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

در این مثال، زمانی که دکمه Sign in with Google کلیک می شود، پیام Sign in with Google clicked... به کنسول وارد می شود.

وضعیت داده

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

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-state="button 1"

ادغام سمت سرور

نقاط پایانی سمت سرور شما باید درخواست های HTTP POST زیر را انجام دهند.

نقطه پایانی کنترل کننده رمز شناسه

نقطه پایانی کنترل کننده نشانه شناسه، رمز شناسه را پردازش می کند. بر اساس وضعیت حساب مربوطه، می‌توانید کاربر را وارد کنید و او را به صفحه ثبت‌نام هدایت کنید یا برای اطلاعات بیشتر به صفحه پیوند حساب هدایت کنید.

درخواست HTTP POST حاوی اطلاعات زیر است:

قالب نام توضیحات
کوکی g_csrf_token یک رشته تصادفی که با هر درخواست به نقطه پایانی کنترل کننده تغییر می کند.
پارامتر درخواست g_csrf_token رشته ای که همان مقدار کوکی قبلی، g_csrf_token است.
پارامتر درخواست credential شناسه ای که گوگل صادر می کند.
پارامتر درخواست select_by نحوه انتخاب اعتبار
پارامتر درخواست state این پارامتر تنها زمانی تعریف می شود که کاربر برای ورود به سیستم، روی دکمه Sign in with Google کلیک کند و ویژگی state دکمه مشخص شود.

اعتبار

هنگامی که رمزگشایی می شود ، نشانه ID مانند مثال زیر است:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

فیلد sub یک شناسه جهانی منحصر به فرد برای حساب Google است. فقط از قسمت sub به عنوان شناسه کاربر استفاده کنید زیرا در بین تمام حساب‌های Google منحصربه‌فرد است و هرگز مجدداً استفاده نشده است. از آدرس ایمیل به عنوان شناسه استفاده نکنید زیرا یک حساب Google می تواند چندین آدرس ایمیل در مقاطع زمانی مختلف داشته باشد.

با استفاده از فیلدهای email ، email_verified و hd می‌توانید تعیین کنید که آیا Google میزبان آدرس ایمیل است یا خیر. در مواردی که Google معتبر است، تأیید می‌شود که کاربر مالک قانونی حساب است.

مواردی که گوگل معتبر است:

  • email دارای پسوند @gmail.com است، این یک حساب کاربری جیمیل است.
  • email_verified درست است و hd تنظیم شده است، این یک حساب Google Workspace است.

کاربران می توانند بدون استفاده از Gmail یا Google Workspace برای حساب های Google ثبت نام کنند. وقتی email حاوی پسوند @gmail.com نیست و hd وجود ندارد، گوگل معتبر نیست و رمز عبور یا روش‌های چالش دیگری برای تأیید کاربر توصیه می‌شود. email_verified همچنین می تواند درست باشد زیرا Google در ابتدا کاربر را هنگام ایجاد حساب Google تأیید کرد، اما مالکیت حساب ایمیل شخص ثالث ممکن است از آن زمان تغییر کرده باشد.

فیلد exp زمان انقضا را نشان می دهد تا بتوانید رمز را در سمت سرور خود تأیید کنید . برای شناسه شناسه ای که از Sign In With Google گرفته شده است یک ساعت زمان است. باید قبل از زمان انقضا توکن را تأیید کنید . exp برای مدیریت جلسه استفاده نکنید. نشانه شناسه منقضی شده به این معنی نیست که کاربر از سیستم خارج شده است. برنامه شما مسئول مدیریت جلسه کاربران شما است.

select_by

جدول زیر مقادیر احتمالی فیلد select_by را فهرست می کند. نوع دکمه استفاده شده همراه با حالت جلسه و رضایت برای تنظیم مقدار استفاده می شود.

  • کاربر دکمه One Tap یا Sign In With Google را فشار داد یا از فرآیند ورود خودکار بدون لمس استفاده کرد.

  • یک جلسه موجود پیدا شد، یا کاربر برای ایجاد یک جلسه جدید، یک حساب Google را انتخاب کرده و به سیستم وارد شده است.

  • قبل از به اشتراک گذاشتن اعتبار شناسه نشانه شناسه با برنامه شما، کاربر یا

    • دکمه تأیید را فشار دهید تا رضایت آنها را برای اشتراک‌گذاری اعتبارنامه‌ها اعلام کنید، یا
    • قبلاً رضایت داده بود و از Select an Account برای انتخاب یک حساب Google استفاده کرده بود.

مقدار این فیلد به یکی از این انواع تنظیم می شود

ارزش توضیحات
auto ورود خودکار کاربر با یک جلسه موجود که قبلاً رضایت خود را برای اشتراک‌گذاری اعتبارنامه صادر کرده است. فقط برای مرورگرهایی که از FedCM پشتیبانی نمی کنند اعمال می شود.
user کاربری با یک جلسه موجود که قبلاً رضایت داده بود، دکمه «ادامه به‌عنوان» با یک ضربه را فشار داد تا اعتبارنامه‌ها را به اشتراک بگذارد. فقط برای مرورگرهایی که از FedCM پشتیبانی نمی کنند اعمال می شود.
fedcm یک کاربر دکمه «ادامه به عنوان» با یک ضربه را فشار داد تا اعتبارنامه ها را با استفاده از FedCM به اشتراک بگذارد. فقط برای مرورگرهای پشتیبانی شده از FedCM اعمال می شود.
fedcm_auto ورود خودکار کاربر با یک جلسه موجود که قبلاً برای اشتراک‌گذاری اعتبارنامه‌ها با استفاده از FedCM One Tap رضایت داده بود. فقط برای مرورگرهای پشتیبانی شده از FedCM اعمال می شود.
user_1tap کاربری با یک جلسه موجود، دکمه «ادامه به عنوان» با یک ضربه را فشار داد تا رضایت و اعتبار را به اشتراک بگذارد. فقط برای Chrome نسخه 75 و بالاتر اعمال می شود.
user_2tap کاربر بدون جلسه موجود، دکمه «ادامه به عنوان» را با یک ضربه فشار داد تا یک حساب را انتخاب کند و سپس دکمه تأیید را در یک پنجره بازشو فشار داد تا رضایت و اعتبار را به اشتراک بگذارد. برای مرورگرهای غیر مبتنی بر Chromium اعمال می شود.
btn کاربری با یک جلسه موجود که قبلاً رضایت داده بود، دکمه ورود به سیستم با Google را فشار داد و یک حساب Google از «انتخاب یک حساب» برای اشتراک‌گذاری اعتبارنامه‌ها انتخاب کرد.
btn_confirm کاربری با یک جلسه موجود دکمه ورود با Google را فشار داده و دکمه تأیید را فشار داده تا رضایت و اعتبارنامه را به اشتراک بگذارد.
btn_add_session کاربری بدون جلسه موجود که قبلاً رضایت داده بود، دکمه ورود به سیستم با Google را فشار داد تا یک حساب Google انتخاب کند و اعتبارنامه را به اشتراک بگذارد.
btn_confirm_add_session کاربر بدون جلسه موجود ابتدا دکمه ورود با Google را فشار داد تا یک حساب Google را انتخاب کند و سپس دکمه تأیید را برای رضایت و اشتراک گذاری اعتبارنامه فشار داد.

دولت

این پارامتر تنها زمانی تعریف می‌شود که کاربر برای ورود به سیستم، روی دکمه Sign in with Google کلیک کند و ویژگی data-state دکمه کلیک شده مشخص شود. مقدار این فیلد همان مقداری است که در ویژگی data-state دکمه مشخص کرده اید.

از آنجایی که چندین دکمه ورود با Google را می توان در یک صفحه ارائه کرد، می توانید هر دکمه را با یک رشته منحصر به فرد اختصاص دهید. از این رو، می توانید این پارامتر را برای شناسایی دکمه ای که کاربر برای ورود به سیستم کلیک کرده است، state .

نقطه پایانی کنترل کننده اعتبار رمز عبور

نقطه پایانی کنترل کننده اعتبار رمز عبور، اعتبار رمز عبور را پردازش می کند که مدیر اعتبار بومی آن را بازیابی می کند.

درخواست HTTP POST حاوی اطلاعات زیر است:

قالب نام توضیحات
کوکی g_csrf_token یک رشته تصادفی که با هر درخواست به نقطه پایانی کنترل کننده تغییر می کند.
پارامتر درخواست g_csrf_token رشته ای که همان مقدار کوکی قبلی، g_csrf_token است.
پارامتر درخواست email این نشانه شناسه که Google صادر می کند.
پارامتر درخواست password نحوه انتخاب اعتبار
،

این صفحه مرجع API ویژگی های داده HTML Sign In With Google را شرح می دهد. می‌توانید از API برای نمایش درخواست One Tap یا دکمه Sign In With Google در صفحات وب خود استفاده کنید.

عنصر با شناسه "g_id_onload"

می‌توانید ویژگی‌های داده ورود با Google را در هر عنصر قابل مشاهده یا نامرئی، مانند <div> و <span> قرار دهید. تنها شرط این است که شناسه عنصر روی g_id_onload تنظیم شود. این شناسه را روی چند عنصر قرار ندهید.

ویژگی های داده

جدول زیر ویژگی های داده را با توضیحات آنها فهرست می کند:

صفت
data-client_id شناسه مشتری برنامه شما
data-auto_prompt نمایش ضربه Google One.
data-auto_select انتخاب خودکار را در Google One Tap فعال می کند.
data-login_uri URL نقطه پایانی ورود شما
data-callback نام تابع کنترل کننده رمز شناسه جاوا اسکریپت
data-native_login_uri URL نقطه پایانی کنترل کننده اعتبار رمز عبور شما
data-native_callback نام تابع کنترل کننده اعتبار رمز عبور جاوا اسکریپت
data-native_id_param نام پارامتر برای مقدار credential.id
data-native_password_param نام پارامتر برای مقدار credential.password
data-cancel_on_tap_outside کنترل می کند که اگر کاربر خارج از درخواست کلیک کند، درخواست لغو شود یا خیر.
data-prompt_parent_id شناسه DOM عنصر ظرف فرمان One Tap
data-skip_prompt_cookie اگر کوکی مشخص شده دارای مقدار غیر خالی باشد، از یک ضربه رد می شود.
data-nonce یک رشته تصادفی برای نشانه های ID
data-context عنوان و کلمات در اعلان One Tap
data-moment_callback نام تابع شنونده اعلان وضعیت رابط کاربری سریع
data-state_cookie_domain اگر نیاز به فراخوانی One Tap در دامنه اصلی و زیر دامنه های آن دارید، دامنه والد را به این ویژگی منتقل کنید تا از یک کوکی مشترک استفاده شود.
data-ux_mode جریان UX دکمه Sign In With Google
data-allowed_parent_origin مبداهایی که مجاز به جاسازی iframe میانی هستند. اگر این ویژگی وجود داشته باشد، One Tap در حالت iframe میانی اجرا می شود.
data-intermediate_iframe_close_callback وقتی کاربران به صورت دستی One Tap را می‌بندند، رفتار میانی فریم پیش‌فرض را لغو می‌کند.
data-itp_support One Tap UX ارتقا یافته را در مرورگرهای ITP فعال می کند.
data-login_hint با ارائه یک راهنمایی کاربر از انتخاب حساب رد شوید.
data-hd محدود کردن انتخاب حساب بر اساس دامنه
data-use_fedcm_for_prompt به مرورگر اجازه دهید درخواست های ورود به سیستم کاربر را کنترل کند و جریان ورود به سیستم بین وب سایت شما و Google را واسطه کند.
data-enable_redirect_uri_validation جریان تغییر مسیر دکمه را فعال کنید که با قوانین اعتبارسنجی Redirect URI مطابقت دارد.

انواع صفات

بخش های زیر شامل جزئیات مربوط به نوع هر ویژگی و یک مثال است.

data-client_id

این ویژگی شناسه مشتری برنامه شما است که در کنسول Google Cloud پیدا و ایجاد شده است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته بله data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

این ویژگی تعیین می‌کند که One Tap نمایش داده شود یا خیر. مقدار پیش فرض true است. وقتی این مقدار false باشد، ضربه Google One نمایش داده نمی‌شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-auto_prompt="true"

data-auto_select

این ویژگی تعیین می‌کند که اگر فقط یک جلسه Google برنامه شما را تأیید کرده باشد، یک نشانه شناسه به‌طور خودکار، بدون هیچ گونه تعامل کاربر، بازگردانده شود یا نه. مقدار پیش فرض false است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-auto_select="true"

data-login_uri

این ویژگی URI نقطه پایانی ورود شما است.

مقدار باید دقیقاً با یکی از URIهای مجاز تغییر مسیر برای مشتری OAuth 2.0 مطابقت داشته باشد که در کنسول API پیکربندی کرده‌اید و باید با قوانین اعتبارسنجی Redirect URI ما مطابقت داشته باشد.

اگر صفحه فعلی صفحه ورود شما باشد، ممکن است این ویژگی حذف شود، در این صورت اعتبار به طور پیش فرض به این صفحه ارسال می شود.

پاسخ اعتبار شناسه رمز شناسه زمانی به نقطه پایانی ورود به سیستم شما پست می‌شود که هیچ عملکرد پاسخگویی تعریف نشده باشد و کاربر روی دکمه‌های Sign In With Google یا One Tap کلیک کند، یا ورود خودکار انجام شود.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید اختیاری مثال
URL به طور پیش فرض URI صفحه فعلی یا مقداری که شما مشخص می کنید.
هنگامی که data-ux_mode="popup" و data-callback تنظیم شده است نادیده گرفته می شود.
data-login_uri="https://www.example.com/login"

نقطه پایانی ورود به سیستم شما باید درخواست‌های POST حاوی یک کلید credential با مقدار رمز شناسه در بدنه را بررسی کند.

در زیر نمونه ای از درخواست برای نقطه پایانی ورود به سیستم شما آمده است:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

داده برگشت به تماس

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

تایپ کنید مورد نیاز مثال
رشته اگر data-login_uri تنظیم نشده باشد، الزامی است. data-callback="handleToken"

یکی از ویژگی های data-login_uri و data-callback ممکن است استفاده شود. بستگی به کامپوننت زیر و تنظیمات حالت UX دارد:

  • ویژگی data-login_uri برای دکمه Sign In With Google redirect UX مورد نیاز است، که ویژگی data-callback را نادیده می گیرد.

  • یکی از این دو ویژگی باید برای Google One Tap و دکمه Google Sign-In popup UX تنظیم شود. اگر هر دو تنظیم شده باشند، ویژگی data-callback اولویت بیشتری دارد.

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-native_login_uri

این ویژگی نشانی وب نقطه پایانی کنترل کننده اعتبار رمز عبور شما است. اگر ویژگی data-native_login_uri یا ویژگی data-native_callback را تنظیم کنید، کتابخانه جاوا اسکریپت زمانی که جلسه Google وجود ندارد به مدیر اعتبار داخلی باز می گردد. شما مجاز به تنظیم هر دو ویژگی data-native_callback و data-native_login_uri نیستید. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-login_uri="https://www.example.com/password_login"

data-native_callback

این ویژگی نام تابع جاوا اسکریپت است که اعتبار رمز عبور بازگردانده شده از مدیر اعتبار داخلی مرورگر را کنترل می کند. اگر ویژگی data-native_login_uri یا ویژگی data-native_callback را تنظیم کنید، کتابخانه جاوا اسکریپت زمانی که جلسه Google وجود ندارد به مدیر اعتبار داخلی باز می گردد. شما مجاز به تنظیم data-native_callback و data-native_login_uri نیستید. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-native_callback="handlePasswordCredential"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-native_id_param

هنگامی که اعتبار رمز عبور را به نقطه پایانی کنترل کننده اعتبار رمز عبور ارسال می کنید، می توانید نام پارامتر را برای فیلد credential.id تعیین کنید. نام پیش فرض email است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
URL اختیاری data-native_id_param="user_id"

data-native_password_param

هنگامی که اعتبار رمز عبور را به نقطه پایانی کنترل کننده اعتبار رمز عبور ارسال می کنید، می توانید نام پارامتر را برای مقدار credential.password تعیین کنید. نام پیش فرض password است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
URL اختیاری data-native_password_param="pwd"

data-cancel_on_tap_outside

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

تایپ کنید مورد نیاز مثال
بولی اختیاری data-cancel_on_tap_outside="false"

data-prompt_parent_id

این ویژگی DOM ID عنصر کانتینر را تنظیم می کند. اگر تنظیم نشده باشد، اعلان One Tap در گوشه سمت راست بالای پنجره نمایش داده می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-prompt_parent_id="parent_id"

اگر کوکی مشخص شده دارای مقدار غیر خالی باشد، این ویژگی یک ضربه را رد می کند. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-skip_prompt_cookie="SID"

داده-غیر

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-nonce="biaqbm70g23"

طول Nonce به حداکثر اندازه JWT پشتیبانی شده توسط محیط شما و محدودیت‌های اندازه HTTP مرورگر و سرور محدود می‌شود.

زمینه داده

این ویژگی متن عنوان و پیام های نمایش داده شده در اعلان One Tap را تغییر می دهد. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-context="use"

جدول زیر تمام زمینه های موجود و توضیحات آنها را فهرست می کند:

زمینه
signin "ورود با گوگل"
signup "ثبت نام با گوگل"
use "استفاده با گوگل"

data-moment_callback

این ویژگی نام تابع شنونده اعلان وضعیت UI است. برای اطلاعات بیشتر، به نوع داده PromptMomentNotification مراجعه کنید.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-moment_callback="logMomentNotification"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

اگر نیاز به نمایش One Tap در یک دامنه والد و زیر دامنه های آن دارید، دامنه والد را به این ویژگی منتقل کنید تا از یک کوکی حالت مشترک استفاده شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-state_cookie_domain="example.com"

data-ux_mode

این ویژگی جریان UX مورد استفاده توسط دکمه Sign In With Google را تنظیم می کند. مقدار پیش فرض popup است. این ویژگی هیچ تاثیری روی One Tap UX ندارد. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-ux_mode="redirect"

جدول زیر حالت های UX موجود و توضیحات آنها را فهرست می کند.

حالت UX
popup جریان UX ورود به سیستم را در یک پنجره بازشو انجام می دهد.
redirect جریان UX ورود به سیستم را با تغییر مسیر کامل صفحه انجام می دهد.

data-allowed_parent_origin

مبداهایی که مجاز به جاسازی iframe میانی هستند. اگر این ویژگی ارائه شود، One Tap در حالت iframe میانی اجرا می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته یا آرایه رشته ای اختیاری data-allowed_parent_origin="https://example.com"

جدول زیر انواع مقادیر پشتیبانی شده و توضیحات آنها را فهرست می کند.

انواع ارزش
string URI یک دامنه. "https://example.com"
string array فهرستی از URI های دامنه جدا شده با کاما. "https://news.example.com,https://local.example.com"

اگر مقدار ویژگی data-allowed_parent_origin نامعتبر باشد، مقداردهی اولیه با یک ضربه در حالت iframe میانی با شکست مواجه می‌شود و متوقف می‌شود.

پیشوندهای Wildcard نیز پشتیبانی می شوند. به عنوان مثال، "https://*.example.com" با example.com و زیر دامنه‌های آن در همه سطوح مطابقت دارد (به عنوان مثال news.example.com ، login.news.example.com ). مواردی که هنگام استفاده از حروف عامیانه باید در نظر داشته باشید:

  • رشته های الگو را نمی توان فقط از یک علامت عام و یک دامنه سطح بالا تشکیل داد. برای مثال https://*.com و https://*.co.uk نامعتبر هستند. همانطور که در بالا ذکر شد، "https://*.example.com" با example.com و زیر دامنه های آن مطابقت دارد. همچنین می توانید از یک لیست جدا شده با کاما برای نمایش 2 دامنه مختلف استفاده کنید. برای مثال، "https://example1.com,https://*.example2.com" با دامنه‌های example1.com ، example2.com و زیر دامنه‌های example2.com مطابقت دارد.
  • دامنه های Wildcard باید با یک طرح https:// امن شروع شوند، بنابراین "*.example.com" نامعتبر در نظر گرفته می شود.

data-intermediate_iframe_close_callback

وقتی کاربران به‌طور دستی One Tap را با ضربه زدن روی دکمه «X» در رابط کاربری One Tap می‌بندند، رفتار میانی فریم پیش‌فرض را لغو می‌کند. رفتار پیش‌فرض حذف فوری iframe میانی از DOM است.

قسمت data-intermediate_iframe_close_callback فقط در حالت iframe میانی اعمال می شود. و به جای iframe با یک ضربه، فقط بر فریم میانی تأثیر می گذارد. رابط کاربری One Tap قبل از فراخوانی تماس مجدد حذف می شود.

تایپ کنید مورد نیاز مثال
تابع اختیاری data-intermediate_iframe_close_callback="logBeforeClose"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-itp_support

این فیلد تعیین می کند که آیا One Tap UX ارتقا یافته باید در مرورگرهایی فعال شود که از پیشگیری از ردیابی هوشمند (ITP) پشتیبانی می کنند یا خیر. مقدار پیش فرض false است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-itp_support="true"

data-login_hint

اگر برنامه شما از قبل بداند چه کاربری باید وارد سیستم شود، می تواند یک راهنمایی ورود به سیستم به Google ارائه دهد. در صورت موفقیت آمیز بودن، انتخاب حساب حذف می شود. مقادیر پذیرفته شده عبارتند از: یک آدرس ایمیل یا یک فیلد فرعی نشانه شناسه.

برای اطلاعات بیشتر، به اسناد OpenID Connect برای login_hint مراجعه کنید.

تایپ کنید مورد نیاز مثال
رشته می تواند یک آدرس ایمیل یا مقدار فیلد sub از نشانه ID باشد. اختیاری data-login_hint="elisa.beckett@gmail.com"

داده-hd

هنگامی که یک کاربر چندین حساب دارد و فقط باید با حساب Workspace خود وارد شود، از این برای ارائه یک اشاره به نام دامنه به Google استفاده کنید. در صورت موفقیت آمیز بودن، حساب های کاربری نمایش داده شده در هنگام انتخاب حساب به دامنه ارائه شده محدود می شود. یک مقدار عام: * فقط حساب‌های Workspace را به کاربر ارائه می‌دهد و حساب‌های مصرف‌کننده (user@gmail.com) را در هنگام انتخاب حساب مستثنی می‌کند.

برای اطلاعات بیشتر، به اسناد OpenID Connect برای hd مراجعه کنید.

تایپ کنید مورد نیاز مثال
رشته یک نام دامنه کاملا واجد شرایط یا *. اختیاری data-hd="*"

data-use_fedcm_for_prompt

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

تایپ کنید مورد نیاز مثال
بولی اختیاری data-use_fedcm_for_prompt="true"

data-enable_redirect_uri_validation

جریان تغییر مسیر دکمه را فعال کنید که با قوانین اعتبارسنجی Redirect URI مطابقت دارد.

تایپ کنید مورد نیاز مثال
بولی اختیاری data-enable_redirect_uri_validation="true"

عنصر با کلاس "g_id_signin"

اگر g_id_signin به ویژگی class عنصر اضافه کنید، عنصر به عنوان یک دکمه Sign In With Google نمایش داده می شود.

می‌توانید چندین دکمه Sign In With Google را در همان صفحه ارائه دهید. هر دکمه می تواند تنظیمات بصری خود را داشته باشد. تنظیمات با ویژگی های داده زیر تعریف می شوند.

ویژگی های داده های بصری

جدول زیر ویژگی های داده های بصری و توضیحات آنها را فهرست می کند:

صفت
data-type نوع دکمه: نماد یا دکمه استاندارد.
data-theme تم دکمه. مثلا filled_blue یا filled_black.
data-size اندازه دکمه مثلاً کوچک یا بزرگ.
data-text متن دکمه به عنوان مثال، "Sign in with Google" یا "Sign up with Google".
data-shape شکل دکمه به عنوان مثال، مستطیل یا دایره.
data-logo_alignment تراز آرم Google: چپ یا وسط.
data-width عرض دکمه، بر حسب پیکسل.
data-locale متن دکمه در زبان تنظیم شده در این ویژگی ارائه می شود.
data-click_listener در صورت تنظیم، زمانی که دکمه Sign In With Google کلیک می شود، این تابع فراخوانی می شود.
data-state اگر تنظیم شود، این رشته با کد ID برمی گردد.

انواع صفات

بخش های زیر شامل جزئیات مربوط به نوع هر ویژگی و یک مثال است.

نوع داده

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

تایپ کنید مورد نیاز مثال
رشته بله data-type="icon"

جدول زیر تمام انواع دکمه های موجود و توضیحات آنها را فهرست می کند:

تایپ کنید
standard
دکمه ای با متن یا اطلاعات شخصی.
icon
یک دکمه نماد بدون متن.

موضوع داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-theme="filled_blue"

جدول زیر تم های موجود و توضیحات آنها را فهرست می کند:

تم
outline
یک دکمه استاندارد با پس زمینه سفیدیک دکمه آیکون با پس زمینه سفیدیک دکمه شخصی با پس زمینه سفید
تم دکمه استاندارد.
filled_blue
یک دکمه استاندارد با پس زمینه آبییک دکمه نماد با پس زمینه آبییک دکمه شخصی با پس زمینه آبی
تم دکمه آبی پر شده.
filled_black
یک دکمه استاندارد با پس زمینه مشکییک دکمه آیکون با پس زمینه سیاهیک دکمه شخصی سازی شده با پس زمینه مشکی
تم دکمه سیاه و سفید.

اندازه داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-size="small"

جدول زیر اندازه دکمه های موجود و توضیحات آنها را فهرست می کند.

اندازه
large
یک دکمه استاندارد بزرگیک دکمه آیکون بزرگیک دکمه بزرگ و شخصی سازی شده
یک دکمه بزرگ
medium
یک دکمه استاندارد متوسطیک دکمه آیکون متوسط
یک دکمه با اندازه متوسط
small
یک دکمه کوچکیک دکمه آیکون کوچک
یک دکمه کوچک

داده-متن

متن دکمه مقدار پیش فرض signin_with است. هیچ تفاوت بصری برای متن دکمه‌های آیکون که ویژگی‌های data-text متفاوتی دارند، وجود ندارد. تنها استثنا زمانی است که متن برای دسترسی به صفحه نمایش خوانده شود.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-text="signup_with"

جدول زیر متون دکمه های موجود و توضیحات آنها را فهرست می کند:

متن
signin_with
یک دکمه استاندارد با عنوان "ورود با Google"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ورود با گوگل" است.
signup_with
یک دکمه استاندارد با عنوان "ثبت نام با Google"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ثبت نام با گوگل" است.
continue_with
یک دکمه استاندارد با عنوان «ادامه با Google»یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ادامه با گوگل" است.
signin
یک دکمه استاندارد با عنوان "ورود به سیستم"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ورود به سیستم" است.

شکل داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-shape="rectangular"

جدول زیر اشکال دکمه های موجود و توضیحات آنها را فهرست می کند:

شکل
rectangular
یک دکمه استاندارد مستطیلییک دکمه آیکون مستطیلییک دکمه شخصی سازی شده مستطیلی
دکمه مستطیلی شکل. اگر برای نوع دکمه icon استفاده شود، همان square است.
pill
یک دکمه استاندارد به شکل قرصیک دکمه آیکون به شکل قرصیک دکمه شخصی سازی شده به شکل قرص
دکمه قرص شکل. اگر برای نوع دکمه icon استفاده می شود، همان circle است.
circle
یک دکمه استاندارد دایره اییک دکمه آیکون دایره اییک دکمه شخصی دایره ای
دکمه دایره ای شکل. اگر برای نوع دکمه standard استفاده شود، همان pill است.
square
یک دکمه استاندارد مربعییک دکمه آیکون مربعییک دکمه مربعی شخصی
دکمه مربع شکل اگر برای نوع دکمه standard استفاده شود، همان rectangular است.

data-logo_alignment

تراز آرم گوگل. مقدار پیش فرض left است. این ویژگی فقط برای نوع دکمه standard اعمال می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-logo_alignment="center"

جدول زیر ترازهای موجود و توضیحات آنها را فهرست می کند:

آرم_تراز
left
یک دکمه استاندارد با آرم G در سمت چپ
نشان‌واره Google را تراز چپ می‌کند.
center
یک دکمه استاندارد با آرم G در مرکز
نشان‌واره Google را در مرکز تراز می‌کند.

پهنای داده

حداقل عرض دکمه، بر حسب پیکسل. حداکثر عرض موجود 400 پیکسل است.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-width=400

داده-محلی

اختیاری. متن دکمه را با استفاده از محل مشخص شده نمایش دهید، در غیر این صورت به طور پیش فرض برای تنظیمات حساب Google یا مرورگر کاربران. هنگام بارگیری کتابخانه، پارامتر hl و کد زبان را به دستورالعمل src اضافه کنید، برای مثال: gsi/client?hl=<iso-639-code> .

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

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-locale="zh_CN"

data-click_listener

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

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

در این مثال، زمانی که دکمه Sign in with Google کلیک می شود، پیام Sign in with Google clicked... به کنسول وارد می شود.

وضعیت داده

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

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-state="button 1"

ادغام سمت سرور

نقاط پایانی سمت سرور شما باید درخواست های HTTP POST زیر را انجام دهند.

نقطه پایانی کنترل کننده رمز شناسه

نقطه پایانی کنترل کننده نشانه شناسه، رمز شناسه را پردازش می کند. بر اساس وضعیت حساب مربوطه، می‌توانید کاربر را وارد کنید و او را به صفحه ثبت‌نام هدایت کنید یا برای اطلاعات بیشتر به صفحه پیوند حساب هدایت کنید.

درخواست HTTP POST حاوی اطلاعات زیر است:

قالب نام توضیحات
کوکی g_csrf_token یک رشته تصادفی که با هر درخواست به نقطه پایانی کنترل کننده تغییر می کند.
پارامتر درخواست g_csrf_token رشته ای که همان مقدار کوکی قبلی، g_csrf_token است.
پارامتر درخواست credential شناسه ای که گوگل صادر می کند.
پارامتر درخواست select_by نحوه انتخاب اعتبار
پارامتر درخواست state این پارامتر تنها زمانی تعریف می شود که کاربر برای ورود به سیستم، روی دکمه Sign in with Google کلیک کند و ویژگی state دکمه مشخص شود.

اعتبار

هنگامی که رمزگشایی می شود ، نشانه ID مانند مثال زیر است:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

فیلد sub یک شناسه جهانی منحصر به فرد برای حساب Google است. فقط از قسمت sub به عنوان شناسه کاربر استفاده کنید زیرا در بین تمام حساب‌های Google منحصربه‌فرد است و هرگز مجدداً استفاده نشده است. از آدرس ایمیل به عنوان شناسه استفاده نکنید زیرا یک حساب Google می تواند چندین آدرس ایمیل در مقاطع زمانی مختلف داشته باشد.

با استفاده از فیلدهای email ، email_verified و hd می‌توانید تعیین کنید که آیا Google میزبان آدرس ایمیل است یا خیر. در مواردی که Google معتبر است، تأیید می‌شود که کاربر مالک قانونی حساب است.

مواردی که گوگل معتبر است:

  • email دارای پسوند @gmail.com است، این یک حساب کاربری جیمیل است.
  • email_verified درست است و hd تنظیم شده است، این یک حساب Google Workspace است.

کاربران می توانند بدون استفاده از Gmail یا Google Workspace برای حساب های Google ثبت نام کنند. وقتی email حاوی پسوند @gmail.com نیست و hd وجود ندارد، گوگل معتبر نیست و رمز عبور یا روش‌های چالش دیگری برای تأیید کاربر توصیه می‌شود. email_verified همچنین می تواند درست باشد زیرا Google در ابتدا کاربر را هنگام ایجاد حساب Google تأیید کرد، اما مالکیت حساب ایمیل شخص ثالث ممکن است از آن زمان تغییر کرده باشد.

فیلد exp زمان انقضا را نشان می دهد تا بتوانید رمز را در سمت سرور خود تأیید کنید . برای شناسه شناسه ای که از Sign In With Google گرفته شده است یک ساعت زمان است. باید قبل از زمان انقضا توکن را تأیید کنید . exp برای مدیریت جلسه استفاده نکنید. نشانه شناسه منقضی شده به این معنی نیست که کاربر از سیستم خارج شده است. برنامه شما مسئول مدیریت جلسه کاربران شما است.

select_by

جدول زیر مقادیر احتمالی فیلد select_by را فهرست می کند. نوع دکمه استفاده شده همراه با حالت جلسه و رضایت برای تنظیم مقدار استفاده می شود.

  • کاربر دکمه One Tap یا Sign In With Google را فشار داد یا از فرآیند ورود خودکار بدون لمس استفاده کرد.

  • یک جلسه موجود پیدا شد، یا کاربر برای ایجاد یک جلسه جدید، یک حساب Google را انتخاب کرده و به سیستم وارد شده است.

  • قبل از به اشتراک گذاشتن اعتبار شناسه نشانه شناسه با برنامه شما، کاربر یا

    • دکمه تأیید را فشار دهید تا رضایت آنها را برای اشتراک‌گذاری اعتبارنامه‌ها اعلام کنید، یا
    • قبلاً رضایت داده بود و از Select an Account برای انتخاب یک حساب Google استفاده کرده بود.

مقدار این فیلد به یکی از این انواع تنظیم می شود

ارزش توضیحات
auto ورود خودکار کاربر با یک جلسه موجود که قبلاً رضایت خود را برای اشتراک‌گذاری اعتبارنامه صادر کرده است. فقط برای مرورگرهایی که از FedCM پشتیبانی نمی کنند اعمال می شود.
user کاربری با یک جلسه موجود که قبلاً رضایت داده بود، دکمه «ادامه به‌عنوان» با یک ضربه را فشار داد تا اعتبارنامه‌ها را به اشتراک بگذارد. فقط برای مرورگرهایی که از FedCM پشتیبانی نمی کنند اعمال می شود.
fedcm یک کاربر دکمه «ادامه به عنوان» با یک ضربه را فشار داد تا اعتبارنامه ها را با استفاده از FedCM به اشتراک بگذارد. فقط برای مرورگرهای پشتیبانی شده از FedCM اعمال می شود.
fedcm_auto ورود خودکار کاربر با یک جلسه موجود که قبلاً برای اشتراک‌گذاری اعتبارنامه‌ها با استفاده از FedCM One Tap رضایت داده بود. فقط برای مرورگرهای پشتیبانی شده از FedCM اعمال می شود.
user_1tap کاربری با یک جلسه موجود، دکمه «ادامه به عنوان» با یک ضربه را فشار داد تا رضایت و اعتبار را به اشتراک بگذارد. فقط برای Chrome نسخه 75 و بالاتر اعمال می شود.
user_2tap کاربر بدون جلسه موجود، دکمه «ادامه به عنوان» را با یک ضربه فشار داد تا یک حساب را انتخاب کند و سپس دکمه تأیید را در یک پنجره بازشو فشار داد تا رضایت و اعتبار را به اشتراک بگذارد. برای مرورگرهای غیر مبتنی بر Chromium اعمال می شود.
btn کاربری با یک جلسه موجود که قبلاً رضایت داده بود، دکمه ورود به سیستم با Google را فشار داد و یک حساب Google از «انتخاب یک حساب» برای اشتراک‌گذاری اعتبارنامه‌ها انتخاب کرد.
btn_confirm کاربری با یک جلسه موجود دکمه ورود با Google را فشار داده و دکمه تأیید را فشار داده تا رضایت و اعتبارنامه را به اشتراک بگذارد.
btn_add_session کاربری بدون جلسه موجود که قبلاً رضایت داده بود، دکمه ورود به سیستم با Google را فشار داد تا یک حساب Google انتخاب کند و اعتبارنامه را به اشتراک بگذارد.
btn_confirm_add_session کاربر بدون جلسه موجود ابتدا دکمه ورود با Google را فشار داد تا یک حساب Google را انتخاب کند و سپس دکمه تأیید را برای رضایت و اشتراک گذاری اعتبارنامه فشار داد.

دولت

این پارامتر تنها زمانی تعریف می‌شود که کاربر برای ورود به سیستم، روی دکمه Sign in with Google کلیک کند و ویژگی data-state دکمه کلیک شده مشخص شود. مقدار این فیلد همان مقداری است که در ویژگی data-state دکمه مشخص کرده اید.

از آنجایی که چندین دکمه ورود با Google را می توان در یک صفحه ارائه کرد، می توانید هر دکمه را با یک رشته منحصر به فرد اختصاص دهید. از این رو، می توانید این پارامتر را برای شناسایی دکمه ای که کاربر برای ورود به سیستم کلیک کرده است، state .

نقطه پایانی کنترل کننده اعتبار رمز عبور

نقطه پایانی کنترل کننده اعتبار رمز عبور، اعتبار رمز عبور را پردازش می کند که مدیر اعتبار بومی آن را بازیابی می کند.

درخواست HTTP POST حاوی اطلاعات زیر است:

قالب نام توضیحات
کوکی g_csrf_token یک رشته تصادفی که با هر درخواست به نقطه پایانی کنترل کننده تغییر می کند.
پارامتر درخواست g_csrf_token رشته ای که همان مقدار کوکی قبلی، g_csrf_token است.
پارامتر درخواست email این نشانه شناسه که Google صادر می کند.
پارامتر درخواست password نحوه انتخاب اعتبار
،

این صفحه مرجع API ویژگی های داده HTML Sign In With Google را شرح می دهد. می‌توانید از API برای نمایش درخواست One Tap یا دکمه Sign In With Google در صفحات وب خود استفاده کنید.

عنصر با شناسه "g_id_onload"

می‌توانید ویژگی‌های داده ورود با Google را در هر عنصر قابل مشاهده یا نامرئی، مانند <div> و <span> قرار دهید. تنها شرط این است که شناسه عنصر روی g_id_onload تنظیم شود. این شناسه را روی چند عنصر قرار ندهید.

ویژگی های داده

جدول زیر ویژگی های داده را با توضیحات آنها فهرست می کند:

صفت
data-client_id شناسه مشتری برنامه شما
data-auto_prompt نمایش ضربه Google One.
data-auto_select انتخاب خودکار را در Google One Tap فعال می کند.
data-login_uri URL نقطه پایانی ورود شما
data-callback نام تابع کنترل کننده رمز شناسه جاوا اسکریپت
data-native_login_uri URL نقطه پایانی کنترل کننده اعتبار رمز عبور شما
data-native_callback نام تابع کنترل کننده اعتبار رمز عبور جاوا اسکریپت
data-native_id_param نام پارامتر برای مقدار credential.id
data-native_password_param نام پارامتر برای مقدار credential.password
data-cancel_on_tap_outside کنترل می کند که اگر کاربر خارج از درخواست کلیک کند، درخواست لغو شود یا خیر.
data-prompt_parent_id شناسه DOM عنصر ظرف فرمان One Tap
data-skip_prompt_cookie اگر کوکی مشخص شده دارای مقدار غیر خالی باشد، از یک ضربه رد می شود.
data-nonce یک رشته تصادفی برای نشانه های ID
data-context عنوان و کلمات در اعلان One Tap
data-moment_callback نام تابع شنونده اعلان وضعیت رابط کاربری سریع
data-state_cookie_domain اگر نیاز به فراخوانی One Tap در دامنه اصلی و زیر دامنه های آن دارید، دامنه والد را به این ویژگی منتقل کنید تا از یک کوکی مشترک استفاده شود.
data-ux_mode جریان UX دکمه Sign In With Google
data-allowed_parent_origin مبداهایی که مجاز به جاسازی iframe میانی هستند. اگر این ویژگی وجود داشته باشد، One Tap در حالت iframe میانی اجرا می شود.
data-intermediate_iframe_close_callback وقتی کاربران به صورت دستی One Tap را می‌بندند، رفتار میانی فریم پیش‌فرض را لغو می‌کند.
data-itp_support One Tap UX ارتقا یافته را در مرورگرهای ITP فعال می کند.
data-login_hint با ارائه یک راهنمایی کاربر از انتخاب حساب رد شوید.
data-hd محدود کردن انتخاب حساب بر اساس دامنه
data-use_fedcm_for_prompt به مرورگر اجازه دهید درخواست های ورود به سیستم کاربر را کنترل کند و جریان ورود به سیستم بین وب سایت شما و Google را واسطه کند.
data-enable_redirect_uri_validation جریان تغییر مسیر دکمه را فعال کنید که با قوانین اعتبارسنجی Redirect URI مطابقت دارد.

انواع صفات

بخش های زیر شامل جزئیات مربوط به نوع هر ویژگی و یک مثال است.

data-client_id

این ویژگی شناسه مشتری برنامه شما است که در کنسول Google Cloud پیدا و ایجاد شده است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته بله data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

این ویژگی تعیین می‌کند که One Tap نمایش داده شود یا خیر. مقدار پیش فرض true است. وقتی این مقدار false باشد، ضربه Google One نمایش داده نمی‌شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-auto_prompt="true"

data-auto_select

این ویژگی تعیین می‌کند که اگر فقط یک جلسه Google برنامه شما را تأیید کرده باشد، یک نشانه شناسه به‌طور خودکار، بدون هیچ گونه تعامل کاربر، بازگردانده شود یا نه. مقدار پیش فرض false است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-auto_select="true"

data-login_uri

این ویژگی URI نقطه پایانی ورود شما است.

مقدار باید دقیقاً با یکی از URIهای مجاز تغییر مسیر برای مشتری OAuth 2.0 مطابقت داشته باشد که در کنسول API پیکربندی کرده‌اید و باید با قوانین اعتبارسنجی Redirect URI ما مطابقت داشته باشد.

اگر صفحه فعلی صفحه ورود شما باشد، ممکن است این ویژگی حذف شود، در این صورت اعتبار به طور پیش فرض به این صفحه ارسال می شود.

پاسخ اعتبار شناسه رمز شناسه زمانی به نقطه پایانی ورود به سیستم شما پست می‌شود که هیچ عملکرد پاسخگویی تعریف نشده باشد و کاربر روی دکمه‌های Sign In With Google یا One Tap کلیک کند، یا ورود خودکار انجام شود.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید اختیاری مثال
URL به طور پیش فرض URI صفحه فعلی یا مقداری که شما مشخص می کنید.
هنگامی که data-ux_mode="popup" و data-callback تنظیم شده است نادیده گرفته می شود.
data-login_uri="https://www.example.com/login"

نقطه پایانی ورود به سیستم شما باید درخواست‌های POST حاوی یک کلید credential با مقدار رمز شناسه در بدنه را بررسی کند.

در زیر نمونه ای از درخواست برای نقطه پایانی ورود به سیستم شما آمده است:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

داده برگشت به تماس

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

تایپ کنید مورد نیاز مثال
رشته اگر data-login_uri تنظیم نشده باشد، الزامی است. data-callback="handleToken"

یکی از ویژگی های data-login_uri و data-callback ممکن است استفاده شود. بستگی به کامپوننت زیر و تنظیمات حالت UX دارد:

  • ویژگی data-login_uri برای دکمه Sign In With Google redirect UX مورد نیاز است، که ویژگی data-callback را نادیده می گیرد.

  • یکی از این دو ویژگی باید برای Google One Tap و دکمه Google Sign-In popup UX تنظیم شود. اگر هر دو تنظیم شده باشند، ویژگی data-callback اولویت بیشتری دارد.

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-native_login_uri

این ویژگی نشانی وب نقطه پایانی کنترل کننده اعتبار رمز عبور شما است. اگر ویژگی data-native_login_uri یا ویژگی data-native_callback را تنظیم کنید، کتابخانه جاوا اسکریپت زمانی که جلسه Google وجود ندارد به مدیر اعتبار داخلی باز می گردد. شما مجاز به تنظیم هر دو ویژگی data-native_callback و data-native_login_uri نیستید. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-login_uri="https://www.example.com/password_login"

data-native_callback

این ویژگی نام تابع جاوا اسکریپت است که اعتبار رمز عبور بازگردانده شده از مدیر اعتبار داخلی مرورگر را کنترل می کند. اگر ویژگی data-native_login_uri یا ویژگی data-native_callback را تنظیم کنید، کتابخانه جاوا اسکریپت زمانی که جلسه Google وجود ندارد به مدیر اعتبار داخلی باز می گردد. شما مجاز به تنظیم data-native_callback و data-native_login_uri نیستید. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-native_callback="handlePasswordCredential"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-native_id_param

هنگامی که اعتبار رمز عبور را به نقطه پایانی کنترل کننده اعتبار رمز عبور ارسال می کنید، می توانید نام پارامتر را برای فیلد credential.id تعیین کنید. نام پیش فرض email است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
URL اختیاری data-native_id_param="user_id"

data-native_password_param

هنگامی که اعتبار رمز عبور را به نقطه پایانی کنترل کننده اعتبار رمز عبور ارسال می کنید، می توانید نام پارامتر را برای مقدار credential.password تعیین کنید. نام پیش فرض password است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
URL اختیاری data-native_password_param="pwd"

data-cancel_on_tap_outside

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

تایپ کنید مورد نیاز مثال
بولی اختیاری data-cancel_on_tap_outside="false"

data-prompt_parent_id

این ویژگی DOM ID عنصر کانتینر را تنظیم می کند. اگر تنظیم نشده باشد، اعلان One Tap در گوشه سمت راست بالای پنجره نمایش داده می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-prompt_parent_id="parent_id"

اگر کوکی مشخص شده دارای مقدار غیر خالی باشد، این ویژگی یک ضربه را رد می کند. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-skip_prompt_cookie="SID"

داده-غیر

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-nonce="biaqbm70g23"

طول Nonce به حداکثر اندازه JWT پشتیبانی شده توسط محیط شما و محدودیت‌های اندازه HTTP مرورگر و سرور محدود می‌شود.

زمینه داده

این ویژگی متن عنوان و پیام های نمایش داده شده در اعلان One Tap را تغییر می دهد. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-context="use"

جدول زیر تمام زمینه های موجود و توضیحات آنها را فهرست می کند:

زمینه
signin "ورود با گوگل"
signup "ثبت نام با گوگل"
use "استفاده با گوگل"

data-moment_callback

این ویژگی نام تابع شنونده اعلان وضعیت UI است. برای اطلاعات بیشتر، به نوع داده PromptMomentNotification مراجعه کنید.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-moment_callback="logMomentNotification"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

اگر نیاز به نمایش One Tap در یک دامنه والد و زیر دامنه های آن دارید، دامنه والد را به این ویژگی منتقل کنید تا از یک کوکی حالت مشترک استفاده شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-state_cookie_domain="example.com"

data-ux_mode

این ویژگی جریان UX مورد استفاده توسط دکمه Sign In With Google را تنظیم می کند. مقدار پیش فرض popup است. این ویژگی هیچ تاثیری روی One Tap UX ندارد. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-ux_mode="redirect"

جدول زیر حالت های UX موجود و توضیحات آنها را فهرست می کند.

حالت UX
popup جریان UX ورود به سیستم را در یک پنجره بازشو انجام می دهد.
redirect جریان UX ورود به سیستم را با تغییر مسیر کامل صفحه انجام می دهد.

data-allowed_parent_origin

مبداهایی که مجاز به جاسازی iframe میانی هستند. اگر این ویژگی ارائه شود، One Tap در حالت iframe میانی اجرا می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته یا آرایه رشته ای اختیاری data-allowed_parent_origin="https://example.com"

جدول زیر انواع مقادیر پشتیبانی شده و توضیحات آنها را فهرست می کند.

انواع ارزش
string URI یک دامنه. "https://example.com"
string array فهرستی از URI های دامنه جدا شده با کاما. "https://news.example.com,https://local.example.com"

اگر مقدار ویژگی data-allowed_parent_origin نامعتبر باشد، مقداردهی اولیه با یک ضربه در حالت iframe میانی با شکست مواجه می‌شود و متوقف می‌شود.

پیشوندهای Wildcard نیز پشتیبانی می شوند. به عنوان مثال، "https://*.example.com" با example.com و زیر دامنه‌های آن در همه سطوح مطابقت دارد (به عنوان مثال news.example.com ، login.news.example.com ). مواردی که هنگام استفاده از حروف عامیانه باید در نظر داشته باشید:

  • رشته های الگو را نمی توان فقط از یک علامت عام و یک دامنه سطح بالا تشکیل داد. برای مثال https://*.com و https://*.co.uk نامعتبر هستند. همانطور که در بالا ذکر شد، "https://*.example.com" با example.com و زیر دامنه های آن مطابقت دارد. همچنین می توانید از یک لیست جدا شده با کاما برای نمایش 2 دامنه مختلف استفاده کنید. برای مثال، "https://example1.com,https://*.example2.com" با دامنه‌های example1.com ، example2.com و زیر دامنه‌های example2.com مطابقت دارد.
  • دامنه های Wildcard باید با یک طرح https:// امن شروع شوند، بنابراین "*.example.com" نامعتبر در نظر گرفته می شود.

data-intermediate_iframe_close_callback

وقتی کاربران به‌طور دستی One Tap را با ضربه زدن روی دکمه «X» در رابط کاربری One Tap می‌بندند، رفتار میانی فریم پیش‌فرض را لغو می‌کند. رفتار پیش‌فرض حذف فوری iframe میانی از DOM است.

قسمت data-intermediate_iframe_close_callback فقط در حالت iframe میانی اعمال می شود. و به جای iframe با یک ضربه، فقط بر فریم میانی تأثیر می گذارد. رابط کاربری One Tap قبل از فراخوانی تماس مجدد حذف می شود.

تایپ کنید مورد نیاز مثال
تابع اختیاری data-intermediate_iframe_close_callback="logBeforeClose"

توابع جاوا اسکریپت در فضای نام توسط HTML API پشتیبانی نمی شوند. در عوض، از یک تابع جاوا اسکریپت جهانی بدون فضای نام استفاده کنید. به عنوان مثال، به جای mylib.callback از mylibCallback استفاده کنید.

data-itp_support

این فیلد تعیین می کند که آیا One Tap UX ارتقا یافته باید در مرورگرهایی فعال شود که از پیشگیری از ردیابی هوشمند (ITP) پشتیبانی می کنند یا خیر. مقدار پیش فرض false است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
بولی اختیاری data-itp_support="true"

data-login_hint

اگر برنامه شما از قبل بداند چه کاربری باید وارد سیستم شود، می تواند یک راهنمایی ورود به سیستم به Google ارائه دهد. در صورت موفقیت آمیز بودن، انتخاب حساب حذف می شود. مقادیر پذیرفته شده عبارتند از: یک آدرس ایمیل یا یک فیلد فرعی نشانه شناسه.

برای اطلاعات بیشتر، به اسناد OpenID Connect برای login_hint مراجعه کنید.

تایپ کنید مورد نیاز مثال
رشته می تواند یک آدرس ایمیل یا مقدار فیلد sub از نشانه ID باشد. اختیاری data-login_hint="elisa.beckett@gmail.com"

داده-hd

هنگامی که یک کاربر چندین حساب دارد و فقط باید با حساب Workspace خود وارد شود، از این برای ارائه یک اشاره به نام دامنه به Google استفاده کنید. در صورت موفقیت آمیز بودن، حساب های کاربری نمایش داده شده در هنگام انتخاب حساب به دامنه ارائه شده محدود می شود. یک مقدار عام: * فقط حساب‌های Workspace را به کاربر ارائه می‌دهد و حساب‌های مصرف‌کننده (user@gmail.com) را در هنگام انتخاب حساب مستثنی می‌کند.

برای اطلاعات بیشتر، به اسناد OpenID Connect برای hd مراجعه کنید.

تایپ کنید مورد نیاز مثال
رشته یک نام دامنه کاملا واجد شرایط یا *. اختیاری data-hd="*"

data-use_fedcm_for_prompt

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

تایپ کنید مورد نیاز مثال
بولی اختیاری data-use_fedcm_for_prompt="true"

data-enable_redirect_uri_validation

جریان تغییر مسیر دکمه را فعال کنید که با قوانین اعتبارسنجی Redirect URI مطابقت دارد.

تایپ کنید مورد نیاز مثال
بولی اختیاری data-enable_redirect_uri_validation="true"

عنصر با کلاس "g_id_signin"

اگر g_id_signin به ویژگی class عنصر اضافه کنید، عنصر به عنوان یک دکمه Sign In With Google نمایش داده می شود.

می‌توانید چندین دکمه Sign In With Google را در همان صفحه ارائه دهید. هر دکمه می تواند تنظیمات بصری خود را داشته باشد. تنظیمات با ویژگی های داده زیر تعریف می شوند.

ویژگی های داده های بصری

جدول زیر ویژگی های داده های بصری و توضیحات آنها را فهرست می کند:

صفت
data-type نوع دکمه: نماد یا دکمه استاندارد.
data-theme تم دکمه. مثلا filled_blue یا filled_black.
data-size اندازه دکمه مثلاً کوچک یا بزرگ.
data-text متن دکمه به عنوان مثال، "Sign in with Google" یا "Sign up with Google".
data-shape شکل دکمه به عنوان مثال، مستطیل یا دایره.
data-logo_alignment تراز آرم Google: چپ یا وسط.
data-width عرض دکمه، بر حسب پیکسل.
data-locale متن دکمه در زبان تنظیم شده در این ویژگی ارائه می شود.
data-click_listener در صورت تنظیم، زمانی که دکمه Sign In With Google کلیک می شود، این تابع فراخوانی می شود.
data-state اگر تنظیم شود، این رشته با کد ID برمی گردد.

انواع صفات

بخش های زیر شامل جزئیات مربوط به نوع هر ویژگی و یک مثال است.

نوع داده

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

تایپ کنید مورد نیاز مثال
رشته بله data-type="icon"

جدول زیر تمام انواع دکمه های موجود و توضیحات آنها را فهرست می کند:

تایپ کنید
standard
دکمه ای با متن یا اطلاعات شخصی.
icon
یک دکمه نماد بدون متن.

موضوع داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-theme="filled_blue"

جدول زیر تم های موجود و توضیحات آنها را فهرست می کند:

تم
outline
یک دکمه استاندارد با پس زمینه سفیدیک دکمه آیکون با پس زمینه سفیدیک دکمه شخصی با پس زمینه سفید
تم دکمه استاندارد.
filled_blue
یک دکمه استاندارد با پس زمینه آبییک دکمه نماد با پس زمینه آبییک دکمه شخصی با پس زمینه آبی
تم دکمه آبی پر شده.
filled_black
یک دکمه استاندارد با پس زمینه مشکییک دکمه آیکون با پس زمینه سیاهیک دکمه شخصی سازی شده با پس زمینه مشکی
تم دکمه سیاه و سفید.

اندازه داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-size="small"

جدول زیر اندازه دکمه های موجود و توضیحات آنها را فهرست می کند.

اندازه
large
یک دکمه استاندارد بزرگیک دکمه آیکون بزرگیک دکمه بزرگ و شخصی سازی شده
یک دکمه بزرگ
medium
یک دکمه استاندارد متوسطیک دکمه آیکون متوسط
یک دکمه با اندازه متوسط
small
یک دکمه کوچکیک دکمه آیکون کوچک
یک دکمه کوچک

داده-متن

متن دکمه مقدار پیش فرض signin_with است. هیچ تفاوت بصری برای متن دکمه‌های آیکون که ویژگی‌های data-text متفاوتی دارند، وجود ندارد. تنها استثنا زمانی است که متن برای دسترسی به صفحه نمایش خوانده شود.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-text="signup_with"

جدول زیر متون دکمه های موجود و توضیحات آنها را فهرست می کند:

متن
signin_with
یک دکمه استاندارد با عنوان "ورود با Google"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ورود با گوگل" است.
signup_with
یک دکمه استاندارد با عنوان "ثبت نام با Google"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ثبت نام با گوگل" است.
continue_with
یک دکمه استاندارد با عنوان «ادامه با Google»یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ادامه با گوگل" است.
signin
یک دکمه استاندارد با عنوان "ورود به سیستم"یک دکمه نماد بدون متن قابل مشاهده
متن دکمه "ورود به سیستم" است.

شکل داده

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

تایپ کنید مورد نیاز مثال
رشته اختیاری data-shape="rectangular"

جدول زیر اشکال دکمه های موجود و توضیحات آنها را فهرست می کند:

شکل
rectangular
یک دکمه استاندارد مستطیلییک دکمه آیکون مستطیلییک دکمه شخصی سازی شده مستطیلی
دکمه مستطیلی شکل. اگر برای نوع دکمه icon استفاده شود، همان square است.
pill
یک دکمه استاندارد به شکل قرصیک دکمه آیکون به شکل قرصیک دکمه شخصی سازی شده به شکل قرص
دکمه قرص شکل. اگر برای نوع دکمه icon استفاده می شود، همان circle است.
circle
یک دکمه استاندارد دایره اییک دکمه آیکون دایره اییک دکمه شخصی دایره ای
دکمه دایره ای شکل. اگر برای نوع دکمه standard استفاده شود، همان pill است.
square
یک دکمه استاندارد مربعییک دکمه آیکون مربعییک دکمه مربعی شخصی
دکمه مربع شکل اگر برای نوع دکمه standard استفاده شود، همان rectangular است.

data-logo_alignment

تراز آرم گوگل. مقدار پیش فرض left است. این ویژگی فقط برای نوع دکمه standard اعمال می شود. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-logo_alignment="center"

جدول زیر ترازهای موجود و توضیحات آنها را فهرست می کند:

آرم_تراز
left
یک دکمه استاندارد با آرم G در سمت چپ
نشان‌واره Google را تراز چپ می‌کند.
center
یک دکمه استاندارد با آرم G در مرکز
نشان‌واره Google را در مرکز تراز می‌کند.

پهنای داده

حداقل عرض دکمه، بر حسب پیکسل. حداکثر عرض موجود 400 پیکسل است.

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-width=400

داده-محلی

اختیاری. متن دکمه را با استفاده از محل مشخص شده نمایش دهید، در غیر این صورت به طور پیش فرض برای تنظیمات حساب Google یا مرورگر کاربران. هنگام بارگیری کتابخانه، پارامتر hl و کد زبان را به دستورالعمل src اضافه کنید، برای مثال: gsi/client?hl=<iso-639-code> .

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

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-locale="zh_CN"

data-click_listener

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

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

در این مثال، زمانی که دکمه Sign in with Google کلیک می شود، پیام Sign in with Google clicked... به کنسول وارد می شود.

وضعیت داده

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

برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

تایپ کنید مورد نیاز مثال
رشته اختیاری data-state="button 1"

ادغام سمت سرور

نقاط پایانی سمت سرور شما باید درخواست های HTTP POST زیر را انجام دهند.

نقطه پایانی کنترل کننده رمز شناسه

نقطه پایانی کنترل کننده نشانه شناسه، رمز شناسه را پردازش می کند. بر اساس وضعیت حساب مربوطه، می‌توانید کاربر را وارد کنید و او را به صفحه ثبت‌نام هدایت کنید یا برای اطلاعات بیشتر به صفحه پیوند حساب هدایت کنید.

درخواست HTTP POST حاوی اطلاعات زیر است:

قالب نام توضیحات
کوکی g_csrf_token یک رشته تصادفی که با هر درخواست به نقطه پایانی کنترل کننده تغییر می کند.
پارامتر درخواست g_csrf_token رشته ای که همان مقدار کوکی قبلی، g_csrf_token است.
پارامتر درخواست credential شناسه ای که گوگل صادر می کند.
پارامتر درخواست select_by نحوه انتخاب اعتبار
پارامتر درخواست state این پارامتر تنها زمانی تعریف می شود که کاربر برای ورود به سیستم، روی دکمه Sign in with Google کلیک کند و ویژگی state دکمه مشخص شود.

اعتبار

هنگامی که رمزگشایی می شود ، نشانه ID مانند مثال زیر است:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

فیلد sub یک شناسه جهانی منحصر به فرد برای حساب Google است. فقط از قسمت sub به عنوان شناسه کاربر استفاده کنید زیرا در بین تمام حساب‌های Google منحصربه‌فرد است و هرگز مجدداً استفاده نشده است. از آدرس ایمیل به عنوان شناسه استفاده نکنید زیرا یک حساب Google می تواند چندین آدرس ایمیل در مقاطع زمانی مختلف داشته باشد.

با استفاده از فیلدهای email ، email_verified و hd می‌توانید تعیین کنید که آیا Google میزبان آدرس ایمیل است یا خیر. در مواردی که Google معتبر است، تأیید می‌شود که کاربر مالک قانونی حساب است.

مواردی که گوگل معتبر است:

  • email دارای پسوند @gmail.com است، این یک حساب کاربری جیمیل است.
  • email_verified درست است و hd تنظیم شده است، این یک حساب Google Workspace است.

کاربران می توانند بدون استفاده از Gmail یا Google Workspace برای حساب های Google ثبت نام کنند. وقتی email حاوی پسوند @gmail.com نیست و hd وجود ندارد، گوگل معتبر نیست و رمز عبور یا روش‌های چالش دیگری برای تأیید کاربر توصیه می‌شود. email_verified همچنین می تواند درست باشد زیرا Google در ابتدا کاربر را هنگام ایجاد حساب Google تأیید کرد، اما مالکیت حساب ایمیل شخص ثالث ممکن است از آن زمان تغییر کرده باشد.

فیلد exp زمان انقضا را نشان می دهد تا بتوانید رمز را در سمت سرور خود تأیید کنید . برای شناسه شناسه ای که از Sign In With Google گرفته شده است یک ساعت زمان است. باید قبل از زمان انقضا توکن را تأیید کنید . exp برای مدیریت جلسه استفاده نکنید. نشانه شناسه منقضی شده به این معنی نیست که کاربر از سیستم خارج شده است. برنامه شما مسئول مدیریت جلسه کاربران شما است.

select_by

جدول زیر مقادیر احتمالی فیلد select_by را فهرست می کند. نوع دکمه استفاده شده همراه با حالت جلسه و رضایت برای تنظیم مقدار استفاده می شود.

  • کاربر دکمه One Tap یا Sign In With Google را فشار داد یا از فرآیند ورود خودکار بدون لمس استفاده کرد.

  • یک جلسه موجود پیدا شد، یا کاربر برای ایجاد یک جلسه جدید، یک حساب Google را انتخاب کرده و به سیستم وارد شده است.

  • قبل از به اشتراک گذاشتن اعتبار شناسه نشانه شناسه با برنامه شما، کاربر یا

    • دکمه تأیید را فشار دهید تا رضایت آنها را برای اشتراک‌گذاری اعتبارنامه‌ها اعلام کنید، یا
    • قبلاً رضایت داده بود و از Select an Account برای انتخاب یک حساب Google استفاده کرده بود.

مقدار این فیلد به یکی از این انواع تنظیم می شود

ارزش توضیحات
auto ورود خودکار کاربر با یک جلسه موجود که قبلاً رضایت خود را برای اشتراک‌گذاری اعتبارنامه صادر کرده است. فقط برای مرورگرهایی که از FedCM پشتیبانی نمی کنند اعمال می شود.
user کاربری با یک جلسه موجود که قبلاً رضایت داده بود، دکمه «ادامه به‌عنوان» با یک ضربه را فشار داد تا اعتبارنامه‌ها را به اشتراک بگذارد. فقط برای مرورگرهایی که از FedCM پشتیبانی نمی کنند اعمال می شود.
fedcm یک کاربر دکمه «ادامه به عنوان» با یک ضربه را فشار داد تا اعتبارنامه ها را با استفاده از FedCM به اشتراک بگذارد. فقط برای مرورگرهای پشتیبانی شده از FedCM اعمال می شود.
fedcm_auto ورود خودکار کاربر با یک جلسه موجود که قبلاً برای اشتراک‌گذاری اعتبارنامه‌ها با استفاده از FedCM One Tap رضایت داده بود. فقط برای مرورگرهای پشتیبانی شده از FedCM اعمال می شود.
user_1tap کاربری با یک جلسه موجود، دکمه «ادامه به عنوان» با یک ضربه را فشار داد تا رضایت و اعتبار را به اشتراک بگذارد. فقط برای Chrome نسخه 75 و بالاتر اعمال می شود.
user_2tap کاربر بدون جلسه موجود، دکمه «ادامه به عنوان» را با یک ضربه فشار داد تا یک حساب را انتخاب کند و سپس دکمه تأیید را در یک پنجره بازشو فشار داد تا رضایت و اعتبار را به اشتراک بگذارد. برای مرورگرهای غیر مبتنی بر Chromium اعمال می شود.
btn کاربری با یک جلسه موجود که قبلاً رضایت داده بود، دکمه ورود به سیستم با Google را فشار داد و یک حساب Google از «انتخاب یک حساب» برای اشتراک‌گذاری اعتبارنامه‌ها انتخاب کرد.
btn_confirm کاربری با یک جلسه موجود دکمه ورود با Google را فشار داده و دکمه تأیید را فشار داده تا رضایت و اعتبارنامه را به اشتراک بگذارد.
btn_add_session کاربری بدون جلسه موجود که قبلاً رضایت داده بود، دکمه ورود به سیستم با Google را فشار داد تا یک حساب Google انتخاب کند و اعتبارنامه را به اشتراک بگذارد.
btn_confirm_add_session کاربر بدون جلسه موجود ابتدا دکمه ورود با Google را فشار داد تا یک حساب Google را انتخاب کند و سپس دکمه تأیید را برای رضایت و اشتراک گذاری اعتبارنامه فشار داد.

دولت

این پارامتر تنها زمانی تعریف می‌شود که کاربر برای ورود به سیستم، روی دکمه Sign in with Google کلیک کند و ویژگی data-state دکمه کلیک شده مشخص شود. مقدار این فیلد همان مقداری است که در ویژگی data-state دکمه مشخص کرده اید.

از آنجایی که چندین دکمه ورود با Google را می توان در یک صفحه ارائه کرد، می توانید هر دکمه را با یک رشته منحصر به فرد اختصاص دهید. از این رو، می توانید این پارامتر را برای شناسایی دکمه ای که کاربر برای ورود به سیستم کلیک کرده است، state .

نقطه پایانی کنترل کننده اعتبار رمز عبور

نقطه پایانی کنترل کننده اعتبار رمز عبور، اعتبار رمز عبور را پردازش می کند که مدیر اعتبار بومی آن را بازیابی می کند.

درخواست HTTP POST حاوی اطلاعات زیر است:

قالب نام توضیحات
کوکی g_csrf_token یک رشته تصادفی که با هر درخواست به نقطه پایانی کنترل کننده تغییر می کند.
پارامتر درخواست g_csrf_token رشته ای که همان مقدار کوکی قبلی، g_csrf_token است.
پارامتر درخواست email این نشانه شناسه که Google صادر می کند.
پارامتر درخواست password نحوه انتخاب اعتبار