کنترل OAuth با PHP و JS در iframe

این روزا دیگه به جای وارد کردن کلی اطلاعات برای ثبت نام و ورود از حساب های کاربری شبکه های اجتماعی و اکانت های دیگه استفاده میشه و یه راه خیلی جالب هست که در چند سال اخیر در وبسایت ها هم قابل مشاهده بوده.

پروتکل OAuth که ورژن جدیدش با اسم OAuth2 شناخته میشه یه پروتکل استاندارد هست که وظیفه احراز هویت کلاینت ها و گرفتن اطلاعات اونارو به عهده داره و برای نرم افزار های وب،دسکتاپ،موبایل و ... به کار میره

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

اخیرا طی یه پروژه که به عهده من بود قرار شد که من صفحات ورود و عضویت رو با قابلیت ورود و ثبت نام با گوگل و لینکدین طراحی کنم.پس از طراحی مجزای این صفحات کارفرما تصمیم گرفت که این صفحه ها هردوشون توی یه modal نمایش داده بشه و از اونجایی که پروژه با cms وردپرس پیاده سازی شده بود من نمیخواستم فایل header رو زیادی شلوغ کنم و چون به این پیج ها به صورت مجزا هم نیاز داشتیم تصمیم گرفتم که بصورت embed و از طریق iframe و modal بوت استرپ ۴ لاگین و رجیستر رو پیاده سازی کنم اما این باعث میشد که بخاطر مشکلات امنیتی که توی iframe ها ممکنه پیش بیاد نمیشد از طریق iframe ها وب سایت دیگه ای رو بجز خود وبسایت لود کرد پس هنگام ثبت نام و لاگین از طریق گوگل و لینکدین به مشکل برمیخوردیم.

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

function load_api(link){

window.open(link,'auth','width=450,height=600,left=200,top=150,toolbar=1,status=1');
}

یه لینک ارجاع به صفحه لاگین هم با تگ <a> ساختم و آدرس ارجاع رو که از طریق oauth گوگل گرفته بودم رو به عنوان پارامتر به تابع مشخص کردم:

<a href=&quot&quot =&quotload_api(\'<?php echo($google_api_url); ?>\');&quot>sign in with google</a>

تا اینجا یه لینک ارجاع ساخته بودم که توی یه پنجره 450 در 600 پیکسلی(فکر کنم) باز میشد و بعد از اینکه لاگین توسط گوگل انجام شد باز به صفحه لاگین redirect میشد پس من باید پنجره باز شده رو میبستم و پنجره اصلی که اصطلاحا بهش میگن opener (جاوا اسکریپت) رو هم رفرش میکردم که دیتا دوباره گرفته بشه و یوزر تشخیص داده بشه پس اینکارو انجام دادم:

echo('<script type=&quottext/javascript&quot>if (window.opener != null)else{window.opener.top.location.reload();close();}');

وظیفه این کد این بود که اول صفحه opener رو ریلود کنه بعدش هم خودش رو ببنده(پس از تایید لاگین این کد رو قرار دادم)

یه چالش جالبی بود برام که گفتم ثبتش کنم تو اینجا تا شاید بدرد یکی خورد

از چالش ها نترسین :)