ساخت سیستم عضویت و ورود در سایت با گوگل با Api و کتابخانه client گوگل بسیار آسان است بدین صورت است که خیلی از سایت ها هستند که توی بخش عضویت شما میتونید با ایدی گوگل خودتون عضو بشید ,اینگونه که شما روی یه دکمه کلیک میکنید و سپس به صفحه گوگل میرید و یوزر پسوورد خودتون رو میزنید , بعد از تایید کردن به صفحه سایت برمیگردید و میبینید که ورود شدید  به این روش میگویند federated login که شما با عضو بودن توی گوگل میتونید توی سایت های دیگه عضو باشید .

عضویت و لاگین در سایت با گوگل

برای ایجاد فرم عضویت و ورود در سایت با گوگل , باید مراحل زیر رو انجام بدیم:

مرحله اول: ایجاد پروژه در گوگل

شما ابتدا باید یک پروژه در گوگل ایجاد کنید , برای این کار به آدرس Google Developer Console بروید ( البته این سرویس گوگل برای ایران تحریم است و باید از نرم افزارهای تغییر آی پی استفاده کنید) و مثل تصاویر زیر اقدام به ایجاد یک پروژه ی جدید کنید

عضویت و لاگین در سایت با گوگل

 

بعد از ایجاد پروژه اون رو باز کنید و روی enable and manage APIs کلیک کنید و منتظر بمونید تا صفحه لود بشه :

عضویت و لاگین در سایت با گوگل

حالا برید روی سربرگ overview از سمت چپ صفحه کلیک کنید:

عضویت و لاگین در سایت با گوگل

حالا روی لینک Google+ API کلیک کنید و دکمه ی enable رو بزنید و بعد در سمت چپ صفحه روی Credentials کلیک کنید و بعدش روی New credentials کلیک کنید و از منوی باز شده OAuth client ID رو انتخاب کنید

عضویت و لاگین در سایت با گوگل

عضویت و لاگین در سایت با گوگل

عضویت و لاگین در سایت با گوگل

حالا Web Application رو انتخاب کنید و فیلد های مربوطه رو پر کنید

عضویت و لاگین در سایت با گوگل

در قسمت مربوط به فیلد Name نام اپلیکیشن یا برنامه ی خودتون رو بنویسید (یه نام فرضی تایپ کنید که مرتبط با پروژه ی شما باشه) و در قسمت Authorized JavaScript origins نام دامنه ی سایت خودتون یا http://localhost رو وارد کنید و در قسمت Authorized redirect URIs ادرسی رو وارد کنید که میخواید بعد از ورود شدن در گوگل , کاربران به اونجا فرستاده بشن.

عضویت و لاگین در سایت با گوگل

حالا ما به Client ID و Client secret و Redirect URI نیاز داریم , پروژه ی خودتون رو باز کنید تا این مشخصات رو ببینید , اونا رو کپی کنید و یه جایی نگهدارید و ادامه اموزش رو ببینید( دقت کنید در اینجا redirect URI در کدی که من دارم مینویسم ادرس فایل login.php است )

مرحله ی دوم : ساخت فایلی که درخواست ورود شدن رو به گوگل بفرسته

یک فایل با نام google_request.php بسازید و دستورات زیر رو توش قرار بدید:

تابعی که ما در بالا ایجاد کردیم چهارتا مقدار به عنوان ورودی میگیره که به صورت زیر توضیح میدم:

method : روش ارسال داده ها داده ها به گوگل رو مشخص میکنه , اگه ۱ باشه داده ها به صورت POST و اگه ۰ باشه داده ها به صورت GET به گوگل ارسال میشن.

url : ادرس مورد نظر ما برای ارسال داده ها هست که در اینجا باید ادرس گوگل باشه

header : هدرها یا پروتکل های HTTP رو مشخص میکنه

data : داده های مورد نظر برای ارسال رو مشخص میکنه

مرحله ی سوم : ساخت فایلی برای وارد کردن مشخصات پروژه ی گوگل خودمون , تا بتونیم از API گوگل استفاده کنیم:

یک فایل با نام config.php ایجاد کنید و دستورات زیر رو توش بنویسید

در کد بالا قسمت هایی که نوشتم do not change رو به هیچ وجه تغییر ندید. در قسمت هایی که به صورت xxxx گذاشتم تنظیماتی که از قسمت پروژه ی گوگل دریافت کردید رو وارد کنید که شامل redirect_uri و client_id و client_secret میشه , همچنین در اخر میتونید سایز عکسی که از یوزر دریافت میکنید رو به صورت image_size مشخص کنید. من در اینجا براتون ۱۰۰ پیکسل رو گذاشتم.

مرحله چهارم : در این مرحله صفحه ی ورود رو میسازیم

در این صفحه اطلاعات کاربر بعد از اینکه در اکانت گوگل خودش ورود کرد نمایش داده میشه و شما میتونید از این اطلاعات که از گوگل دریافت شده استفاده کنید و کاربر رو عضو سایت خودتون کنید.

حالا یه فایل با نام login.php بسازید و دستورات زیر رو توی اون بنویسید:

مرحله ی پنجم : ساخت صفحه ای برای نمایش اطلاعات دریافت شده از گوگل

یه فایل با نام index.php بسازید و دستورات زیر رو توش بنویسید

که نوشته Login with Google plus و وقتی که کاربر روی لینک کلیک میکنه به صفحه ی گوگل میره و بعد از ورود کردن توی گوگل دوباره به همین صفحه میاد و عکس و مشخصاتش نمایش داده میشه  به همین راحتی.

نکته : دقت کنید در اینجا redirect URI همون فایل login.php است و باید در تنظیمات گوگل خودتون نیز ادرس فایل login.php رو بزارید تا بعد از ورود شدن کاربر اطلاعات از طرف گوگل به این فایل ارسال بشه.

برای دانلود پروژه عضویت و ورود در سایت با گوگل از قسمت زیر اقدام کنید

موفق باشید

مهدی ایبک ابادی

مهدی ایبک آبادی هستم ، موسس و بنیانگذار الماس وب مسلط به زبان های برنامه نویسی HTML , CSS , PHP , JQUERY و علاقه مند به وردپرس و دنیای طراحی سایت.یکی از علایق بنده این هست که اطلاعاتمو با دیگران به اشتراک بگذارم.

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • فقط دیدگاه های فارسی تایید خواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
دیدگاه‌ها

*
*