كيفية تمكين تسجيل الدخول إلى Google بنقرة واحدة في WordPress

نشرت: 2023-03-20

عندما يتمكن المستخدمون من تسجيل الدخول باستخدام حساب Google الخاص بهم ، فلن يضطروا إلى إنشاء اسم مستخدم وكلمة مرور آخرين أو تذكرهما أو مراقبتهما من أجل الوصول إلى موقع الويب الخاص بك. يتم توفير وقتهم ، وزيادة معدلات التحويل الخاصة بك. في هذا البرنامج التعليمي ، سنوضح لك كيفية دمج تسجيل دخول Google بنقرة واحدة إلى WordPress.

لماذا تضمين تسجيل الدخول إلى Google في WordPress؟

يواصل العديد من مستخدمي الإنترنت استخدام حساباتهم في Google. يتيح لهم ذلك الوصول بسرعة إلى منتجات Google مثل Gmail و Drive والمستندات دون الحاجة إلى تسجيل الدخول بشكل منفصل لكل منتج.

عند تمكين تسجيل الدخول إلى Google بنقرة واحدة على صفحة تسجيل الدخول إلى WordPress الخاصة بك ، سيتمكن المستخدمون لديك من فعل الشيء نفسه على موقع الويب الخاص بك. يمكن للمستخدمين توفير الوقت عن طريق تسجيل الدخول بسرعة باستخدام حساب Google الخاص بهم. هذا يلغي حاجة المستخدمين إلى إدخال تفاصيل تسجيل الدخول الخاصة بهم في كل مرة.

إذا كان لديك مدونة WordPress أساسية فقط ، فقد لا تجد هذه الوظيفة مفيدة. ولكن ، إذا كانت شركتك تستخدم Google Workspace لعناوين بريد إلكتروني احترافية للعمل ، فيمكن لأعضاء فريقك تسجيل الدخول باستخدام حسابات تطبيقات Google الخاصة بشركتك.

يعد خيار تسجيل الدخول الفردي ، مثل تسجيل الدخول إلى Google بنقرة واحدة ، مفيدًا للغاية أيضًا لأي موقع ويب يتطلب من المستخدمين تسجيل الدخول ، مثل مواقع الويب متعددة المؤلفين ، ومواقع العضوية ، ومواقع الويب التي تبيع الدورات التدريبية عبر الإنترنت. مع ذلك ، دعنا نلقي نظرة على كيفية دمج تسجيل الدخول بنقرة واحدة من Google إلى موقع WordPress الخاص بك.

كيفية تمكين تسجيل الدخول إلى Google بنقرة واحدة في WordPress؟

أولاً ، قم بتنزيل وتثبيت المكون الإضافي Nextend Social Login and Registration. يرجى زيارة دليل المبتدئين الخاص بنا لتثبيت مكون WordPress الإضافي للحصول على معلومات إضافية.

في هذا الدرس ، سنستخدم المكون الإضافي المجاني الذي يسمح بتسجيل الدخول إلى Google و Twitter و Facebook. يحتوي Nextend Social Login أيضًا على نسخة تجارية تضيف تسجيل الدخول الاجتماعي إلى مجموعة متنوعة من مواقع الويب ، بما في ذلك PayPal و Slack و TikTok.

انتقل إلى الإعدادات »Nextend Social Login في منطقة مسؤول WordPress بعد التنشيط. تعرض هذه الشاشة العديد من خيارات تسجيل الدخول الاجتماعي المتاحة.

One-Click Google Login plugin

انقر فوق الزر "البدء" أسفل شعار Google لإضافة معلومات تسجيل دخول Google إلى موقع الويب الخاص بك على WordPress. ستكون خطوتك الأولى ، كما ترى ، هي تطوير تطبيق Google. لا تخيف من احتمال إنشاء تطبيق Google.

One-Click Google Login app

لا تحتاج إلى معرفة أي رمز ، وسنرشدك خلال العملية برمتها.

تطوير تطبيق Google

ستحتاج إلى الانتقال بين لوحة تحكم WordPress الخاصة بك و Google Developers Console لإنشاء هذا التطبيق. من الجيد ترك لوحة معلومات WordPress مفتوحة في علامة تبويب المتصفح الحالية أثناء فتح واحدة جديدة.

يمكنك الآن الوصول إلى صفحة Google Developers Console. إذا لم تكن قد قمت بتسجيل الدخول بالفعل ، فسيُطلب منك القيام بذلك باستخدام حساب Google الخاص بك.

الخطوة التالية هي تحديد مشروع من القائمة العلوية. للمتابعة ، ستظهر نافذة منبثقة ، وستحتاج إلى النقر فوق الزر "إنشاء مشروع".

new project

سيوجهك هذا إلى صفحة المشاريع الجديدة. يجب عليك إدخال اسم المشروع واختيار موقع. يمكن أن يكون اسم المشروع أي شيء تريده ، على سبيل المثال ، "تسجيل الدخول إلى Google".

إذا قمت بتسجيل الدخول باستخدام حساب Google Workspace ، فسيتم ملء الموقع تلقائيًا باسم مؤسستك. إذا لم يكن الأمر كذلك ، فاتركه ببساطة على أنه "لا توجد منظمة".

cloud google

للمتابعة ، انقر فوق الزر "إنشاء". سيتم نقلك إلى 'APIs & Services dashboard now. في هذه الصفحة ، حدد "شاشة موافقة OAuth" من الخيار الأيمن.

consent screen

يمكنك تحديد نوع الشخص الذي تريد تمكينه لتسجيل الدخول هنا.

اختر "داخلي" إذا كان الأشخاص الذين لديهم حساب Google الخاص بشركتك فقط قادرين على تسجيل الدخول. إذا كان المستخدمون لديهم عناوين بريد إلكتروني خارج مؤسستك ، فيجب عليك تحديد "خارجي". شخص ما لديه حساب @ gmail.com ، على سبيل المثال ، بدلاً من عنوان @ yourcompanyemail.com.

عندما تكون مستعدًا للمتابعة ، انقر فوق الزر "إنشاء". يمكنك الآن البدء في إضافة معلومات حول تطبيقك.

app registration

أولاً ، أدخل اسم شركتك في منطقة اسم التطبيق. عند تسجيل الدخول ، سيرى المستخدم شيئًا مثل ، "تطلب خدمات Smith Training Services الوصول إلى حساب Google الخاص بك."

يجب عليك أيضًا إدخال عنوان البريد الإلكتروني الذي قمت بتسجيل الدخول من خلاله إلى Google. يتيح ذلك للمستخدمين الاستعلام عن شاشة تسجيل الدخول إلى Google.

بعد ذلك ، قم بالتمرير لأسفل إلى منطقة "مجال التطبيق". أضف روابط إلى الصفحة الرئيسية لموقع الويب الخاص بك وصفحة سياسة الخصوصية وصفحة شروط الخدمة هنا.

app domain

ثم ، انقر فوق خيار "إضافة مجال" لإدخال اسم المجال لموقع الويب الخاص بك ، مثل "example.com". إذا كنت ترغب في إضافة تسجيل الدخول إلى Google بنقرة واحدة إلى أكثر من موقع ويب ، فيمكنك القيام بذلك بالنقر فوق الخيار "+ إضافة مجال".

app registration

أخيرًا ، يجب عليك إدخال عنوان بريد إلكتروني واحد أو أكثر حتى تتمكن Google من إطلاعك على أي تغييرات تطرأ على مشروعك. عند الانتهاء من ذلك ، انقر فوق الخيار "حفظ ومتابعة".

سيتم نقلك بعد ذلك إلى صفحات النطاقات ومستخدمي الاختبار. ما عليك سوى التمرير إلى الجزء السفلي من هاتين الصفحتين والنقر فوق الخيار "حفظ ومتابعة".

scopes

ستعرض عليك الصفحة الأخيرة من هذه الخطوة ملخصًا لإعدادات شاشة موافقة OAuth. تتمثل الخطوة التالية في إنشاء المفاتيح المطلوبة بواسطة المكون الإضافي للاتصال بـ Google Cloud. من القائمة اليمنى ، حدد "بيانات الاعتماد" ، ثم انقر فوق "+ خيار إنشاء بيانات الاعتماد في الجزء العلوي من الشاشة. يجب عليك تحديد الخيار "معرّف عميل OAuth".

API keys One-Click Google Login

سيؤدي هذا إلى إعادة توجيهك إلى صفحة "إنشاء معرّف عميل OAuth". اختر "تطبيق ويب" من القائمة المنسدلة "نوع التطبيق".

Client ID

سيتم تحديث الموقع مع بعض الإعدادات. انتقل لأسفل إلى المنطقة التي تحمل عنوان "عناوين URL المعتمدة لإعادة التوجيه" وانقر فوق الزر "+ إضافة URI".

أدخل الآن عنوان URL التالي:

http://example.com/wp-login.php؟loginSocial=google

احرص على تغيير example.com بعنوان موقع الويب الخاص بك.

Client URI

بعد ذلك ، يجب النقر فوق الزر "إنشاء" لحفظ الخيار. قد يستغرق التعديل ما بين خمس دقائق إلى عدة ساعات حتى يدخل حيز التنفيذ.

تم إنشاء عميل OAuth بنجاح!

ستظهر نافذة بها "معرف العميل الخاص بك" و "سر العميل". يجب نسخ هذه المفاتيح ولصقها في صفحة إعدادات البرنامج المساعد في منطقة إدارة WordPress الخاصة بك.

ما عليك سوى النقر فوق رمز "نسخ" الموجود على اليمين لنسخ كل مفتاح واحدًا تلو الآخر.

client created

بما في ذلك مفاتيح جوجل في البرنامج المساعد الخاص بك

عد الآن إلى علامة تبويب متصفح موقع الويب الخاص بك وحدد علامة التبويب "الإعدادات" من قائمة الإعدادات » Nextend Social Login . هناك حقول لمعرف العميل وسر العميل هنا.

يجب عليك نسخ ولصق مفاتيحك من Google Cloud Console في هذه المناطق.

Including Google Keys in Your Plugin

بعد ذلك ، تأكد من النقر فوق الزر "حفظ التغييرات" لحفظ إعداداتك.

يجب عليك الآن التحقق من صحة الإعدادات. هذا مهم لأنك لا تريد أن يواجه المستخدمون الحقيقيون صعوبات أثناء محاولة تسجيل الدخول إلى موقع الويب الخاص بك.

Save Changes button

ما عليك سوى النقر فوق الزر "التحقق من الإعدادات" ، وسيضمن المكون الإضافي تشغيل تطبيق Google الذي أنشأته.

إذا قمت بإجراء التعليمات السابقة بشكل صحيح ، يجب أن ترى رسالة تقول "يعمل بشكل جيد - معطل".

you should see a message

يمكنك الآن النقر فوق الزر "تمكين" بثقة للسماح للأشخاص بتسجيل الوصول باستخدام معرف Google الخاص بهم.

سيظهر إشعار للتحقق من تمكين تسجيل الدخول إلى Google الآن.

اختيار نمط الزر والتسمية

يعد نمط الزر الافتراضي والتسمية في Nextend تقليديين إلى حد ما وسيعملان مع معظم مواقع الويب. ومع ذلك ، يمكنك تعديلها بالانتقال إلى خيار "الأزرار" في الجزء العلوي من الشاشة.

سترى الآن جميع الأنماط المتاحة لزر تسجيل الدخول الاجتماعي. لاستخدام نمط مختلف ، حدد فقط زر الاختيار الخاص به.

Choosing a Button Style

بعد ذلك ، يمكنك تعديل صياغة الزر عن طريق تغيير المحتوى في حقل "تسجيل الدخول".

إذا اخترت ، يمكنك استخدام HTML لإضافة بعض التنسيقات الأساسية إلى تسمية تسجيل الدخول. على سبيل المثال ، يمكن استخدام علامتي <b> و </ b> لجعل النص غامقًا.

Choosing Labeling

يمكنك أيضًا تغيير خياري "تسمية الاتصال" و "إلغاء التصنيف" ، اللذان يسمحان للأشخاص بالاتصال وفصل حساباتهم على Google من موقع الويب الخاص بك. يمكن للمستخدمين التقنيين إنشاء زر تسجيل الدخول إلى Google الخاص بهم باستخدام رمز HTML للأزرار.

لحفظ إعداداتك ، تأكد من النقر فوق الخيار "حفظ التغييرات".

إزالة تطبيق Google الخاص بك من وضع الاختبار

مرة أخرى في علامة تبويب متصفح Google Cloud ، هناك شيء آخر يجب عليك القيام به. يجب أن تظل النافذة المنبثقة التي تحتوي على معرف العميل وسر العميل مرئية. يمكنك إغلاق النافذة المنبثقة بالنقر فوق الزر "موافق" في الأسفل.

يجب عليك الآن تحديد "شاشة موافقة OAuth" من القائمة اليمنى.

تطبيق Google الخاص بك في وضع "الاختبار" ، كما ترى. يمكّنك هذا من اختبار تطبيقك مع مجموعة صغيرة من الأشخاص. يمكنك الآن نقله إلى وضع "الإنتاج" بعد تلقي إشارة "يعمل على ما يرام" بعد التحقق من صحة الإعدادات باستخدام المكون الإضافي.

testing

يمكنك تحقيق ذلك بالنقر فوق الزر "نشر التطبيق". بعد ذلك ، سوف تتلقى نافذة منبثقة بعنوان "الدفع للإنتاج؟"

ما عليك سوى النقر فوق "تأكيد" للسماح للجميع باستخدام معلومات تسجيل الدخول إلى Google بخطوة واحدة على موقعك.

push to production

إذا اتبعت هذه التعليمات بعناية ، فيجب أن تكون حالة التحقق الآن "التحقق غير مطلوب".

تطبيقك متاح الآن لجميع مستخدمي Google.

verification status

عندما ينضم المستخدمون إلى موقع الويب الخاص بك ، سيكون لديهم الآن خيار استخدام Google.

ومع ذلك ، يمكنهم الاستمرار في تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور المعتادين في WordPress إذا رغبوا في ذلك.

WordPress login with Google

تذكر أنه لا يمكن للأشخاص تسجيل الدخول إلا باستخدام عنوان حساب Google الذي استخدموه على موقع الويب الخاص بك. بالإضافة إلى ذلك ، إذا قمت بتمكين تسجيل المستخدم على موقع WordPress الخاص بك ، فيمكن للأشخاص التسجيل على الفور باستخدام تسجيل الدخول إلى Google بنقرة واحدة.

إذا كنت تريد وضع زر تسجيل الدخول إلى Google في مكان آخر على موقع الويب الخاص بك ، فيمكنك القيام بذلك باستخدام رمز قصير. يمكنك معرفة المزيد من خلال الانتقال إلى علامة التبويب "الاستخدام" في Nextend.

googleloginshortcode

تغليف

يمكن أن يؤدي دمج تسجيل دخول Google بنقرة واحدة إلى موقع الويب الخاص بك على WordPress إلى توفير وقت المستخدمين وتحسين معدلات التحويل. هذا مفيد بشكل خاص لمواقع الويب التي تتطلب من المستخدمين تسجيل الدخول ، مثل مواقع الويب متعددة المؤلفين ، ومواقع العضوية ، ومواقع الويب التي تبيع الدورات التدريبية عبر الإنترنت. لتمكين هذه الميزة ، تحتاج إلى تنزيل وتثبيت المكون الإضافي Nextend Social Login and Registration وإنشاء تطبيق Google باتباع الخطوات الموضحة في هذا البرنامج التعليمي. باستخدام ميزة تسجيل الدخول إلى Google بنقرة واحدة ، يمكن للمستخدمين تسجيل الدخول بسرعة باستخدام حساب Google الخاص بهم دون الحاجة إلى إدخال تفاصيل تسجيل الدخول الخاصة بهم في كل مرة.