راهنمای کامل راه‌اندازی “ورود با گوگل” در صفحه ورود سایت

می‌خوای پروسه ورود و ثبت‌نام توی سایت وردپرسی یا سایت اختصاصی‌تو ساده‌تر کنی؟ با راهنمای جامع یوبنر، دکمه “ورود با گوگل” رو به راحتی اضافه کن! این کار هم ثبت‌نام کاربرا رو سریع‌تر می‌کنه، هم نرخ تبدیلتو می‌بره بالا و هم کلا تجربه کاربری رو بهتر می‌کنه. تو این راهنما در یوبنر، قدم به قدم باهات پیش میریم، از انتخاب بهترین روش تا رفع مشکلات احتمالی. چه سایتت وردپرسی باشه، چه یه چیز دیگه، این راهنما به دردت می‌خوره.

چرا ورود با گوگل ؟

امروزه همه دنبال سرعت و آسونی هستن. دیگه حوصله ندارن یه اکانت دیگه بسازن و یه عالمه رمز عبور دیگه رو یادشون بمونه. “ورود با گوگل” (یا فیسبوک و غیره) دقیقا این مشکل رو حل می‌کنه.

اینطوری کاربرا می‌تونن با همون اکانت گوگلشون وارد سایت شما بشن – یه پروسه سریع، امن و آشنا. این باعث میشه نرخ تبدیل بره بالا، چون هرچی مراحل ثبت‌نام کمتر باشه، آدمای بیشتری ثبت‌نام می‌کنن. تازه، سیستم احراز هویت گوگل یه لایه امنیتی قوی هم اضافه می‌کنه و از اطلاعات کاربرا محافظت می‌کنه.

چطور “ورود با گوگل” رو توی وردپرس راه‌اندازی کنیم؟

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

• WP Google Login: یه افزونه ساده و بی‌دردسر، عالی برای کسایی که تازه کارن.
• OneAll: یه افزونه برای ورود با شبکه‌های اجتماعی که گوگل، فیسبوک و خیلی جاهای دیگه رو هم پشتیبانی می‌کنه.
• Social Login: یه افزونه دیگه با امکانات زیاد و قابلیت شخصی‌سازی بالا
• آموزش اضافه‌کردن دکمه ورود با گوگل به پنل ووکامرس بدون پلاگین

تنظیم اطلاعات ورود گوگل برای وب‌اپلیکیشن (وردپرس یا غیر وردپرس)

اگر اول کار قرار باشه یک دید کلی از مراحلی که باید انجام بدید به شما ارائه کنم، فرقی نمی‌کنه از چه افزونه‌ای استفاده می‌کنین، برای راه‌اندازی “ورود با گوگل” باید یه پروژه توی Google Cloud Platform (GCP)  بسازین و دو کد Client ID و Client Secret رو دریافت کنین، با داشتن این دوتا کد همه چیز رو تموم شده بدونین. نگران نباشین، مستندات افزونه‌ای که انتخاب کردین، قدم به قدم این مراحل رو بهتون توضیح میده. ممکنه لازم باشه یه پروژه جدید بسازین، Google People API رو فعال کنین و OAuth 2.0 client credentials بسازین. یکم پیچیده به نظر میاد، ولی با یه کم دقت حل میشه!

وقتی این کارا رو انجام دادین، کافیه این اطلاعات رو توی تنظیمات افزونه وردپرستون وارد کنین. (همه افزونه‌های ورود با گوگل وردپرس دو کد گفته شده Client ID و Client Secret رو از شما می‌خوان)  بعدش افزونه رو فعال کنین و درنهایت دکمه “ورود با گوگل” توی صفحه ورود سایتتون ظاهر میشه. یادتون باشه بعد از راه‌اندازی، حتما همه چیز رو تست کنین تا مطمئن شین درست کار می‌کنه.

1. یه پروژه توی گوگل کلود بسازین (یا از یه پروژه موجود استفاده کنین)

 در مرحله اول فضای Google Cloud Console رو با کلیک روی این لینک باز کنید. گه هنوز پروژه نداری، کنار لوگو گوگل در سمت بالا چپ روی My Project کلیک کن و در صفحه باز شده،  روی دکمه + New Project کلیک کن. یه اسم خوب برای پروژه‌ات انتخاب کن، مثلا “ورود به وب‌اپلیکیشن من یا اسم وبسایت.

روی + Create Client کلیک کنید. در قسمت Application Type گزینه Web Application رو انتخاب کنید، چون قصد دارید دکمه ورود با گوگل رو برای سایت تنظیم کنید. بعد از این کار تنظیمات اضافه‌ای برای شما نمایش داده می‌شه. در قسمت Name یک نام برای اپلیکیشن خود انتخاب کنید، این نام فقط در دید شما قرار می‌گیره، بطور مثال میتونید اسم سایتتون رو وارد کنید .

2.شخصی سازی اطلاعات کاربری و اپلیکیشن ورود به گوگل

در پنل باز شده در قسمت Overview توی پروژه گوگل کلود، از منوی کشویی سمت چپ APIs & Services > OAuth consent screen را انتخاب کنید. نمایی کلی از اطلاعات ورود کاربران و اطلاعات مرتبط با اپلیکیشن خودتون رو مشاهده می‌کنید. در این مرحله  تب های منو سمت چپ شامل موارد Branding, Audience, Data Access را یکی یکی باهم شخصی سازی می‌کنیم. تب Client رو در مرحله سوم بررسی می‌کنیم چون یک مقدار تخصصی تره.

تب Branding (شخصی سازی برند)

اطلاعات لازم رو وارد کن: اسم برنامه، ایمیل پشتیبانی، اطلاعات تماس توسعه‌دهنده و لوگو سایتتون که برای کاربران در صفحه ورود نمایش داده می‌شه رو آپلود کنید.
.نکته: توصیه می‌کنیم برای برنامه خود لوگو آپلود نکنید. در صورت آپلود، برنامه شما باید فرآیند تأیید را طی کند. این فرآیند ممکن است ۴ تا ۶ هفته طول بکشد

تب Audience (تنظیمات کاربران)

نوع صفحه رو انتخاب کن External برای برنامه‌هایی که همه می‌تونن بهشون دسترسی داشته باشن، Internal برای برنامه‌هایی که فقط توی سازمان شما استفاده میشن. این تنظیمات رو روی External تنظیم کنید.

تنظیمات تب‌های Data Access شامل Scope ها رو دست نزنید. این تنظیمات اطلاعاتی هست که گوگل از کاربران شما دریافت می‌کنه و این اطلاعات بصورت پیشفرض ایمیل و نام کاربر هستند که الزامیه، پیشنهاد می‌کنیم چیزی اضافه نکنید.

پس از انجام این کار، به بخش App Domain برو. در اینجا، باید لینک‌هایی به صفحه اصلی وب‌سایت، صفحه سیاست حفظ حریم خصوصی و صفحه شرایط خدمات سایتتون رو اضافه کنید. میتونید در فیلد های Privacy و Terms of service آدرس های یکسان وارد کنید.

در نهایت تنظیمات رو بررسی و ذخیره کن.

3. تنظیمات و پیکربندی Clients

حال در همین صفحه‌ای که هستید روی Client در منوی سمت چپ کلیک کنید. تا بحال اطلاعاتی کلی رو وارد کرده بودید. ولی اینجا بصورت تخصصی برای سایتتون فرایند ورود با گوگل رو می‌سازید. حالا در تب باز شده روی Create client کلیک کنید.

Web application رو به عنوان نوع برنامه انتخاب کن. یک اسم برای برنامتون در قسمت Name وارد کنید. این اسم به کاربرا هنگام ورود نمایش داده می‌شه.

حالا از شما دو آدرس‌ بازگشت معتبر (Authorized redirect URIs) و مبدا جاوا اسکریپت (Authorized JavaScript origins) رو میخواد. آدرس بازگشت مشخص می‌کنه که بعد از احراز هویت، گوگل کاربر رو به کجا بفرسته. مبدا جاوا اسکریپت هم آدرسی از سایت هست که “ورود با گوگل” توی اون اجرا میشه.

دقت کنید آدرس هایی که می‌گم رو عیناً بدون هیچ فاصله و کاراکتر اضافه وارد کنید وگرنه دکمه ورود به درستی کار نمیکنه. در قسمت Authorized JavaScript origins آدرس سایت خودتون با https و بدون هیچ کاراکتر اضافه مانند عکس زیر رو وارد کنید.

در قسمت Authorized redirect URIs آدرسی که کاربر باید بعد از وارد شدن به اونجا منتقل شه رو وارد کنید. بطور مثال وقتی قصد دارید کاربر به  پنل ووکامرس به آدرس yoursite.ir/my-account منتقل بشه، همین آدرس رو در کادر زیر وارد کنید. یا مثلا وقتی می‌خواید کاربر بعد از ورود به وردپرس به صفحه yoursite.ir/wp-admin منتقل بشه، عیناً همین آدرس رو وارد کنید. در نظر داشته باشید برای ورود به پنل ووکامرس علاوه بر آدرس پنل کاربری ووکامرس باید آدرس‌های
https://ubanner.ir/?wc-api=auth&done=google
https://ubanner.ir/uaccount/?google_login=1
را بصورت دقیق وارد کنید.

بجای ubanner.ir آدرس وب‌سایت خودتون رو وارد کنید. و بجای uaccount آدرسی که برای پنل کاربری ووکامرس خود انتخاب کردید را وارد کنید. این عبارت بصورت پیشفرض برای ووکامرس my-account است.

5. وقتی تنظیمات رو ذخیره کردی، از منو سمت چپ دوباره روی Client کلیک کن. اینجا می‌تونی ببینی که برنامت با موفقیت ساخته شده. در ردیف برنامه‌ای که ساختی روی علامت فلش به سمت پائین کلیک کن تا Client ID و Client Secret بهت نمایش داده بشن. یادت باشه این کدهارو به هیچ کسی ندی محصوصا Client Secret رو.

4. ادغام با برنامه‌تون

حالا که این دوتا کد رو داری، اونا رو توی کد برنامه‌ات یا افزونه وردپرست  اضافه کن. این کار شامل استفاده از کتابخانه Google Sign-In (یا یه کتابخانه مشابه اگه از یه فریم‌ورک backend استفاده می‌کنی) میشه. جزئیات دقیق پیاده‌سازی به تکنولوژی‌هایی که استفاده می‌کنی (مثلا جاوااسکریپت، PHP، پایتون) بستگی داره. برای اطلاعات بیشتر، به مستندات رسمی گوگل مراجعه کن.

راه‌اندازی “ورود با گوگل” توی سایت‌های غیر وردپرسی

امروزه خیلی از اسکریپت‌های آماده و منابع اولیه این قابلیت رو دارن که اطلاعات ورود گوگل رو بهشون اضافه کنین. ولی اگه ندارن، این کار یه کم تخصص فنی بیشتری لازم داره و معمولا باید با کد backend سایتتون (مثلا PHP، Node.js، پایتون) کار کنین. اینجا یه نمای کلی از کارایی که باید انجام بدین رو براتون میگم:

1. یه پروژه Firebase بسازین: Firebase، پلتفرم توسعه برنامه‌های موبایل و وب گوگل، این پروسه رو ساده‌تر می‌کنه. یه پروژه جدید بسازین و اون رو برای احراز هویت تنظیم کنین.
2. ورود با گوگل رو فعال کنین: توی پروژه Firebase، ورود با گوگل رو به عنوان یه روش احراز هویت فعال کنین.
3. اطلاعات کاربری رو بگیرین: فایل تنظیمات Firebase رو دریافت کنین (معمولا google-services.json برای موبایل، یا یه چیزی شبیه به اون برای وب).
4. SDK رو ادغام کنین: SDK جاوااسکریپت Firebase رو توی کد سایتتون قرار بدین.
5. دکمه ورود رو پیاده‌سازی کنین: از کتابخانه احراز هویت Firebase برای پیاده‌سازی قابلیت ورود استفاده کنین. این کار شامل اضافه کردن کدی به سایتتون میشه که یه دکمه ایجاد می‌کنه، پروسه احراز هویت رو مدیریت می‌کنه و بعد از ورود موفقیت‌آمیز، کاربرا رو به صفحه مناسب هدایت می‌کنه.
6. داده‌های کاربر رو مدیریت کنین: وقتی کاربر وارد شد، به اطلاعات پروفایل کاربر به صورت امن دسترسی پیدا کنین و برای استفاده در برنامه‌تون ذخیره کنین. همیشه داده‌های کاربر رو با مسئولیت‌پذیری و مطابق با قوانین حفظ حریم خصوصی مدیریت کنین.

این پروسه ممکنه یکم پیچیده باشه و ممکنه به کمک یه توسعه‌دهنده نیاز داشته باشین. ولی تجربه کاربری بهتر و امنیت بیشتری که به دست میارین، ارزشش رو داره.

سوالات متداول (FAQ)

س: آیا “ورود با گوگل” امنه؟

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

س: اگه بخوام گزینه‌های ورود با شبکه‌های اجتماعی دیگه رو هم اضافه کنم چی؟

ج: خیلی از افزونه‌ها و پلتفرم‌ها از چندین ارائه دهنده پشتیبانی می‌کنن، از جمله فیسبوک، توییتر و بقیه.

س: می‌تونم ظاهر دکمه “ورود با گوگل” رو سفارشی کنم؟

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

س: اگه کاربر اکانت گوگل نداشته باشه چی میشه؟

ج: برای استفاده از این روش ورود، باید یه اکانت بسازه. بهتره روش‌های ورود جایگزین مثل ایمیل/رمز عبور رو هم در نظر بگیرین.

س: چطور می‌تونم تلاش‌های ورود رو پیگیری کنم؟

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

س: اگه یه خطای احراز هویت دریافت کنم چیکار کنم؟

ج: آدرس‌های بازگشت رو دوباره بررسی کنین و مطمئن شین فایل اطلاعات کاربری به درستی توی برنامه‌تون تنظیم شده باشه. Google Cloud Console ممکنه پیام‌های خطای مفیدی ارائه بده.

س: آیا می‌تونم از این روش با فیسبوک یا سایر ورودهای اجتماعی استفاده کنم؟

ج: بله، خیلی از پلتفرم‌ها امکان ادغام با چند ارائه دهنده رو دارن.

س: برنامه من از یه وب سرور استاندارد استفاده نمی‌کنه. چیکار کنم؟

ج: باید آدرس‌های بازگشت و تنظیمات رو با پیکربندی خاص برنامه‌تون تطبیق بدین.

س: چطور باید داده‌های کاربر رو بعد از ورود به صورت امن مدیریت کنم؟

ج: همیشه داده‌های کاربر رو با مسئولیت‌پذیریو مطابق با قوانین حفظ حریم خصوصی (مثل GDPR و CCPA) مدیریت کنین. از ذخیره اطلاعات حساس غیر ضروری خودداری کنین.

س: تفاوت Client ID و Client Secret چیه؟

ج: Client ID برنامه‌تون رو به گوگل معرفی می‌کنه، در حالی که Client Secret یه کلید مخفیه که برای مجوز دادن به درخواست‌ها استفاده میشه. Client Secret رو امن نگه دارین و هرگز اونو توی کد سمت کاربر نمایش ندین.

امیدوارم این راهنما براتون مفید بوده باشه! اگه سوالی دارین، توی کامنت‌ها بپرسین حتما جواب داده میشه. همچنین اگر واقعا این کار رو برای خودتون میسر نمیدونید، یوبنر به‌عنوان کارگذاری معتمد این کار رو برای شما انجام خواهد داد. کافیه با ما ارتباط برقرار کنی.