Google Identity Services در حال انتقال به APIهای FedCM است. راهنمای مهاجرت را دنبال کنید تا تغییرات احتمالی را بررسی کنید و از تأثیرات منفی ورود کاربر به وب سایت خود جلوگیری کنید.
با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
یک دکمه Sign In With Google به سایت خود اضافه کنید تا کاربران را قادر به ثبت نام یا ورود به برنامه وب خود کنید. از HTML یا جاوا اسکریپت برای رندر کردن دکمه و ویژگی ها برای سفارشی کردن شکل، اندازه، متن و موضوع دکمه استفاده کنید.
پس از اینکه کاربر یک حساب Google را انتخاب کرد و رضایت خود را اعلام کرد، Google نمایه کاربر را با استفاده از JSON Web Token (JWT) به اشتراک می گذارد. برای مروری بر مراحل مربوط به ورود به سیستم و تجربه کاربر ، نحوه کارکرد آن را ببینید. درک دکمه شخصی‌شده شرایط و حالت‌های مختلف را که بر نحوه نمایش دکمه به کاربران تأثیر می‌گذارد، مرور می‌کند.
پیش نیازها
برای پیکربندی صفحه رضایت OAuth، دریافت شناسه مشتری و بارگیری کتابخانه سرویس گیرنده، مراحل توضیح داده شده در راه اندازی را دنبال کنید.
رندر دکمه
برای نمایش دکمه ورود با گوگل، می توانید HTML یا جاوا اسکریپت را برای نمایش دکمه در صفحه ورود خود انتخاب کنید:
HTML
دکمه ورود به سیستم را با استفاده از HTML رندر کنید و JWT را به نقطه پایانی ورود به سیستم پلتفرم خود برگردانید.
یک عنصر با کلاس g_id_signin به عنوان دکمه ورود با Google ارائه می شود. دکمه با پارامترهای ارائه شده در ویژگی های داده سفارشی می شود.
برای نمایش دکمه ورود با Google و ضربه زدن با Google One در همان صفحه، data-auto_prompt="false" را حذف کنید. این برای کاهش اصطکاک و بهبود نرخ ورود به سیستم توصیه می شود.
برای لیست کامل ویژگی های داده، به صفحه مرجع g_id_signin مراجعه کنید
جاوا اسکریپت
دکمه ورود به سیستم را با استفاده از جاوا اسکریپت رندر کنید و JWT را به کنترل کننده پاسخ به تماس جاوا اسکریپت مرورگر بازگردانید.
<html> <body> <scriptsrc="https://accounts.google.com/gsi/client"async></script> <script> functionhandleCredentialResponse(response){console.log("Encoded JWT ID token: "+response.credential);}window.onload=function(){google.accounts.id.initialize({client_id:"YOUR_GOOGLE_CLIENT_ID"callback:handleCredentialResponse});google.accounts.id.renderButton(document.getElementById("buttonDiv"),{theme:"outline",size:"large"}// customization attributes);google.accounts.id.prompt();// also display the One Tap dialog}</script> <divid="buttonDiv"></div> </body> </html>
عنصر مشخص شده به عنوان اولین پارامتر برای renderButton به عنوان یک دکمه ورود به سیستم با Google نمایش داده می شود. در این مثال buttonDiv برای نمایش دکمه در صفحه استفاده می شود. دکمه با استفاده از ویژگی های مشخص شده در پارامتر دوم برای renderButton سفارشی می شود.
برای به حداقل رساندن اصطکاک کاربر google.accounts.id.prompt() برای نمایش One Tap به عنوان جایگزین دوم برای استفاده از دکمه ثبت نام یا ورود به سیستم فراخوانی می شود.
کتابخانه GIS سند HTML را برای عناصری با ویژگی شناسه تنظیم شده روی g_id_onload یا ویژگی های کلاس حاوی g_id_signin تجزیه می کند. اگر یک عنصر منطبق پیدا شود، دکمه با استفاده از HTML ارائه می شود، صرف نظر از اینکه دکمه را در جاوا اسکریپت نیز رندر کرده باشید. برای جلوگیری از نمایش دوبار دکمه، احتمالاً با پارامترهای متضاد، عناصر HTML مطابق با این نام‌ها را در صفحات HTML خود وارد نکنید.
زبان دکمه
زبان دکمه به طور خودکار با زبان پیش‌فرض مرورگر یا ترجیح کاربر جلسه Google تعیین می‌شود. همچنین می توانید با افزودن پارامتر hl و کد زبان به دستورالعمل src هنگام بارگیری کتابخانه و با افزودن گزینه data-locale یا پارامتر محلی data-locale در HTML یا محلی در جاوا اسکریپت، زبان را به صورت دستی انتخاب کنید.
HTML
قطعه کد زیر نحوه نمایش زبان دکمه را با افزودن پارامتر hl به URL کتابخانه مشتری و با تنظیم ویژگی data-locale به فرانسوی نشان می دهد:
قطعه کد زیر نحوه نمایش زبان دکمه را به زبان فرانسوی با افزودن پارامتر hl به URL کتابخانه مشتری و فراخوانی متد google.accounts.id.renderButton با پارامتر locale تنظیم شده روی فرانسوی نشان می دهد:
پس از ارائه رضایت کاربر، Google اعتبار JSON Web Token (JWT) که به عنوان شناسه شناسه شناخته می شود را به مرورگر کاربر یا مستقیماً به نقطه پایانی ورود به سیستم میزبانی شده توسط پلت فرم شما برمی گرداند.
جایی که انتخاب می‌کنید JWT را دریافت کنید بستگی به این دارد که آیا دکمه را با استفاده از HTML یا جاوا اسکریپت رندر می‌کنید و از حالت UX بازشو یا تغییر مسیر استفاده می‌کنید.
حالت پاپ آپ
استفاده از حالت UX popup ، جریان UX ورود به سیستم را در یک پنجره بازشو انجام می دهد. این معمولاً یک تجربه کمتر مزاحم برای کاربران است و حالت UX پیش‌فرض است.
هنگام رندر کردن دکمه با استفاده از:
HTML
می توانید یکی را تنظیم کنید:
data-callback برای برگرداندن JWT به کنترل کننده پاسخ به تماس یا
data-login_uri برای Google تا با استفاده از یک درخواست POST، JWT را مستقیماً به نقطه پایانی ورود به سیستم شما ارسال کند.
اگر هر دو مقدار تنظیم شده باشند، data-callback بر data-login_uri اولویت دارد. تنظیم هر دو مقدار ممکن است هنگام استفاده از کنترل کننده تماس برای اشکال زدایی مفید باشد.
جاوا اسکریپت
شما باید یک callback مشخص کنید، حالت بازشو هنگام باز کردن دکمه در جاوا اسکریپت از تغییر مسیر پشتیبانی نمی کند. در صورت تنظیم، login_uri نادیده گرفته می شود.
استفاده از حالت redirect UX، جریان UX ورود به سیستم را با استفاده از تغییر جهت صفحه کامل مرورگر کاربر انجام می‌دهد و Google با استفاده از درخواست POST، JWT را مستقیماً به نقطه پایانی ورود به سیستم شما برمی‌گرداند. این به طور کلی یک تجربه مزاحم تر برای کاربران است، اما امن ترین روش ورود به سیستم محسوب می شود.
هنگام رندر کردن دکمه با استفاده از:
HTML به صورت اختیاری data-login_uri را به URI نقطه پایانی ورود شما تنظیم می کند.
جاوا اسکریپت به صورت اختیاری login_uri به URI نقطه پایانی ورود به سیستم شما تنظیم می کند.
اگر مقداری ارائه نکنید، Google JWT را به URI صفحه فعلی برمی‌گرداند.
URI نقطه پایانی ورود شما
هنگام تنظیم data-login_uri یا login_uri از HTTPS و یک URI مطلق استفاده کنید. به عنوان مثال، https://example.com/path .
HTTP فقط هنگام استفاده از لوکال هاست در حین توسعه مجاز است: http://localhost/path .
تاریخ آخرین بهروزرسانی 2025-05-01 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-05-01 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eEasily add a "Sign In With Google" button to your website for user sign-up and sign-in, customizable with HTML or JavaScript.\u003c/p\u003e\n"],["\u003cp\u003eGoogle securely shares user profiles using a JWT (JSON Web Token) after consent.\u003c/p\u003e\n"],["\u003cp\u003eBefore implementation, set up your OAuth Consent Screen, obtain a Client ID, and load the client library.\u003c/p\u003e\n"],["\u003cp\u003eHandle the JWT credential either on the client-side using a callback or server-side with a designated login endpoint.\u003c/p\u003e\n"],["\u003cp\u003eChoose between popup or redirect UX modes, considering user experience and security trade-offs for credential handling.\u003c/p\u003e\n"]]],[],null,["Add a Sign In With Google button to your site to enable users to sign-up or\nsign-in to your web app. Use either HTML or JavaScript to render the button and\nattributes to customize the button shape, size, text, and theme.\n\nAfter a user selects a Google Account and provides their consent, Google shares\nthe user profile using a JSON Web Token (JWT). For an overview of the steps\ninvolved during sign-in and user experience see [How it works](/identity/gsi/web/guides/overview#how_it_works).\n[Understand the personalized button](/identity/gsi/web/guides/personalized-button) reviews the different conditions and\nstates affecting how the button is displayed to users.\n| **Key Point:** Our [Code Generator](/identity/gsi/web/tools/configurator) helps you to interactively design your Sign In With Google button and generates the code needed to add it to your web page.\n\nPrerequisites\n\nFollow the steps described in [Setup](/identity/gsi/web/guides/get-google-api-clientid) to configure your OAuth Consent\nScreen, obtain a client ID, and load the client library.\n\nButton rendering\n\nTo display the Sign In With Google button, you may choose either HTML or\nJavaScript to render the button on your login page: \n\nHTML\n\nRender the sign-in button using HTML, returning the JWT to your platform's\nlogin endpoint. \n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cscript src=\"https://accounts.google.com/gsi/client\" async\u003e\u003c/script\u003e\n \u003cdiv id=\"g_id_onload\"\n data-client_id=\"\u003cvar translate=\"no\"\u003eYOUR_GOOGLE_CLIENT_ID\u003c/var\u003e\"\n data-login_uri=\"\u003cvar translate=\"no\"\u003ehttps://your.domain/your_login_endpoint\u003c/var\u003e\"\n data-auto_prompt=\"false\"\u003e\n \u003c/div\u003e\n \u003cdiv class=\"g_id_signin\"\n data-type=\"standard\"\n data-size=\"large\"\n data-theme=\"outline\"\n data-text=\"sign_in_with\"\n data-shape=\"rectangular\"\n data-logo_alignment=\"left\"\u003e\n \u003c/div\u003e\n \u003cbody\u003e\n \u003c/html\u003e\n\nAn element with a `g_id_signin` class renders as a Sign In With Google button.\nThe button is customized by the parameters provided in the data attributes.\n\nTo display a Sign In With Google button and Google One Tap on the same page,\nremove `data-auto_prompt=\"false\"`. This is recommended to reduce friction and\nimprove sign-in rates.\n\nFor the full list of data attributes, see the [`g_id_signin` reference](/identity/gsi/web/reference/html-reference#element_with_class_g_id_signin)\npage\n\nJavaScript\n\nRender the sign-in button using JavaScript, returning the JWT to the\nbrowser's JavaScript callback handler. \n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cscript src=\"https://accounts.google.com/gsi/client\" async\u003e\u003c/script\u003e\n \u003cscript\u003e\n function handleCredentialResponse(response) {\n console.log(\"Encoded JWT ID token: \" + response.credential);\n }\n window.onload = function () {\n google.accounts.id.initialize({\n client_id: \"\u003cvar translate=\"no\"\u003eYOUR_GOOGLE_CLIENT_ID\u003c/var\u003e\"\n callback: handleCredentialResponse\n });\n google.accounts.id.renderButton(\n document.getElementById(\"buttonDiv\"),\n { theme: \"outline\", size: \"large\" } // customization attributes\n );\n google.accounts.id.prompt(); // also display the One Tap dialog\n }\n \u003c/script\u003e\n \u003cdiv id=\"buttonDiv\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nThe element specified as the first parameter to `renderButton` displays as a\nSign In With Google button. In this example `buttonDiv` is used to render\nthe button on the page. The button is customized using the attributes\nspecified in the second parameter to `renderButton`.\n\nTo minimize user friction `google.accounts.id.prompt()` is called to display\nOne Tap as a second alternative to using the button to sign-up or sign-in.\n\nThe GIS library parses the HTML doc for elements with an ID attribute set to\n`g_id_onload`, or class attributes containing `g_id_signin`. If a matching\nelement is found, the button is rendered using HTML, regardless if you've\nalso rendered the button in JavaScript. To avoid displaying the button\ntwice, possibly with conflicting parameters don't include HTML elements\nmatching these names in your HTML pages.\n| **Warning:** When using the JavaScript API, avoid using `g_id_onload` or `g_id_signin` in your HTML code.\n\nButton Language\n\nThe button language is automatically determined by the browser's default\nlanguage or the Google session user's preference. You can also choose the\nlanguage manually by adding the `hl` parameter and language code to the src\ndirective when loading the library and by adding the optional data-locale or\nlocale parameter [data-locale](/identity/gsi/web/reference/html-reference#data-locale) in HTML or [locale](/identity/gsi/web/reference/html-reference#data-locale) in JavaScript. \n\nHTML\n\nThe following code snippet shows how to display the button language in French\nby adding the `hl` parameter to the client library URL and by setting the\n`data-locale` attribute to French: \n\n \u003cscript src=\"https://accounts.google.com/gsi/client?hl=fr\" async\u003e\u003c/script\u003e\n \u003cdiv class=\"g_id_signin\" data-locale=\"fr\"\u003e\n \u003c/div\u003e\n\nJavaScript\n\nThe following code snippet shows how to display the button language in French\nby adding the `hl` parameter to the client library URL and calling the\n`google.accounts.id.renderButton` method with the `locale` parameter set to\nFrench: \n\n \u003cscript src=\"https://accounts.google.com/gsi/client?hl=fr\" async\u003e\u003c/script\u003e\n \u003cscript\u003e\n google.accounts.id.renderButton(\n document.getElementById(\"buttonDiv\"),\n { locale: \"fr\" }\n );\n \u003c/script\u003e\n\nCredential handling\n\nAfter user consent is given, Google returns a JSON Web Token (JWT) credential\nknown as an ID token to either the user's browser, or directly to a login\nendpoint hosted by your platform.\n\nWhere you choose to receive the JWT depends upon if you render the button using\nHTML or JavaScript and if popup or redirect UX mode is used.\n\nPopup mode\n\nUsing `popup` UX mode performs the sign-in UX flow in a pop-up window. This is\ngenerally a less intrusive experience for users and is the default UX mode.\n\nWhen rendering the button using: \n\nHTML\n\nYou can set either:\n\n- `data-callback` to return the JWT to your callback handler, or\n- `data-login_uri` for Google to send the JWT directly to your login endpoint using a [POST request](/identity/gsi/web/reference/html-reference#server-side).\n\nIf both values are set, `data-callback` takes precedence over\n`data-login_uri`. Setting both values may be helpful when using a callback\nhandler for debugging.\n\nJavaScript\n\nYou must specify a `callback`, popup mode does not support redirects\nwhen rending the button in JavaScript. If set, `login_uri` is ignored.\n\nSee [handle the returned credential response](/identity/gsi/web/guides/handle-credential-responses-js-functions) for more on decoding the\nJWT within your JS callback handler.\n\nRedirect mode\n\nUsing `redirect` UX mode performs the sign-in UX flow using full page\nredirection of the user's browser, and Google returns the JWT directly to your\nlogin endpoint using a [POST request](/identity/gsi/web/reference/html-reference#server-side).\nThis is generally a more intrusive experience for users, but is considered to\nbe the most secure sign-in method.\n\nWhen rendering the button using:\n\n- **HTML** optionally set `data-login_uri` to the URI of your login endpoint.\n- **JavaScript** optionally set `login_uri` to the URI of your login endpoint.\n\nIf you don't provide a value, Google returns the JWT to the URI of the current\npage.\n\nYour login endpoint URI\n\nUse HTTPS and an absolute URI when setting `data-login_uri` or `login_uri`.\nFor example, `https://example.com/path`.\n\nHTTP is only allowed when using localhost during development:\n`http://localhost/path`.\n\nRefer to [Use secure JavaScript origins and redirect URIs](/identity/protocols/oauth2/policies#secure-response-handling)\nfor a full description of Google's requirements and validation rules."]]
