تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
لإضافة زر "تسجيل الدخول باستخدام حساب Google" أو إشعارات "بنقرة واحدة" و"تسجيل الدخول تلقائيًا" إلى موقعك الإلكتروني، عليك أولاً اتّباع الخطوات التالية:
الحصول على معرّف عميل OAuth 2.0
ضبط إعدادات وهوية العلامة التجارية لبروتوكول OAuth
لتفعيل "خدمات Google لتحديد الهوية" على موقعك الإلكتروني، عليك أولاً إعداد معرّف عميل لواجهة Google API. لإجراء ذلك، يُرجى إكمال الخطوات التالية:
افتح قائمة
.
أنشئ مشروعًا أو اختَر مشروعًا. إذا كان لديك مشروع حالي لزر "تسجيل الدخول باستخدام حساب Google" أو ميزة "النقرة الواحدة من Google"، استخدِم المشروع الحالي ومعرّف عميل الويب. عند إنشاء تطبيقات إنتاجية، قد يكون من الضروري إنشاء مشاريع متعددة، لذا كرِّر الخطوات المتبقية في هذا القسم لكل مشروع تديره.
انقر على إنشاء عميل، ثم اختَر تطبيق الويب في حقل نوع التطبيق لإنشاء معرّف عميل جديد. لاستخدام معرّف عميل حالي، اختَر أحد المعرّفات من النوع تطبيق ويب.
أضِف معرّف الموارد المنتظم (URI) لموقعك الإلكتروني إلى مصادر JavaScript المسموح بها. يتضمّن معرّف الموارد الموحّد المخطط واسم المضيف المؤهَّل بالكامل فقط. على سبيل المثال،
https://www.example.com.
يمكنك بدلاً من ذلك عرض بيانات الاعتماد باستخدام عملية إعادة توجيه إلى نقطة نهاية تستضيفها بدلاً من استخدام استدعاء JavaScript. في هذه الحالة، أضِف معرّفات الموارد المنتظمة (URI) الخاصة بإعادة التوجيه إلى معرّفات الموارد المنتظمة (URI) المعتمَدة لإعادة التوجيه. تتضمّن معرّفات الموارد المنتظمة (URI) الخاصة بإعادة التوجيه المخطط واسم المضيف المؤهّل بالكامل والمسار، ويجب أن تتوافق مع قواعد التحقّق من صحة معرّف الموارد المنتظم الخاص بإعادة التوجيه. على سبيل المثال،
https://www.example.com/auth-receiver.
يتضمّن كلّ من ميزة "تسجيل الدخول باستخدام Google" وميزة المصادقة بنقرة واحدة شاشة موافقة
تُعلم المستخدمين بالتطبيق الذي يطلب الوصول إلى بياناتهم ونوع
البيانات المطلوبة والشروط السارية.
افتح في قسم "منصّة Google للمصادقة" ضمن.
إذا طُلب منك ذلك، اختَر المشروع الذي أنشأته للتو.
في ، املأ النموذج وانقر على الزر "حفظ".
اسم التطبيق: هو اسم التطبيق الذي يطلب الموافقة.
يجب أن يعبّر الاسم بدقّة عن تطبيقك وأن يكون متوافقًا مع اسم التطبيق الذي يظهر للمستخدمين في أماكن أخرى.
شعار التطبيق: تظهر هذه الصورة على شاشة الموافقة لمساعدة المستخدمين في التعرّف على تطبيقك. يظهر الشعار على شاشة الموافقة الخاصة بخدمة "تسجيل الدخول باستخدام حساب Google" وعلى إعدادات الحساب، ولكنّه لا يظهر في مربّع الحوار "نقرة واحدة".
عنوان البريد الإلكتروني المخصّص للدعم: يظهر في شاشة الموافقة المخصّصة لدعم المستخدمين ولمشرفي Google Workspace الذين يقيّمون إمكانية وصول المستخدمين إلى تطبيقك. يظهر عنوان البريد الإلكتروني هذا للمستخدمين على شاشة طلب الموافقة "تسجيل الدخول باستخدام حساب Google" عندما ينقر المستخدم على اسم التطبيق.
النطاقات المعتمَدة: لحمايتك وحماية المستخدمين، لا تسمح Google إلا للتطبيقات التي تتم مصادقتها باستخدام OAuth باستخدام النطاقات المعتمَدة. يجب أن تكون روابط تطبيقاتك مستضافة على نطاقات معتمَدة.
مزيد من المعلومات
رابط الصفحة الرئيسية للتطبيق: يظهر على شاشة طلب الموافقة في خدمة "تسجيل الدخول باستخدام حساب Google" ومعلومات إخلاء المسؤولية المتوافقة مع اللائحة العامة لحماية البيانات في خدمة "نقرة واحدة" ضمن الزر "المتابعة باسم". يجب أن تتم استضافته على نطاق معتمَد.
رابط سياسة الخصوصية للتطبيق: يظهر على شاشة الموافقة في ميزة "تسجيل الدخول باستخدام Google"، كما يظهر ضمن معلومات بيان إخلاء المسؤولية المتوافق مع اللائحة العامة لحماية البيانات (GDPR) في ميزة "نقرة واحدة" أسفل الزر "المتابعة باسم". يجب أن تتم استضافته على نطاق معتمَد.
رابط بنود خدمة التطبيق (اختياري): يظهر على شاشة الموافقة على خدمة "تسجيل الدخول باستخدام Google" ومعلومات إخلاء المسؤولية المتوافقة مع اللائحة العامة لحماية البيانات (GDPR) في خدمة "النقرة الواحدة" ضمن الزر "المتابعة باسم". يجب أن تتم استضافته على نطاق معتمَد.
انتقِل إلى
لإعداد
نطاقات تطبيقك.
نطاقات واجهات Google API: تتيح النطاقات لتطبيقك الوصول إلى بيانات المستخدم الخاصة. للمصادقة، يكون النطاق التلقائي (البريد الإلكتروني، الملف الشخصي، openid) كافيًا، ولا تحتاج إلى إضافة أي نطاقات حساسة. من أفضل الممارسات بشكل عام طلب النطاقات بشكل تدريجي، عند الحاجة إلى إذن الوصول، بدلاً من طلبها مسبقًا.
تحقَّق من "حالة التحقّق". إذا كان طلبك بحاجة إلى التحقّق، انقر على الزر "إرسال طلب التحقّق" لإرسال طلبك. يُرجى الرجوع إلى متطلبات إثبات الأهلية في OAuth للحصول على التفاصيل.
عرض إعدادات OAuth أثناء تسجيل الدخول
استخدام ميزة "نقرة واحدة" من خلال FedCM
يتم عرض النطاق المعتمَد ذي المستوى الأعلى أثناء طلب موافقة المستخدم في Chrome. إنّ استخدام One Tap في إطارات iframe للموقع الإلكتروني نفسه ولكن من مصادر متعددة هو طريقة معتمَدة.
ميزة "نقرة واحدة" بدون FedCM
يتم عرض اسم التطبيق أثناء طلب موافقة المستخدم.
الشكل 1. إعدادات موافقة OAuth التي تعرضها ميزة "النقرة الواحدة" في Chrome
تحميل مكتبة البرامج
احرص على تحميل مكتبة برامج Google Identity Services على أي صفحة قد يسجّل المستخدم الدخول إليها. استخدِم مقتطف الرمز التالي:
قد تتضمّن "سياسة أمان المحتوى" توجيهًا واحدًا أو أكثر، مثل connect-src أو frame-src أو script-src أو style-src أو default-src.
إذا كان موفّر خدمة السحابة الإلكترونية يتضمّن ما يلي:
connect-src، أضِف https://accounts.google.com/gsi/ للسماح للصفحة بتحميل عنوان URL الرئيسي لنقاط نهاية من جهة الخادم في "خدمات تحديد الهوية من Google".
frame-src، أضِف https://accounts.google.com/gsi/ للسماح بعنوان URL الرئيسي لإطارات iframe الخاصة بزرّي One Tap و"تسجيل الدخول باستخدام حساب Google".
script-src، أضِف https://accounts.google.com/gsi/client للسماح بعنوان URL الخاص بمكتبة JavaScript الخاصة بخدمات Google Identity.
style-src، أضِف https://accounts.google.com/gsi/style للسماح بعنوان URL الخاص بأوراق أنماط "خدمات هوية Google".
في حال استخدام التوجيه default-src، يكون هذا التوجيه بديلاً في حال عدم تحديد أي من التوجيهات السابقة (connect-src أو frame-src أو script-src أو style-src)، لذا أضِف https://accounts.google.com/gsi/ للسماح للصفحة بتحميل عنوان URL الرئيسي لنقاط نهاية من جهة الخادم في "خدمات هوية Google".
تجنَّب إدراج عناوين URL فردية لنظام المعلومات الجغرافية عند استخدام connect-src. ويساعد ذلك في تقليل حالات التعطُّل عند تعديل نظام المعلومات الجغرافية. على سبيل المثال، بدلاً من إضافة
https://accounts.google.com/gsi/status استخدِم عنوان URL الرئيسي لنظام GIS
https://accounts.google.com/gsi/.
يسمح عنوان الاستجابة المثال هذا لخدمات Google لتحديد الهوية بتحميل وتنفيذ ما يلي بنجاح:
قد يتطلّب زر "تسجيل الدخول باستخدام حساب Google" وميزة "النقرة الواحدة من Google" إجراء تغييرات على 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."]]
