با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
برای افزودن دکمه ورود به سیستم با Google یا درخواست‌های یک ضربه و ورود خودکار به وب‌سایت خود، ابتدا باید:
دریافت شناسه مشتری OAuth 2.0،
پیکربندی نام تجاری OAuth و تنظیمات،
کتابخانه سرویس گیرنده Google Identity Services را بارگیری کنید و
به صورت اختیاری سیاست امنیتی محتوا را تنظیم کنید و
به روز رسانی Cross-Origin Opener Policy
شناسه سرویس گیرنده Google API خود را دریافت کنید
برای فعال کردن Google Identity Services در وب‌سایت خود، ابتدا باید شناسه سرویس گیرنده Google API را تنظیم کنید. برای این کار مراحل زیر را انجام دهید:
را باز کنید از .
یک را ایجاد یا انتخاب کنید پروژه اگر قبلاً پروژه‌ای برای دکمه ورود با Google یا Google One Tap دارید، از پروژه موجود و شناسه مشتری وب استفاده کنید. هنگام ایجاد برنامه های تولید، ممکن است چندین پروژه لازم باشد، مراحل باقی مانده این بخش را برای هر پروژه ای که مدیریت می کنید تکرار کنید.
روی Create Client کلیک کنید و برای نوع ApplicationWeb application را انتخاب کنید تا شناسه مشتری جدید ایجاد شود. برای استفاده از شناسه مشتری موجود، یکی از نوع برنامه های وب را انتخاب کنید.
URI وب سایت خود را به مبدا مجاز جاوا اسکریپت اضافه کنید. URI فقط شامل طرح و نام میزبان کاملاً واجد شرایط است. به عنوان مثال، https://www.example.com .
به صورت اختیاری، اعتبارنامه ها ممکن است با استفاده از تغییر مسیر به نقطه پایانی که میزبانی می کنید به جای پاسخ به تماس جاوا اسکریپت بازگردانده شوند. اگر اینطور است، URI های تغییر مسیر خود را به URI های تغییر مسیر مجاز مجاز اضافه کنید. URIهای تغییر مسیر شامل طرح، نام میزبان کاملاً واجد شرایط و مسیر هستند و باید با قوانین اعتبارسنجی Redirect URI مطابقت داشته باشند. برای مثال، https://www.example.com/auth-receiver .
شناسه مشتری را با استفاده از فیلدهای data-client_id یا client_id در برنامه وب خود وارد کنید.
صفحه رضایت OAuth خود را پیکربندی کنید
هر دو تأیید هویت با Google و One Tap شامل یک صفحه رضایت هستند که به کاربرانی که درخواست دسترسی به داده‌هایشان را درخواست می‌کنند، نوع داده‌هایی که از آنها درخواست می‌شود و شرایطی که اعمال می‌شود، می‌گوید.
را باز کنید از بخش پلتفرم Google Auth از.
در صورت درخواست، پروژه ای را که ایجاد کرده اید انتخاب کنید.
در ، فرم را پر کنید و روی دکمه "ذخیره" کلیک کنید.
نام برنامه: نام درخواستی که درخواست رضایت می کند. نام باید دقیقاً منعکس کننده برنامه شما باشد و با نام برنامه ای که کاربران در جاهای دیگر می بینند سازگار باشد.
نشان‌واره برنامه: این تصویر روی صفحه رضایت نمایش داده می‌شود تا به کاربران کمک کند برنامه شما را تشخیص دهند. نشان‌واره در صفحه رضایت ورود به سیستم با Google و تنظیمات حساب نشان داده می‌شود، اما در گفتگو با یک ضربه نشان داده نمی‌شود.
ایمیل پشتیبانی: در صفحه رضایت برای پشتیبانی کاربر و مدیران Google Workspace در حال ارزیابی دسترسی به برنامه شما برای کاربرانشان نشان داده می شود. وقتی کاربر روی نام برنامه کلیک می کند، این آدرس ایمیل در صفحه رضایت ورود به سیستم با Google به کاربران نشان داده می شود.
دامنه‌های مجاز: برای محافظت از شما و کاربرانتان، Google فقط به برنامه‌هایی که با استفاده از OAuth احراز هویت می‌شوند اجازه استفاده از دامنه‌های مجاز را می‌دهد. پیوندهای برنامه های شما باید در دامنه های مجاز میزبانی شوند. بیشتر بدانید .
پیوند صفحه اصلی برنامه: در صفحه ورود به سیستم با رضایت Google و اطلاعات سلب مسئولیت مطابق با GDPR با یک ضربه در زیر دکمه "ادامه به عنوان" نشان داده می شود. باید در یک دامنه مجاز میزبانی شود.
پیوند خط‌مشی رازداری برنامه: در صفحه ورود به سیستم با رضایت Google و اطلاعات سلب مسئولیت مطابق با GDPR با یک ضربه در زیر دکمه «ادامه به‌عنوان» نشان داده می‌شود. باید در یک دامنه مجاز میزبانی شود.
پیوند شرایط خدمات برنامه (اختیاری): در صفحه ورود به سیستم با رضایت Google و اطلاعات سلب مسئولیت مطابق با GDPR با یک ضربه در زیر دکمه "ادامه به عنوان" نشان داده می شود. باید در یک دامنه مجاز میزبانی شود.
حرکت به برای پیکربندی دامنه ها برای برنامه خود.
Scopes for Google APIs : Scopes به برنامه شما اجازه می دهد تا به داده های خصوصی کاربر شما دسترسی داشته باشد. برای احراز هویت، محدوده پیش فرض (ایمیل، نمایه، openid) کافی است، نیازی به افزودن هیچ محدوده حساسی ندارید. به طور کلی بهترین روش این است که دامنه ها را به صورت تدریجی، در زمانی که دسترسی لازم است، نه از پیش درخواست کنید .
«وضعیت تأیید» را علامت بزنید، اگر برنامه شما نیاز به تأیید دارد، روی دکمه «ارسال برای تأیید» کلیک کنید تا درخواست خود را برای تأیید ارسال کنید. برای جزئیات به الزامات تأیید OAuth مراجعه کنید.
نمایش تنظیمات OAuth در حین ورود به سیستم
یک ضربه با استفاده از FedCM
دامنه مجاز سطح بالا در هنگام رضایت کاربر در Chrome نمایش داده می شود. فقط استفاده از One Tap در iframe های متقاطع اما همان سایت یک روش پشتیبانی می شود.
یک ضربه بدون FedCM
نام برنامه در هنگام رضایت کاربر نمایش داده می شود.
شکل 1. تنظیمات رضایت OAuth که توسط One Tap در Chrome نمایش داده می شود.
کتابخانه مشتری را بارگیری کنید
مطمئن شوید که کتابخانه سرویس گیرنده Google Identity Services را در هر صفحه ای که کاربر ممکن است وارد آن شود بارگیری کنید. از قطعه کد زیر استفاده کنید:
اگر اسکریپت را با ویژگی async بارگیری کنید، می توانید سرعت بارگذاری صفحات خود را بهینه کنید.
برای لیست روش ها و ویژگی هایی که کتابخانه پشتیبانی می کند، به مراجع HTML و JavaScript API مراجعه کنید.
خط مشی امنیت محتوا
در حالی که اختیاری است، یک خط مشی امنیتی محتوا برای ایمن سازی برنامه شما و جلوگیری از حملات اسکریپت بین سایتی (XSS) توصیه می شود. برای کسب اطلاعات بیشتر، به مقدمه ای بر CSP و CSP و XSS مراجعه کنید.
خط‌مشی امنیتی محتوای شما ممکن است شامل یک یا چند دستورالعمل باشد، مانند connect-src ، frame-src ، script-src ، style-src ، یا default-src .
اگر CSP شما شامل موارد زیر است:
دستورالعمل connect-src ، https://accounts.google.com/gsi/ را اضافه کنید تا به صفحه اجازه دهید URL والد را برای نقاط پایانی سرویس های هویت Google بارگیری کند.
دستورالعمل frame-src ، https://accounts.google.com/gsi/ را اضافه کنید تا URL والد iframe های دکمه One Tap and Sign With Google را مجاز کنید.
دستورالعمل script-src ، https://accounts.google.com/gsi/client را اضافه کنید تا URL کتابخانه جاوا اسکریپت خدمات هویت Google مجاز شود.
دستورالعمل style-src ، https://accounts.google.com/gsi/style را اضافه کنید تا نشانی اینترنتی صفحات سبک خدمات هویت Google مجاز شود.
دستورالعمل default-src ، اگر استفاده می‌شود، اگر هر یک از دستورالعمل‌های قبلی ( connect-src ، frame-src ، script-src ، یا style-src ) مشخص نشده باشد، یک نسخه بازگشتی است، https://accounts.google.com/gsi/ اضافه کنید تا به صفحه اجازه دهید URL والد را برای سرویس‌های هویت Google در نقطه پایانی سمت سرور بارگیری کند.
هنگام استفاده از connect-src از فهرست کردن URL های GIS منفرد خودداری کنید. این کمک می کند تا خرابی ها هنگام به روز رسانی GIS به حداقل برسد. برای مثال، به‌جای افزودن https://accounts.google.com/gsi/status از نشانی اینترنتی والد GIS https://accounts.google.com/gsi/ استفاده کنید.
این هدر پاسخ نمونه به سرویس‌های هویت گوگل اجازه می‌دهد تا با موفقیت بارگیری و اجرا شوند:
برای ایجاد موفقیت آمیز پنجره های بازشو، ممکن است دکمه ورود به سیستم با Google و Google One Tap نیاز به تغییراتی در Cross-Origin-Opener-Policy (COOP) شما داشته باشد.
هنگامی که FedCM فعال است، مرورگر مستقیماً پنجره های بازشو ارائه می دهد و هیچ تغییری لازم نیست.
با این حال، هنگامی که FedCM غیرفعال است، هدر COOP را تنظیم کنید:
به same-origin و
شامل same-origin-allow-popups .
تنظیم نکردن هدر مناسب ارتباط بین پنجره ها را قطع می کند و منجر به یک پنجره بازشو خالی یا باگ های مشابه می شود.
تاریخ آخرین بهروزرسانی 2025-08-26 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-08-26 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eBefore integrating Google Sign-In, One Tap, or Automatic sign-in, you need to set up your Google API client ID and OAuth consent screen in the Google API Console.\u003c/p\u003e\n"],["\u003cp\u003eFor security, configure your website's Content Security Policy by adding specific Google Identity Services URLs to directives like \u003ccode\u003econnect-src\u003c/code\u003e, \u003ccode\u003eframe-src\u003c/code\u003e, \u003ccode\u003escript-src\u003c/code\u003e, and \u003ccode\u003estyle-src\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eWhen FedCM is disabled, adjust your \u003ccode\u003eCross-Origin-Opener-Policy\u003c/code\u003e header to \u003ccode\u003esame-origin\u003c/code\u003e and include \u003ccode\u003esame-origin-allow-popups\u003c/code\u003e to ensure proper functionality of Google Sign-In and One Tap pop-ups.\u003c/p\u003e\n"],["\u003cp\u003eEnsure your website's URI is added to the 'Authorized JavaScript origins' in the Google API Console and that it includes the scheme and fully qualified hostname.\u003c/p\u003e\n"]]],[],null,["To add a Sign In With Google button or One Tap and Automatic sign-in\nprompts to your website you first need to:\n\n1. get an OAuth 2.0 client ID,\n2. configure OAuth branding and settings,\n3. load the Google Identity Services client library, and\n4. optionally setup Content Security Policy and\n5. update Cross-Origin Opener Policy\n\n| **Note:** You must have a client ID to configure Sign In With Google and to [verify ID tokens](/identity/gsi/web/guides/verify-google-id-token) on your backend. A client ID looks like the following example: `1234567890-abc123def456.apps.googleusercontent.com`\n\nGet your Google API client ID\n\nTo enable Google Identity Services on your website, you first need to set up a\nGoogle API client ID. To do so, complete the following steps:\n\n1. Open the [Clients page](https://console.developers.google.com/auth/clients) of the Google Cloud Console.\n2. Create or select a Cloud Console project. If you already have a project for the Sign In With Google button or Google One Tap, use the existing project and the web client ID. When creating production applications, [multiple projects](/identity/protocols/oauth2/policies#separate-projects) may be necessary, repeat the remaining steps of this section for each project you manage.\n3. Click **Create client** and for **Application type** select **Web application** to create a new client ID. To use an existing client ID select one of type **Web application**.\n4. Add the URI of your website to **Authorized JavaScript origins** . The URI\n includes the scheme and fully qualified hostname only. For example,\n `https://www.example.com`.\n\n | **Key Point:** For local tests or development add both `http://localhost` and `http://localhost:\u003cport_number\u003e`\n | **Key Point:** Google One Tap can only be displayed in HTTPS domains.\n5. Optionally, credentials may be returned using a redirect to an endpoint you\n host rather than through a JavaScript callback. If this is the case, add\n your redirect URIs to **Authorized redirect URIs** . Redirect URIs include\n the scheme, fully qualified hostname, and path and must comply with\n [Redirect URI validation rules](/identity/protocols/oauth2/web-server#uri-validation). For example,\n `https://www.example.com/auth-receiver`.\n\nInclude the client ID in your web app using the [data-client_id](/identity/gsi/web/reference/html-reference#data-client_id)\nor [client_id](/identity/gsi/web/reference/js-reference#client_id) fields.\n| **Key Point:** When testing using http and localhost set the [Referrer-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) header in your web app to `Referrer-Policy: no-referrer-when-downgrade`.\n\nConfigure your OAuth Consent Screen\n\nBoth Sign In With Google and One Tap authentication include a consent screen\nwhich tells users the application requesting access to their data, what kind of\ndata they are asked for and the terms that apply.\n\n1. Open the [Branding page](https://console.developers.google.com/auth/branding) of the Google Auth Platform section of the Cloud Console.\n2. If prompted, select the project you just created.\n3. On the [Branding page](https://console.developers.google.com/auth/branding), fill out\n the form and click the \"Save\" button.\n\n 1. **Application name:** The name of the application asking for consent.\n The name should accurately reflect your application and be consistent\n with the application name users see elsewhere.\n\n 2. **Application logo:** This image is shown on the consent screen to help\n users to recognize your app. The logo is shown on Sign In With Google\n consent screen and on [account settings](https://myaccount.google.com/permissions), but is not shown on One Tap dialog.\n\n 3. **Support email:** Shown on the consent screen for user support and to\n Google Workspace administrators evaluating access to your application\n for their users. This email address is shown to users on the\n Sign In With Google consent screen when the user clicks the\n application name.\n\n 4. **Authorized domains:** To protect you and your users, Google only\n allows applications that authenticate using OAuth to use Authorized\n Domains. Your applications' links must be hosted on Authorized Domains.\n [Learn more](https://support.google.com/cloud/answer/6158849#authorized-domains).\n\n 5. **Application Homepage link:** Shown on Sign In With Google consent\n screen and One-Tap GDPR compliant disclaimer information under the\n \"Continue as\" button. Must be hosted on an Authorized Domain.\n\n 6. **Application Privacy Policy link:** Shown on Sign In With Google\n consent screen and One-Tap GDPR compliant disclaimer information under\n the \"Continue as\" button. Must be hosted on an Authorized Domain.\n\n 7. **Application Terms of Service link (Optional):** Shown on Sign In With\n Google consent screen and One-Tap GDPR compliant disclaimer information\n under the \"Continue as\" button. Must be hosted on an Authorized Domain.\n\n4. Navigate to the\n [Data Access page](https://console.developers.google.com/auth/scopes) to configure\n scopes for your app.\n\n 1. **Scopes for Google APIs** : Scopes allow your application to access your user's private data. For the authentication, default scope (email, profile, openid) is sufficient, you don't need to add any sensitive scopes. It is generally a best practice to [request scopes incrementally](https://developers.google.com/identity/protocols/oauth2/web-server#incrementalAuth), at the time access is required, rather than upfront.\n5. Check \"Verification Status\", if your application needs verification then\n click the \"Submit For Verification\" button to submit your application for\n verification. Refer to\n [OAuth verification requirements](https://support.google.com/cloud/answer/9110914)\n for details.\n\nDisplay of OAuth settings during sign-in \n\nOne Tap using FedCM\n\nThe top-level **Authorized domain** is displayed during user consent in\nChrome. Only using One Tap in cross-origin but [same-site](https://web.dev/articles/same-site-same-origin) iframes\nis a [**supported**](/identity/gsi/web/amp/intermediate-iframe#cross-origin-iframe) method.\n\nOne Tap without FedCM\n\nThe **Application name** is displayed during user consent.\n\n**Figure 1.** OAuth consent settings displayed by One Tap in Chrome.\n\nLoad the client library\n\nBe sure to load the Google Identity Services client library on any page that\na user might sign in on. Use the following code snippet: \n\n \u003cscript src=\"https://accounts.google.com/gsi/client\" async\u003e\u003c/script\u003e\n\nYou can optimize your pages loading speed if you load the script with the\n`async` attribute.\n\nRefer to the [HTML](/identity/gsi/web/reference/html-reference) and [JavaScript](/identity/gsi/web/reference/js-reference) API references for the list of\nmethods and properties the library supports.\n\nContent Security Policy\n\nWhile optional, a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)\nis recommended to secure your app and prevent cross-site scripting (XSS)\nattacks. To learn more, see an\n[Introduction to CSP](https://csp.withgoogle.com/docs/index.html)\nand [CSP and XSS](https://web.dev/csp/).\n\nYour Content Security Policy might include one or more directives, such as\n`connect-src`, `frame-src`, `script-src`, `style-src`, or `default-src`.\n\nIf your CSP includes the:\n\n- `connect-src` directive, add `https://accounts.google.com/gsi/` to allow a page to load the parent URL for Google Identity Services server-side endpoints.\n- `frame-src` directive, add `https://accounts.google.com/gsi/` to allow the parent URL of the One Tap and Sign In With Google button iframes.\n- `script-src` directive, add `https://accounts.google.com/gsi/client` to allow the URL of the Google Identity Services JavaScript library.\n- `style-src` directive, add `https://accounts.google.com/gsi/style` to allow the URL of the Google Identity Services Stylesheets.\n- `default-src` directive, if used, ist a fallback if any of the preceding directives (`connect-src`, `frame-src`, `script-src`, or `style-src`) is not specified, add `https://accounts.google.com/gsi/` to allow a page to load the parent URL for Google Identity Services server-side endpoints.\n\nAvoid listing individual GIS URLs when using `connect-src`. This helps minimize\nfailures when GIS is updated. For example, instead of adding\n`https://accounts.google.com/gsi/status` use the GIS parent URL\n`https://accounts.google.com/gsi/`.\n\nThis example response header allows Google Identity Services to load and execute\nsuccessfully: \n\n Content-Security-Policy-Report-Only: script-src\n https://accounts.google.com/gsi/client; frame-src\n https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;\n\nCross Origin Opener Policy\n\nThe Sign In With Google button and Google One Tap may require changes to your\n[`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) (COOP) in order\nto successfully create popups.\n\nWhen [FedCM is enabled](/identity/gsi/web/guides/supported-browsers#compatibility) the browser directly renders popups and no changes\nare necessary.\n\nHowever, when FedCM is disabled, set the COOP header:\n\n- to `same-origin` and\n- include `same-origin-allow-popups`.\n\nFailing to set the proper header breaks communication between windows, leading\nto [a blank pop-up window](https://github.com/google/google-api-javascript-client/issues/796)\nor similar bugs."]]
