با مرجع API جاوا اسکریپت گوگل وارد شوید

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

روش: google.accounts.id.initialize

روش google.accounts.id.initialize کلاینت Sign In With Google را بر اساس شیء پیکربندی مقداردهی اولیه می کند. نمونه کد زیر را ببینید:

google.accounts.id.initialize(IdConfiguration)

مثال کد زیر متد google.accounts.id.initialize را با تابع onload پیاده سازی می کند:

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

روش google.accounts.id.initialize یک نمونه کلاینت Sign In With Google ایجاد می کند که می تواند به طور ضمنی توسط همه ماژول ها در یک صفحه وب استفاده شود.

• شما فقط باید یک بار با روش google.accounts.id.initialize تماس بگیرید، حتی اگر از چندین ماژول (مانند یک ضربه، دکمه شخصی، لغو، و غیره) در یک صفحه وب استفاده می کنید.
• اگر چندین بار با روش google.accounts.id.initialize تماس بگیرید، فقط پیکربندی های آخرین تماس به خاطر سپرده می شود و استفاده می شود.

شما در واقع هر زمان که با روش google.accounts.id.initialize تماس می گیرید، پیکربندی ها را بازنشانی می کنید، و همه روش های بعدی در همان صفحه وب بلافاصله از تنظیمات جدید استفاده می کنند.

نوع داده: IdConfiguration

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

client_id

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

انتخاب_خودکار

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

پاسخ به تماس

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

login_uri

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

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

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

هنگامی که کاربر روی دکمه Sign In With Google کلیک می کند و از حالت UX تغییر مسیر استفاده می کند، پاسخ اعتبار شناسه رمز ID به نقطه پایانی ورود به سیستم شما ارسال می شود.

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

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

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

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

credential=ID_TOKEN

native_callback

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

cancel_on_tap_outside

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

prompt_parent_id

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

هیچ

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

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

زمینه

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

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

state_cookie_domain

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

ux_mode

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

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

allow_parent_origin

مبداهایی که مجاز به جاسازی iframe میانی هستند. در صورت وجود این فیلد، One Tap در حالت 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" نامعتبر در نظر گرفته می شود.

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

intermediate_iframe_close_callback

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

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

itp_support

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

login_hint

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

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

hd

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

برای اطلاعات بیشتر، فیلد hd را در اسناد OpenID Connect ببینید.

use_fedcm_for_prompt

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

enable_redirect_uri_validation

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

روش: google.accounts.id.prompt

متد google.accounts.id.prompt فرمان One Tap یا مدیر اعتبار داخلی مرورگر را پس از فراخوانی متد initialize() نمایش می دهد. نمونه کد زیر را ببینید:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

به طور معمول، متد prompt() در بارگذاری صفحه فراخوانی می شود. به دلیل وضعیت جلسه و تنظیمات کاربر در سمت Google، ممکن است رابط کاربری درخواست One Tap نمایش داده نشود. برای دریافت اطلاع از وضعیت رابط کاربری در لحظات مختلف، تابعی را برای دریافت اعلان‌های وضعیت رابط کاربری ارسال کنید.

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

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

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

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

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

مثال کد زیر لحظه رد شده را پیاده سازی می کند:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

نوع داده: PromptMomentNotification

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

نوع داده: CredentialResponse

هنگامی که تابع callback شما فراخوانی می شود، یک شی CredentialResponse به عنوان پارامتر ارسال می شود. جدول زیر فیلدهایی را که در شیء پاسخ اعتبار وجود دارد فهرست می کند:

اعتبار

این فیلد نشانه شناسه به عنوان یک رشته رمزگذاری شده با پایه 64 JSON Web Token (JWT) است.

هنگام رمزگشایی ، JWT مانند مثال زیر به نظر می رسد:

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": "Elisa",
  "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_verfied همچنین می تواند درست باشد زیرا Google در ابتدا کاربر را هنگام ایجاد حساب Google تأیید کرد، اما مالکیت حساب ایمیل شخص ثالث ممکن است از آن زمان تغییر کرده باشد.

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

select_by

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

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

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

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

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

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

دولت

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

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

روش: google.accounts.id.renderButton

روش google.accounts.id.renderButton یک دکمه Sign In With Google را در صفحات وب شما ارائه می دهد.

نمونه کد زیر را ببینید:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

نوع داده: GsiButtonConfiguration

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

انواع صفات

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

نوع

نوع دکمه مقدار پیش فرض standard است.

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

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

تایپ کنید
standard
icon

موضوع

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

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

موضوع
outline
filled_blue
filled_black

اندازه

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

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

اندازه
large
medium
small

متن

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

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

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

متن
signin_with
signup_with
continue_with
signin

شکل

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

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

شکل
rectangular
pill
circle
square

آرم_تراز

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

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

آرم_تراز
left
center

عرض

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

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

محل

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

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

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

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

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

دولت

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

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

نوع داده: اعتبار

هنگامی که تابع native_callback شما فراخوانی می شود، یک شی Credential به عنوان پارامتر ارسال می شود. جدول زیر فیلدهای موجود در شی را فهرست می کند:

روش: google.accounts.id.disableAutoSelect

وقتی کاربر از وب‌سایت شما خارج می‌شود، باید با روش google.accounts.id.disableAutoSelect تماس بگیرید تا وضعیت را در کوکی‌ها ثبت کنید. این از یک حلقه مرده UX جلوگیری می کند. قطعه کد زیر را ببینید:

google.accounts.id.disableAutoSelect()

مثال کد زیر متد google.accounts.id.disableAutoSelect را با تابع onSignout() پیاده سازی می کند:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

روش: google.accounts.id.storeCredential

این متد یک wrapper برای متد store() از API مدیریت اعتبار داخلی مرورگر است. بنابراین، فقط می توان از آن برای ذخیره اعتبار رمز عبور استفاده کرد. نمونه کد زیر را ببینید:

google.accounts.id.storeCredential(Credential, callback)

مثال کد زیر متد google.accounts.id.storeCredential را با تابع onSignIn() پیاده سازی می کند:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

روش: google.accounts.id.cancel

اگر درخواست را از DOM طرف متکی حذف کنید، می‌توانید جریان یک ضربه را لغو کنید. اگر یک اعتبار قبلاً انتخاب شده باشد، عملیات لغو نادیده گرفته می شود. نمونه کد زیر را ببینید:

google.accounts.id.cancel()

مثال کد زیر متد google.accounts.id.cancel() را با تابع onNextButtonClicked() پیاده سازی می کند:

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

پاسخ به تماس بارگیری کتابخانه: در GoogleLibraryLoad

می توانید یک پاسخ تماس onGoogleLibraryLoad ثبت کنید. پس از بارگیری کتابخانه جاوا اسکریپت Sign In With Google اطلاع داده می شود:

window.onGoogleLibraryLoad = () => {
    ...
};

این فراخوان فقط یک میانبر برای پاسخ به تماس window.onload است. هیچ تفاوتی در رفتار وجود ندارد.

مثال کد زیر یک پاسخ تماس onGoogleLibraryLoad را پیاده سازی می کند:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

روش: google.accounts.id.revoke

روش google.accounts.id.revoke اعطای OAuth را که برای اشتراک‌گذاری کد شناسه برای کاربر مشخص شده استفاده می‌شود، باطل می‌کند. قطعه کد زیر را ببینید: javascript google.accounts.id.revoke(login_hint, callback)

نمونه کد زیر نحوه استفاده از روش revoke را با یک شناسه نشان می دهد.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

نوع داده: RevocationResponse

هنگامی که تابع callback شما فراخوانی می شود، یک شی RevocationResponse به عنوان پارامتر ارسال می شود. جدول زیر فیلدهایی را که در شیء پاسخ ابطال وجود دارد فهرست می کند:

موفق

این فیلد یک مقدار بولی است که در صورت موفقیت یا نادرست بودن فراخوانی متد revoke در صورت شکست، روی true تنظیم شده است.

خطا

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

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

روش: google.accounts.id.initialize

روش google.accounts.id.initialize کلاینت Sign In With Google را بر اساس شیء پیکربندی مقداردهی اولیه می کند. نمونه کد زیر را ببینید:

google.accounts.id.initialize(IdConfiguration)

مثال کد زیر متد google.accounts.id.initialize را با تابع onload پیاده سازی می کند:

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

روش google.accounts.id.initialize یک نمونه کلاینت Sign In With Google ایجاد می کند که می تواند به طور ضمنی توسط همه ماژول ها در یک صفحه وب استفاده شود.

• شما فقط باید یک بار با روش google.accounts.id.initialize تماس بگیرید، حتی اگر از چندین ماژول (مانند یک ضربه، دکمه شخصی، لغو، و غیره) در یک صفحه وب استفاده می کنید.
• اگر چندین بار با روش google.accounts.id.initialize تماس بگیرید، فقط پیکربندی های آخرین تماس به خاطر سپرده می شود و استفاده می شود.

شما در واقع هر زمان که با روش google.accounts.id.initialize تماس می گیرید، پیکربندی ها را بازنشانی می کنید، و همه روش های بعدی در همان صفحه وب بلافاصله از تنظیمات جدید استفاده می کنند.

نوع داده: IdConfiguration

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

client_id

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

انتخاب_خودکار

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

پاسخ به تماس

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

login_uri

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

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

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

هنگامی که کاربر روی دکمه Sign In With Google کلیک می کند و از حالت UX تغییر مسیر استفاده می کند، پاسخ اعتبار شناسه رمز ID به نقطه پایانی ورود به سیستم شما ارسال می شود.

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

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

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

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

credential=ID_TOKEN

native_callback

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

cancel_on_tap_outside

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

prompt_parent_id

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

هیچ

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

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

زمینه

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

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

state_cookie_domain

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

ux_mode

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

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

مجاز_ورجین مجاز

منشأی که ​​مجاز به تعبیه Iframe میانی هستند. اگر این قسمت موجود باشد ، یک شیر در حالت 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" نامعتبر است.

اگر مقدار فیلد allowed_parent_origin نامعتبر باشد ، یک ضربه اولیه از حالت Iframe میانی ضربه می خورد و متوقف می شود.

intermediate_iframe_close_callback

هنگامی که کاربران به صورت دستی با ضربه زدن روی دکمه "X" در یک ضربه به UI ، یک ضربه را می بندند ، رفتار پیش فرض میانی Iframe را نادیده می گیرد. رفتار پیش فرض این است که بلافاصله iframe میانی را از DOM حذف کنید.

قسمت intermediate_iframe_close_callback فقط در حالت iframe میانی اثر می گذارد. و این فقط به جای آن ضربه ای به iframe واسطه تأثیر می گذارد. One Tap UI قبل از استناد به تماس تلفنی برداشته می شود.

itp_support

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

login_hint

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

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

hd

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

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

use_fedcm_for_prompt

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

Enable_Redirect_uri_Validation

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

روش: google.accounts.id.prompt

روش google.accounts.id.prompt پس از فراخوانی روش initialize() مدیر ، یک ضربه سریع یا مدیر اعتبارنامه بومی مرورگر را نشان می دهد. به عنوان مثال کد زیر از روش مراجعه کنید:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

به طور معمول ، روش prompt() در صفحه بار فراخوانی می شود. با توجه به وضعیت جلسه و تنظیمات کاربر در سمت Google ، ممکن است UI یک ضربه ای باشد. برای اطلاع از وضعیت UI برای لحظات مختلف ، یک عملکرد را برای دریافت اعلان های وضعیت UI منتقل کنید.

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

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

• Skipped Moment: این اتفاق می افتد که یک ضربه سریع توسط یک لغو خودکار بسته شود ، یک لغو دستی یا هنگامی که گوگل نتواند اعتبار خود را صادر کند ، مانند زمانی که جلسه انتخاب شده از Google امضا کرده است.

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

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

مثال کد زیر لحظه پرش را پیاده سازی می کند:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

نوع داده: PromptMomentNotification

در جدول زیر روش ها و توضیحات مربوط به نوع داده PromptMomentNotification ذکر شده است:

نوع داده ها: اعتبار اعتبار سنجی

هنگامی که از عملکرد callback شما فراخوانی می شود ، یک شیء CredentialResponse به عنوان پارامتر منتقل می شود. در جدول زیر زمینه هایی که در شیء پاسخ اعتبار وجود دارد ، لیست می کند:

اعتبار

این قسمت Token ID به عنوان یک رشته Web Token (JWT) با رمزگذاری شده Base64 (JWT) است.

هنگام رمزگشایی ، JWT مانند مثال زیر به نظر می رسد:

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": "Elisa",
  "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 میزبان است و برای یک آدرس ایمیل معتبر است. در مواردی که گوگل معتبر است ، کاربر تأیید می شود که صاحب حساب مشروع است.

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

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

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

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

select_by

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

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

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

• قبل از به اشتراک گذاری مدارک ID Token با برنامه خود کاربر نیز کاربر

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

مقدار این قسمت روی یکی از این نوع ها تنظیم شده است ،

دولت

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

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

روش: google.accounts.id.RenderButton

روش google.accounts.id.renderButton با دکمه Google در صفحات وب شما علامت گذاری می کند.

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

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

نوع داده: GsibuttonConfiguration

در جدول زیر زمینه ها و توضیحات مربوط به نوع داده GsiButtonConfiguration ذکر شده است:

انواع ویژگی ها

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

نوع

نوع دکمه مقدار پیش فرض standard است.

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

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

تایپ کنید
standard
icon

موضوع

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

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

موضوع
outline
filled_blue
filled_black

اندازه

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

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

اندازه
large
medium
small

متن

متن دکمه مقدار پیش فرض signin_with است. هیچ تفاوت بصری برای متن دکمه های نماد که دارای text های متفاوتی هستند وجود ندارد. تنها استثناء وقتی متن برای دسترسی به صفحه خوانده می شود.

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

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

متن
signin_with
signup_with
continue_with
signin

شکل

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

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

شکل
rectangular
pill
circle
square

logo_alignment

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

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

logo_alignment
left
center

عرض

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

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

محل

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

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

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

click_listener

می توانید یک تابع JavaScript را تعریف کنید که هنگام کلیک بر روی دکمه Google با استفاده از ویژگی click_listener کلیک کنید.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

در این مثال ، با کلیک بر روی دکمه Google ، با کلیک بر روی دکمه Google ، وارد کنسول می شود.

دولت

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

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

نوع داده: اعتبارنامه

هنگامی که عملکرد native_callback شما فراخوانی می شود ، یک شیء Credential به عنوان پارامتر منتقل می شود. در جدول زیر زمینه های موجود در شی ذکر شده است:

روش: google.accounts.id.disableautoselect

وقتی کاربر از وب سایت شما خارج شد ، برای ثبت وضعیت در کوکی ها باید با روش google.accounts.id.disableAutoSelect تماس بگیرید. این مانع از یک حلقه مرده UX می شود. قطعه کد زیر روش را مشاهده کنید:

google.accounts.id.disableAutoSelect()

مثال کد زیر روش google.accounts.id.disableAutoSelect را با عملکرد onSignout() اجرا می کند:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

روش: google.accounts.id.storecredential

این روش یک بسته بندی برای store() روش مدیر اعتبارنامه بومی مرورگر API است. بنابراین ، فقط می تواند برای ذخیره اعتبار رمز عبور استفاده شود. به عنوان مثال کد زیر از روش مراجعه کنید:

google.accounts.id.storeCredential(Credential, callback)

مثال کد زیر روش google.accounts.id.storeCredential را با عملکرد onSignIn() اجرا می کند:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

روش: google.accounts.id.cancel

در صورت حذف سریع از DOM PARTY ، می توانید جریان شیر را لغو کنید. در صورت انتخاب اعتبار ، عملیات لغو نادیده گرفته می شود. به عنوان مثال کد زیر از روش مراجعه کنید:

google.accounts.id.cancel()

مثال کد زیر روش google.accounts.id.cancel() را با عملکرد onNextButtonClicked() پیاده سازی می کند:

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

پاسخ به تماس بار کتابخانه: Ongooglelibraryload

می توانید یک پاسخ به تماس onGoogleLibraryLoad را ثبت کنید. پس از بارگیری در کتابخانه Google JavaScript ، این اطلاع داده می شود:

window.onGoogleLibraryLoad = () => {
    ...
};

این پاسخ به تماس فقط یک میانبر برای پاسخ window.onload است. هیچ تفاوتی در رفتار وجود ندارد.

مثال کد زیر یک پاسخ به تماس onGoogleLibraryLoad را پیاده سازی می کند:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

روش: google.accounts.id.revoke

روش google.accounts.id.revoke کمک مالی OAUTH را که برای به اشتراک گذاشتن توکن شناسه برای کاربر مشخص شده استفاده می شود ، ابطال می کند. قطعه کد زیر را از روش مشاهده کنید: javascript google.accounts.id.revoke(login_hint, callback)

نمونه کد زیر نشان می دهد که چگونه از روش revoke با شناسه استفاده کنید.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

نوع داده: ابطال پاسخ

هنگامی که عملکرد callback شما فراخوانی می شود ، یک شیء RevocationResponse به عنوان پارامتر منتقل می شود. در جدول زیر زمینه هایی که در شیء پاسخ ابطال موجود است لیست شده است:

موفق

این قسمت یک مقدار بولی است که در صورت عدم موفقیت روش ابطال یا نادرست در عدم موفقیت ، درست تنظیم شده است.

خطا

این قسمت یک مقدار رشته ای است و در صورت عدم موفقیت روش ابطال ، پیام خطای مفصلی دارد ، در مورد موفقیت تعریف نشده است.

این صفحه مرجع API ورود به سیستم JavaScript را توصیف می کند. می توانید از این API برای نمایش یک ضربه سریع استفاده کنید یا با دکمه Google در صفحات وب خود وارد شوید.

روش: google.accounts.id.Initialize

روش google.accounts.id.initialize بر اساس شی پیکربندی ، علامت را با Google Client شروع می کند. به عنوان مثال کد زیر از روش مراجعه کنید:

google.accounts.id.initialize(IdConfiguration)

مثال کد زیر روش google.accounts.id.initialize را با یک عملکرد onload بارگیری می کند:

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

روش google.accounts.id.initialize با نمونه مشتری Google که می تواند به طور ضمنی توسط همه ماژول ها در همان صفحه وب استفاده شود ، نشانه ای ایجاد می کند.

• شما فقط باید یک بار با روش google.accounts.id.initialize تماس بگیرید حتی اگر از چندین ماژول (مانند یک شیر آب ، دکمه شخصی ، ابطال و غیره) در همان صفحه وب استفاده کنید.
• اگر چندین بار با روش google.accounts.id.initialize تماس بگیرید ، فقط تنظیمات موجود در آخرین تماس به یاد می آید و استفاده می شود.

شما در واقع تنظیمات را هر زمان که با روش google.accounts.id.initialize تماس می گیرید ، تنظیم مجدد می کنید ، و تمام روش های بعدی در همان صفحه وب بلافاصله از تنظیمات جدید استفاده می کنید.

نوع داده ها: پیکربندی idconfiguration

در جدول زیر زمینه ها و توضیحات مربوط به نوع داده IdConfiguration ذکر شده است:

client_id

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

خودکار_ انتخاب

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

بازپرداخت

این قسمت عملکرد JavaScript است که توکن شناسه را از یک ضربه شیر یا پنجره بازشو بازگرداند. در صورت استفاده از حالت Google One یا ورود به سیستم با Google Button popup UX ، این ویژگی لازم است. برای اطلاعات بیشتر به جدول زیر مراجعه کنید:

login_uri

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

این مقدار دقیقاً باید با یکی از URI های تغییر مسیر مجاز برای مشتری OAUTH 2.0 مطابقت داشته باشد ، که شما در کنسول Google Cloud پیکربندی کرده اید و باید مطابق با قوانین اعتبار سنجی URI تغییر مسیر ما باشد.

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

هنگامی که کاربر با دکمه Google کلیک می کند و از حالت UX استفاده می کند ، پاسخ اعتبار اعتبار ID به نقطه پایان ورود شما ارسال می شود.

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

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

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

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

credential=ID_TOKEN

بومی_

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

cancel_on_tap_outside

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

prompt_parent_id

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

غیر معذب

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

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

زمینه

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

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

state_cookie_domain

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

ux_mode

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

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

مجاز_ورجین مجاز

منشأی که ​​مجاز به تعبیه Iframe میانی هستند. اگر این قسمت موجود باشد ، یک شیر در حالت 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" نامعتبر است.

اگر مقدار فیلد allowed_parent_origin نامعتبر باشد ، یک ضربه اولیه از حالت Iframe میانی ضربه می خورد و متوقف می شود.

intermediate_iframe_close_callback

هنگامی که کاربران به صورت دستی با ضربه زدن روی دکمه "X" در یک ضربه به UI ، یک ضربه را می بندند ، رفتار پیش فرض میانی Iframe را نادیده می گیرد. رفتار پیش فرض این است که بلافاصله iframe میانی را از DOM حذف کنید.

قسمت intermediate_iframe_close_callback فقط در حالت iframe میانی اثر می گذارد. و این فقط به جای آن ضربه ای به iframe واسطه تأثیر می گذارد. One Tap UI قبل از استناد به تماس تلفنی برداشته می شود.

itp_support

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

login_hint

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

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

hd

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

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

use_fedcm_for_prompt

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

Enable_Redirect_uri_Validation

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

روش: google.accounts.id.prompt

روش google.accounts.id.prompt پس از فراخوانی روش initialize() مدیر ، یک ضربه سریع یا مدیر اعتبارنامه بومی مرورگر را نشان می دهد. به عنوان مثال کد زیر از روش مراجعه کنید:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

به طور معمول ، روش prompt() در صفحه بار فراخوانی می شود. با توجه به وضعیت جلسه و تنظیمات کاربر در سمت Google ، ممکن است UI یک ضربه ای باشد. برای اطلاع از وضعیت UI برای لحظات مختلف ، یک عملکرد را برای دریافت اعلان های وضعیت UI منتقل کنید.

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

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

• Skipped Moment: این اتفاق می افتد که یک ضربه سریع توسط یک لغو خودکار بسته شود ، یک لغو دستی یا هنگامی که گوگل نتواند اعتبار خود را صادر کند ، مانند زمانی که جلسه انتخاب شده از Google امضا کرده است.

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

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

مثال کد زیر لحظه پرش را پیاده سازی می کند:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

نوع داده: PromptMomentNotification

در جدول زیر روش ها و توضیحات مربوط به نوع داده PromptMomentNotification ذکر شده است:

Data type: CredentialResponse

When your callback function is invoked, a CredentialResponse object is passed as the parameter. The following table lists the fields that are contained in the credential response object:

اعتبار

This field is the ID token as a base64-encoded JSON Web Token (JWT) string.

When decoded , the JWT looks like the following example:

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": "Elisa",
  "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"
}

The sub field is a globally unique identifier for the Google Account. Only use sub field as identifier for the user as it is unique among all Google Accounts and never reused. Don't use email address as an identifier because a Google Account can have multiple email addresses at different points in time.

Using the email , email_verified and hd fields you can determine if Google hosts and is authoritative for an email address. In cases where Google is authoritative the user is confirmed to be the legitimate account owner.

Cases where Google is authoritative:

• email has a @gmail.com suffix, this is a Gmail Account.
• email_verified is true and hd is set, this is a Google Workspace account.

Users may register for Google Accounts without using Gmail or Google Workspace. When email does not contain a @gmail.com suffix and hd is absent Google is not authoritative and password or other challenge methods are recommended to verify the user. email_verfied can also be true as Google initially verified the user when the Google Account was created, however ownership of the third party email account may have since changed.

The exp field shows the expiration time for you to verify the token on your server side . It is one hour for the ID token obtained from Sign In With Google. You need to verify the token before the expiration time. Don't use exp for session management . An expired ID token does not mean the user is signed out. Your app is responsible for session management of your users.

select_by

The following table lists the possible values for the select_by field. The type of button used along with the session and consent state are used to set the value,

• The user pressed either the One Tap or Sign In With Google button or used the touchless Automatic sign-in process.

• An existing session was found, or the user selected and signed-in to a Google Account to establish a new session.

• Prior to sharing ID token credentials with your app the user either

  • pressed the Confirm button to grant their consent to share credentials, or
  • had previously granted consent and used Select an Account to choose a Google Account.

The value of this field is set to one of these types,

دولت

This field is only defined when user clicks a Sign in with Google button to sign in, and the clicked button's state attribute is specified. The value of this field is the same value you specified in the button's state attribute.

As multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. Hence, you can this state field to identify which button user clicked to sign in.

Method: google.accounts.id.renderButton

The google.accounts.id.renderButton method renders a Sign In With Google button in your web pages.

See the following code example of the method:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Data type: GsiButtonConfiguration

The following table lists the fields and descriptions of the GsiButtonConfiguration data type:

Attribute types

The following sections contain details about each attribute's type, and an example.

نوع

The button type. The default value is standard .

See the following table for further information:

The following table lists the available button types and their descriptions:

تایپ کنید
standard
icon

موضوع

The button theme. The default value is outline . See the following table for further information:

The following table lists the available themes and their descriptions:

موضوع
outline
filled_blue
filled_black

اندازه

The button size. The default value is large . See the following table for further information:

The following table lists the available button sizes and their descriptions:

اندازه
large
medium
small

متن

The button text. The default value is signin_with . There are no visual differences for the text of icon buttons that have different text attributes. The only exception is when the text is read for screen accessibility.

See the following table for further information:

The following table lists all the available button texts and their descriptions:

متن
signin_with
signup_with
continue_with
signin

شکل

The button shape. The default value is rectangular . See the following table for further information:

The following table lists the available button shapes and their descriptions:

شکل
rectangular
pill
circle
square

logo_alignment

The alignment of the Google logo. The default value is left . This attribute only applies to the standard button type. See the following table for further information:

The following table lists the available alignments and their descriptions:

logo_alignment
left
center

عرض

The minimum button width, in pixels. The maximum width is 400 pixels.

See the following table for further information:

locale

اختیاری. Display button text using the specified locale, otherwise default to the users Google Account or browser settings. Add the hl parameter and language code to the src directive when loading the library, for example: gsi/client?hl=<iso-639-code> .

If it's not set, the browser's default locale or the Google session user's preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.

See the following table for further information:

click_listener

You can define a JavaScript function to be called when the Sign in with Google button is clicked using the click_listener attribute.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

In this example, the message Sign in with Google button clicked... is logged to the console when the Sign in with Google button is clicked.

دولت

Optional, as multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. The same string would return along with the ID token, so you can identify which button user clicked to sign in.

See the following table for further information:

Data type: Credential

When your native_callback function is invoked, a Credential object is passed as the parameter. The following table lists the fields contained in the object:

Method: google.accounts.id.disableAutoSelect

When the user signs out of your website, you need to call the method google.accounts.id.disableAutoSelect to record the status in cookies. This prevents a UX dead loop. See the following code snippet of the method:

google.accounts.id.disableAutoSelect()

The following code example implements the google.accounts.id.disableAutoSelect method with an onSignout() function:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Method: google.accounts.id.storeCredential

This method is a wrapper for the store() method of the browser's native credential manager API. Therefore, it can only be used to store a password credential. See the following code example of the method:

google.accounts.id.storeCredential(Credential, callback)

The following code example implements the google.accounts.id.storeCredential method with an onSignIn() function:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Method: google.accounts.id.cancel

You can cancel the One Tap flow if you remove the prompt from the relying party DOM. The cancel operation is ignored if a credential is already selected. See the following code example of the method:

google.accounts.id.cancel()

The following code example implements the google.accounts.id.cancel() method with an onNextButtonClicked() function:

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Library load callback: onGoogleLibraryLoad

You can register an onGoogleLibraryLoad callback. It's notified after the Sign In With Google JavaScript library is loaded:

window.onGoogleLibraryLoad = () => {
    ...
};

This callback is just a shortcut for the window.onload callback. There are no differences in behavior.

The following code example implements an onGoogleLibraryLoad callback:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Method: google.accounts.id.revoke

The google.accounts.id.revoke method revokes the OAuth grant used to share the ID token for the specified user. See the following code snippet of the method: javascript google.accounts.id.revoke(login_hint, callback)

The following code sample shows how use the revoke method with an ID.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Data type: RevocationResponse

When your callback function is invoked, a RevocationResponse object is passed as the parameter. The following table lists the fields that are contained in the revocation response object:

موفق

This field is a boolean value set to true if the revoke method call succeeded or false on failure.

خطا

This field is a string value and contains a detailed error message if the revoke method call failed, it is undefined on success.

This reference page describes the Sign-In JavaScript API. You can use this API to display the One Tap prompt or Sign In With Google button on your web pages.

Method: google.accounts.id.initialize

The google.accounts.id.initialize method initializes the Sign In With Google client based on the configuration object. See the following code example of the method:

google.accounts.id.initialize(IdConfiguration)

The following code example implements the google.accounts.id.initialize method with an onload function:

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

The google.accounts.id.initialize method creates a Sign In With Google client instance that can be implicitly used by all modules in the same web page.

• You only need to call the google.accounts.id.initialize method once even if you use multiple modules (like One Tap, Personalized button, revocation, etc.) in the same web page.
• If you do call the google.accounts.id.initialize method multiple times, only the configurations in the last call is remembered and used.

You actually reset the configurations whenever you call the google.accounts.id.initialize method, and all subsequent methods in the same web page immediately use the new configurations.

Data type: IdConfiguration

The following table lists the fields and descriptions of the IdConfiguration data type:

client_id

This field is your application's client ID, which is found and created in the Google Cloud console. See the following table for further information:

auto_select

This field determines if an ID token is automatically returned without any user interaction when there's only one Google session that has approved your app before. The default value is false . See the following table for further information:

callback

This field is the JavaScript function that handles the ID token returned from the One Tap prompt or the pop-up window. This attribute is required if Google One Tap or the Sign In With Google button popup UX mode is used. See the following table for further information:

login_uri

This attribute is the URI of your login endpoint.

The value must exactly match one of the authorized redirect URIs for the OAuth 2.0 client, which you configured in the Google Cloud console and must conform to our Redirect URI validation rules .

This attribute may be omitted if the current page is your login page, in which case the credential is posted to this page by default.

The ID token credential response is posted to your login endpoint when a user clicks on the Sign In With Google button and redirect UX mode is used.

See the following table for further information:

Your login endpoint must handle POST requests containing a credential key with an ID token value in the body.

The following is an example request to your login endpoint:

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

credential=ID_TOKEN

native_callback

This field is the name of the JavaScript function that handles the password credential returned from the browser's native credential manager. See the following table for further information:

cancel_on_tap_outside

This field sets whether or not to cancel the One Tap request if a user clicks outside the prompt. The default value is true . You can disable it if you set the value to false . See the following table for further information:

prompt_parent_id

This attribute sets the DOM ID of the container element. If it's not set, the One Tap prompt is displayed in the top-right corner of the window. See the following table for further information:

nonce

This field is a random string used by the ID token to prevent replay attacks. See the following table for further information:

Nonce length is limited to the maximum JWT size supported by your environment, and individual browser and server HTTP size constraints.

زمینه

This field changes the text of the title and messages in the One Tap prompt. See the following table for further information:

The following table lists all the available contexts and their descriptions:

state_cookie_domain

If you need to display One Tap in the parent domain and its subdomains, pass the parent domain to this field so that a single shared-state cookie is used. See the following table for further information:

ux_mode

Use this field to set the UX flow used by the Sign In With Google button. The default value is popup . This attribute has no impact on the OneTap UX. See the following table for further information:

The following table lists the available UX modes and their descriptions.

allowed_parent_origin

The origins that are allowed to embed the intermediate iframe. One Tap runs in the intermediate iframe mode if this field is present. See the following table for further information:

The following table lists the supported value types and their descriptions.

Wildcard prefixes are also supported. For example, "https://*.example.com" matches example.com and its subdomains at all levels (eg news.example.com , login.news.example.com ). Things to keep in mind when using wildcards:

• Pattern strings cannot be composed of only a wildcard and a top level domain. For example https:// .com and https:// .co.uk are invalid; As noted above, "https:// .example.com" matches example.com and its subdomains. You can also use an array to represent 2 different domains. For example, ["https://example1.com", "https:// .example2.com"] matches the domains example1.com , example2.com and subdomains of example2.com
• Wildcard domains must begin with a secure https:// scheme, and so "*.example.com" is considered invalid.

If the value of allowed_parent_origin field is invalid, the One Tap initialization of the intermediate iframe mode would fail and stop.

intermediate_iframe_close_callback

Overrides the default intermediate iframe behavior when users manually close One Tap by tapping on the 'X' button in the One Tap UI. The default behavior is to remove the intermediate iframe from the DOM immediately.

The intermediate_iframe_close_callback field takes effect only in intermediate iframe mode. And it has impact only to the intermediate iframe, instead of the One Tap iframe. The One Tap UI is removed before the callback is invoked.

itp_support

This field determines if the upgraded One Tap UX should be enabled on browsers that support Intelligent Tracking Prevention (ITP). The default value is false . See the following table for further information:

login_hint

If your application knows in advance which user should be signed-in, it can provide a login hint to Google. When successful, account selection is skipped. Accepted values are: an email address or an ID token sub field value.

For more information, see the login_hint field in the OpenID Connect documentation.

hd

When a user has multiple accounts and should only sign-in with their Workspace account use this to provide a domain name hint to Google. When successful, user accounts displayed during account selection are limited to the provided domain. A wildcard value: * offers only Workspace accounts to the user and excludes consumer accounts (user@gmail.com) during account selection.

For more information, see the hd field in the OpenID Connect documentation.

use_fedcm_for_prompt

Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. Defaults to false. See Migrate to FedCM page for more information.

enable_redirect_uri_validation

Enable button redirect flow that complies with Redirect URI validation rules .

Method: google.accounts.id.prompt

The google.accounts.id.prompt method displays the One Tap prompt or the browser native credential manager after the initialize() method is invoked. See the following code example of the method:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Normally, the prompt() method is called on page load. Due to the session status and user settings on the Google side, the One Tap prompt UI might not be displayed. To get notified on the UI status for different moments, pass a function to receive UI status notifications.

Notifications are fired on the following moments:

• Display moment: This occurs after the prompt() method is called. The notification contains a boolean value to indicate whether the UI is displayed or not.

• Skipped moment: This occurs when the One Tap prompt is closed by an auto cancel, a manual cancel, or when Google fails to issue a credential, such as when the selected session has signed out of Google.

  In these cases, we recommend that you continue on to the next identity providers, if there are any.

• Dismissed moment: This occurs when Google successfully retrieves a credential or a user wants to stop the credential retrieval flow. For example, when the user begins to input their username and password in your login dialog, you can call the google.accounts.id.cancel() method to close the One Tap prompt and trigger a dismissed moment.

The following code example implements the skipped moment:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Data type: PromptMomentNotification

The following table lists methods and descriptions of the PromptMomentNotification data type:

Data type: CredentialResponse

When your callback function is invoked, a CredentialResponse object is passed as the parameter. The following table lists the fields that are contained in the credential response object:

اعتبار

This field is the ID token as a base64-encoded JSON Web Token (JWT) string.

When decoded , the JWT looks like the following example:

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": "Elisa",
  "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"
}

The sub field is a globally unique identifier for the Google Account. Only use sub field as identifier for the user as it is unique among all Google Accounts and never reused. Don't use email address as an identifier because a Google Account can have multiple email addresses at different points in time.

Using the email , email_verified and hd fields you can determine if Google hosts and is authoritative for an email address. In cases where Google is authoritative the user is confirmed to be the legitimate account owner.

Cases where Google is authoritative:

• email has a @gmail.com suffix, this is a Gmail Account.
• email_verified is true and hd is set, this is a Google Workspace account.

Users may register for Google Accounts without using Gmail or Google Workspace. When email does not contain a @gmail.com suffix and hd is absent Google is not authoritative and password or other challenge methods are recommended to verify the user. email_verfied can also be true as Google initially verified the user when the Google Account was created, however ownership of the third party email account may have since changed.

The exp field shows the expiration time for you to verify the token on your server side . It is one hour for the ID token obtained from Sign In With Google. You need to verify the token before the expiration time. Don't use exp for session management . An expired ID token does not mean the user is signed out. Your app is responsible for session management of your users.

select_by

The following table lists the possible values for the select_by field. The type of button used along with the session and consent state are used to set the value,

• The user pressed either the One Tap or Sign In With Google button or used the touchless Automatic sign-in process.

• An existing session was found, or the user selected and signed-in to a Google Account to establish a new session.

• Prior to sharing ID token credentials with your app the user either

  • pressed the Confirm button to grant their consent to share credentials, or
  • had previously granted consent and used Select an Account to choose a Google Account.

The value of this field is set to one of these types,

دولت

This field is only defined when user clicks a Sign in with Google button to sign in, and the clicked button's state attribute is specified. The value of this field is the same value you specified in the button's state attribute.

As multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. Hence, you can this state field to identify which button user clicked to sign in.

Method: google.accounts.id.renderButton

The google.accounts.id.renderButton method renders a Sign In With Google button in your web pages.

See the following code example of the method:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Data type: GsiButtonConfiguration

The following table lists the fields and descriptions of the GsiButtonConfiguration data type:

Attribute types

The following sections contain details about each attribute's type, and an example.

نوع

The button type. The default value is standard .

See the following table for further information:

The following table lists the available button types and their descriptions:

تایپ کنید
standard
icon

موضوع

The button theme. The default value is outline . See the following table for further information:

The following table lists the available themes and their descriptions:

موضوع
outline
filled_blue
filled_black

اندازه

The button size. The default value is large . See the following table for further information:

The following table lists the available button sizes and their descriptions:

اندازه
large
medium
small

متن

The button text. The default value is signin_with . There are no visual differences for the text of icon buttons that have different text attributes. The only exception is when the text is read for screen accessibility.

See the following table for further information:

The following table lists all the available button texts and their descriptions:

متن
signin_with
signup_with
continue_with
signin

شکل

The button shape. The default value is rectangular . See the following table for further information:

The following table lists the available button shapes and their descriptions:

شکل
rectangular
pill
circle
square

logo_alignment

The alignment of the Google logo. The default value is left . This attribute only applies to the standard button type. See the following table for further information:

The following table lists the available alignments and their descriptions:

logo_alignment
left
center

عرض

The minimum button width, in pixels. The maximum width is 400 pixels.

See the following table for further information:

locale

اختیاری. Display button text using the specified locale, otherwise default to the users Google Account or browser settings. Add the hl parameter and language code to the src directive when loading the library, for example: gsi/client?hl=<iso-639-code> .

If it's not set, the browser's default locale or the Google session user's preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.

See the following table for further information:

click_listener

You can define a JavaScript function to be called when the Sign in with Google button is clicked using the click_listener attribute.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

In this example, the message Sign in with Google button clicked... is logged to the console when the Sign in with Google button is clicked.

دولت

Optional, as multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. The same string would return along with the ID token, so you can identify which button user clicked to sign in.

See the following table for further information:

Data type: Credential

When your native_callback function is invoked, a Credential object is passed as the parameter. The following table lists the fields contained in the object:

Method: google.accounts.id.disableAutoSelect

When the user signs out of your website, you need to call the method google.accounts.id.disableAutoSelect to record the status in cookies. This prevents a UX dead loop. See the following code snippet of the method:

google.accounts.id.disableAutoSelect()

The following code example implements the google.accounts.id.disableAutoSelect method with an onSignout() function:

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Method: google.accounts.id.storeCredential

This method is a wrapper for the store() method of the browser's native credential manager API. Therefore, it can only be used to store a password credential. See the following code example of the method:

google.accounts.id.storeCredential(Credential, callback)

The following code example implements the google.accounts.id.storeCredential method with an onSignIn() function:

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Method: google.accounts.id.cancel

You can cancel the One Tap flow if you remove the prompt from the relying party DOM. The cancel operation is ignored if a credential is already selected. See the following code example of the method:

google.accounts.id.cancel()

The following code example implements the google.accounts.id.cancel() method with an onNextButtonClicked() function:

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Library load callback: onGoogleLibraryLoad

You can register an onGoogleLibraryLoad callback. It's notified after the Sign In With Google JavaScript library is loaded:

window.onGoogleLibraryLoad = () => {
    ...
};

This callback is just a shortcut for the window.onload callback. There are no differences in behavior.

The following code example implements an onGoogleLibraryLoad callback:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Method: google.accounts.id.revoke

The google.accounts.id.revoke method revokes the OAuth grant used to share the ID token for the specified user. See the following code snippet of the method: javascript google.accounts.id.revoke(login_hint, callback)

The following code sample shows how use the revoke method with an ID.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Data type: RevocationResponse

When your callback function is invoked, a RevocationResponse object is passed as the parameter. The following table lists the fields that are contained in the revocation response object:

موفق

This field is a boolean value set to true if the revoke method call succeeded or false on failure.

خطا

This field is a string value and contains a detailed error message if the revoke method call failed, it is undefined on success.