سلام دوستان، این اولین مطلب از سری مطالب فنی در حوزه امنیت و هویت دیجیتال هست که قصد دارم در طی چند پست به پیاده سازی موضوعات مختلف بپردازیم، ادبیات این مقاله مبتدی هست که کلیه دوستان بتوانند از مطلب استفاده کنند، پیشاپیش از دوستان حرفه ای عذرخواهی میکنم.
همونطور که میدونید چهارچوب آنگولار یکی از قویترین چهارچوب های سمت کلاینت و برنامه های وب تک صفحه ای و موبایل هست که امروزه در بسیاری از پروژه های کوچک و بزرگ استفاده میشود.
امروز قصد داریم با چند خط کد ساده و کپی و پیست چند خط کد، احراز هویت با استفاده از شبکه های اجتماعی رو به برنامه مون اضافه کنیم، با اینکار در واقع شما relying party یا RP برای گوگل محسوب میشوید و بعنوان یک برنامه که به هویت های گوگل اعتماد میکند به کاربران گوگل این اجازه را میدهید تا به برنامه شما وارد شوند (Login کنند). قبلا در مورد سامانه های احراز هویت مانند امتا در مقاله جداگانه ای صحبت کردیم، حتی میتوانید با مطالعه دستورالعمل اتصال امتا به برنامه تان از این سامانه بعنوان پذیرنده یا RP استفاده کنید.
کتابخانه ای که امروز معرفی میکنیم قابلیت افزودن ارائه دهنده هویت (Identity Provider) مانند امتا را هم دارد.
با کوچکترین سرچی که در گوگل کنید اولین نتیجه ای که برای شما احصاء میشود کتابخانه ای نیست جز angularx-social-login .
اولین پیش نیاز این مقاله داشتن یک ابزار مدیریت و ویرایش کد مانند ویژوال استادیو کد هست، که این ابزار یک ابزار رایگان هست و میتونید از سایتش دانلود و نصب کنید و سپس تاحدودی آشنایی با HTML، CSS و جاوا اسکریپت.
برای اجرای آنگولار اول باید Node.JS را نصب کنید، نسخه مناسب سیستم عامل خود را از سایت Node.JS دانلود و نصب کنید، همچنین برای مدیریت بسته های آنگولار نیاز به ابزار NPM داریم ، ابزار مدیریت بسته های ان پی ام را هم نصب کنید (البته فکر کنم در نسخه های جدید با نصب نود، ابزار ان پی ام هم نصب میشود) و با اجرای دستور زیر رابط دستوری آنگولار را برای اجرای فرامین آنگولار در Command Prompt ویندوز اجرا کنید:
npm install -g @angular/cli
و با اجرای دستور زیر یک پروژه جدید از نوع آنگولار ایجاد کنید:
ng new my-app
پروژه جدید شما در مسیر C:\Users\Alireza (در سیستم عامل ویندوز) نصب میشود و میتوانید به فایل های آن دسترسی داشته باشید، در اینجا اسم پروژه ما my-app هست، شما میتونید هر اسمی به دلخواه انتخاب کنید، با اجرای دستور زیر به مسیر اصلی پروژه میروید و با خط دوم برنامه را اجرا میکنید:
cd my-app
ng serve --open
بعداز اجرای دستور فوق برنامه در آدرس http://localhost:4200 اجرا خواهد شد، قاعدتا چون ما تغییری در پروژه ایجاد نکردیم چیزی که در مرورگر مشاهده میکنید صفحه پیشفرض آنگولار در مرورگر خواهد بود:
در مسیر اصلی برنامه یعنی C:\Users\Alireza\my-app (البته به جای Alireza نام کاربری خودتون هست ;) و ببخشید اگه اینو توضیح دادم و شما میدونستید ، بهرحال پیشفرض ما در این مطلب افراد مبتدی هست) وارد شوید و در مسیر بالا راست کلیک کنید و سپس بر روی Open with Code کلیک کنید تا پروژه در Visual Studio Code باز شود برای تغییرات بعدی.
حال بر میگردیم به رابط خط فرمان ویندوز (Command Prompt)، با اجرای دستور زیر کتابخانه احراز هویت اجتماعی را در پروژه تان دانلود کنید (دقت کنید الان خط فرمان در دایرکتوری پروژه هست و نه دایرکتوری دیگه) :
npm i angularx-social-login
در صفحه اصلی این پروژه خیلی ساده و روان شیوه افزودن این کتابخانه به پروژه شما بیان شده برای همین از کپی و پیست کردن و تکرار کدها اجتناب میکنم و فقط به عنوان یک توضیح مختصر شما باید در فایل app.module.ts کتابخانه های مورد استفاده را import کنید و در فایل های app.component.ys و app.component.html تغییرات لازم را اعمال کنید و در نهایت با اجرای دستور زیر برنامه را اجرا کنید تا نتیجه را ببینید:
ng serve --open
با اجرای این دستور، اگر کدهای پروژه تان را بصورت صحیح تغییر داده باشید صفحه ای مشابه صفحه زیر در مرورگر خود خواهید دید :
در واقع کاربر شما میتوانید با یکی از حسابهای کاربری آمازون، فیسبوک یا گوگل در برنامه شما لاگ این کند، به همین سادگی شما یک احراز هویت اجتماعی رو به برنامه تون اضافه کردید !
نصب کتابخانه :
مشاهده دمو :
دانلود سورس کد :
