ساخت سیستم ثبت نام و ورود کاربر در انگولار ۷ – آموزش انگولار ۷

  • چهارشنبه ۲۷ شهریور ۱۳۹۸
  • بازدید ۱۰۴ نفر

angular 7 user registration and login 7028 تصویر

ساخت سیستم ثبت نام و ورود کاربر در انگولار ۷

در این بخش چگونگی ساخت یک سیستم ثبت نام و ورود کاربر ساده با استفاده از Angular 7، TypeScript و webpack 4 را بررسی خواهیم کرد.

ساختار پروژه

ساختا پروژه مربوط به این آموزش بر اساس راهنمای سایت رسمی انگولار (Angular Style Guide) تنظیم شده است. به ازای هر بخشی که به پروژه اضافه می شود، یه فولدر ایجاد می کنیم (مانند home، login و register). سایر بخش های مشترک (مانند services، models، guards، Components و helpers) در داخل فولدرهایی با پیشوند “_” قرار می گیرند. در زیر می توانید ساختار مربوط به فایل های پروژه آموزشی را مشاهده کنید:

خروجی نهایی پروژه

خروجی فرم لاگین

angular 7 user registration and login 7028 1 تصویر

خروجی قرم ثبت نام

angular 7 user registration and login 7028 2 تصویر

قالب کامپوننت Alert

کامپوننت Alert شامل کدهای HTML است که برای نمایش پیام های alert در بالای صفحه استفاده می شوند.

کامپوننت Alert

کامپوننت alert هر زمان که سرویس alert هشداری دریافت کند، پیامی را به قالب ارسال می کند. این کار با subscribe کردن به متد getMessage() مربوط به سرویس alert که یک Observable باز میگرداند، انجام می شود.

Auth Guard در انگولار ۷

auth guard در انگولار به منظور جلوگیری از دسترسی غیرمجاز کاربران به مسیرها استفاده می شود. در این مثال auth guard برای محافظت کردن از صفحه home استفاده می شود.

 

توجه! شما می توانید با استفاده از DevTools مرورگر و افزودن یک شیء currentUser به local storage احراز هویت فوق را دور بزنید. اما این دور زدن فقط برای دسترسی به مسیرها و کامپوننتهای سمت کلاینت کاربرد دارد، برای دسترسی به داده های امن یک توکن احراز هویت معتبر (JWT) لازم است.

رهگیری خطای Http

Error Interceptor پاسخ های http دریافتی از API را بررسی می کند تا ببیند خطایی رخ داده است که خیر. اگر پاسخ ۴۰۱ (به معنی احراز هویت نشده) وجود داشته باشد، کاربر به طور خودکار از برنامه خارج (logout) می شود. سایر خطاها به صورت یک alert به کاربر نمایش داده می شوند. با گسترش کلاس HttpInterceptor می توانید یک رهگیر سفارشی (Custom Interceptor) ایجاد کنید تا خطاهای دریافتی از سرور را مدیریت کنید.

interceptor های http به request pipeline موجود در بخش providers فایل app.module.ts اضافه می شوند.

Fake Backend Provider در انگولار ۷

Fake Backend Provider امکان اجرای مثال بدون یک backend یا backendless را فراهم می کند. در این حالت از local storage برای ذخیره سازی اطلاعات کاربرانی که ثبت نام می کنند، استفاده می شود. به عبارت دیگر با استفاده از این سرویس می توانید API و دیتابیس اصلی را شبیه سازی کنید.

با گسترش کلاس HttpInterceptor می توانید یک رهگیر سفارشی (Custom Interceptor)  برای تغییر درخواست های http قبل از ارسال به سرور ایجاد کنید. در این مثال FakeBackendInterceptor به جای ارسال برخی از درخواست های خاص به سرور واقعی، یک پاسخ جعلی برای آن ها ایجاد می کند.

JWT Interceptor در انگولار ۷

JWT Interceptor درخواست های http برنامه را رهگیری می کند تا اگر کاربر لاگین کرده باشد، توکن احراز هویت JWT را به هدر درخواست اضافه کند. با گسترش کلاس HttpInterceptor می توانید یک رهگیر سفارشی (Custom Interceptor)  برای تغییر درخواست های http قبل از ارسال به سرور ایجاد کنید.

interceptor های http به request pipeline موجود در بخش providers فایل app.module.ts اضافه می شوند.

ساخت مدل کاربر (User Model)

user model یک کلاس ساده است که پراپرتی های مربوط به کاربر در آن تعریف شده اند. پراپرتی token برای نگهداری توکن JWT که بعد از احراز هویت موفق از سرور گرفته شده است، استفاده می شود.

سرویس Alert

سرویس alert کامپوننت های موجود در برنامه را قادر می سازد تا بتوانند با استفاده از کامپوننت alert پیام های هشدار را در بالا صفحه نمایش دهند. این سرویس متدهایی برای نمایش پیام های موفقیت/خطا و یک متد دیگر به نام getMessage دارد که یک Observable باز میگرداند. این Observable توسط کامپوننت alert برای فهمیدن اینکه چه زمان باید هشدار را نشان دهد، استفاده می شود.

سرویس Authentication

سرویس authentication برای ورود (login) و خروج از برنامه (logout) استفاده می شود. این سرویس برای ورود کاربران، اطلاعات آنها را به API ارسال می کند و در پاسخ دریافتی به دنبال توکن JWT می گردد. اگر توکن را پیدا کند، به معنی احراز هوبت موفق است و اطلاعات کاربر شامل توکن JWT در local storage ذخیره می شود.

از آنجا که اطلاعات ورود کاربر در local storage ذخیره می شود، هر بار که کاربر صفحه را refresh کند یا مرورگر را ببند و دوباره باز کند، نیازی به ورود دوباره نخواهد داشت. اگر می خواهید که این گونه نباشد، می توانید اطلاعات را در جایی که پایداری کمتری دارد مثل session storage ذخیره کنید که در صورت بسته شده مرورگر اطلاعات ذخیره شده از بین می روند.

سرویس authentication دو پراپرتی را برای دسترسی به اطلاعات کاربری که وارد سیستم شده است، ارائه می دهد. پراپرتی currentUser که یک observable است و می تواند زمانی که بخواهیم یک کامپوننت را در هنگام ورود و خروج کاربر بروز کنیم، استفاده شود. برای مثال در app.component.ts می توانیم بر اساس ورود/خروج کاربر منوی سایت را نمایش داده یا مخفی کنیم. پراپرتی currentUserValue زمانی مورد استفاده قرار می گیرد که بخواهید اطلاعات کاربری که لاگین شده است را بگیرید اما نیازی به بروز رسانی واکنشی در هنگام تغییر آن ندارید. به عنوان مثال در auth.guard.ts که دسترسی به مسیرها را بررسی می کند، با استفاده از این پراپرتی می توان بررسی کرد که آیا کاربر لاگین شده است یا خیر.

سرویس User

سرویس user شامل متدهای استاندارد CRUD (Create, read, update and delete) به منظور مدیریت کاربران است. این سرویس به عنوان یک رابط بین برنامه انگولار و API عمل می کند.

قالب کامپوننت Home

قالب کامپوننت home شامل کدهای html و angular است که یک پیام خوش آمدگویی را به همراه لیست کاربران و یک لینک delete برای هر کاربر نمایش می دهد.

کامپوننت Home

کامپوننت home اطلاعات کاربر فعلی را به وسیله subscribe کردن به پراپرتی currentUser موجود در سرویس authentication می گیرد. این subscribe در یک متغیری به نام currentUserSubscription ذخیره می شود بنابراین می توانیم در هنگام نابود شدن کامپوننت آن را unsubscribe کنیم. کامپوننت home لیست کل کاربران را از طریق سرویس user می گیرد و در پراپرتی users قرار می دهد تا توسط قالب کامپوننت home استفاده شود.

قالب کامپوننت Login

قالب کامپوننت login شامل یک فرم ورود با دو فیلد username و password است. در هنگام کلیک بر روی دکمه submit اگر مقدار یکی از فیلدها درست نباشد، پیامی را به کاربر نمایش می دهد. رویداد submit دکمه به متد onSubmit موجود در کامپوننت login بایند شده است.

کامپوننت Login

کامپوننت login برای کنترل ورود کاربران به برنامه از سرویس authentication استفاده می کند. اگر کاربر قبلا وارد شده باشد، به طور خودکار به صفحه home منتقل خواهد شد. شیء loginForm: FormGroup به منظور دسترسی به اطلاعات وارد شده در فرم استفاده می شود. FormGroup یک ماژول مربوط به Angular Reactive Forms است که در قالب بالا با دستورالعمل [formGroup]=”loginForm” به فرم بایند شده است.

قالب کامپوننت Register

قالب کامپوننت register شامل یک فرم ثبت نام ساده با چهار فیلد first name، last name، username و password است. اگر در هنگام کلیک بر روی دکمه submit مقادیر فیلدها نامعتبر باشند، پیامی به کاربر نمایش داده می شود. رویداد submit دکمه به متد onSubmit موجود در کامپوننت Register بایند شده است.

کامپوننت Register

کامپوننت register با استفاده از سرویس user کاربر جدید را ثبت نام می کند. اگر کاربر قبلا وارد برنامه شده باشد، به طور خودکار به صفحه home منتقل خواهد شد.

قالب کامپوننت App

قالب کامپوننت app، قالب کامپوننت root یا اصلی برنامه است و شامل navbar اصلی است که فقط برای کاربرانی که احراز هویت شده اند نمایش داده می شود، یک دستورالعمل router-outlet که برای نمایش محتوای هر ویو بر اساس مسیر فعلی استفاده می شود و یک کامپوننت alert که برای نمایش پیام در هر جایی از برنامه استفاده می شود.

کامپوننت App

کامپوننت app، کامپوننت اصلی یا همان root برنامه است و تگ root برنامه یعنی <app></app> را تعریف می کند. این کامپوننت به سرویس authentication سابسکرایب کرده است بنابراین به صورت پویا می تواند بر اساس ورود و خروجی کاربر navbar را مخفی کرده یا نمایش دهد. از آن جا که این کامپوننت، کامپوننت root است، نیازی به unsubscribe کردن نداریم، چون کامپوننت روت فقط زمانی نابود می شود که کل برنامه بسته شود و بسته شدن کل برنامه هم باعث unsubscribe شدن همه subscribe ها می شود.

کامپوننت app یک متد logout دارد که از طریق لینک logout موجود در navbar که در کد بالا تعریف کردیم فراخوانی می شود و کاربر را از برنامه خارج و به صفحه ورود (login) هدایت می کند.

ماژول App

ماژول app، ماژول اصلی (root) برنامه را به همراه metadata هایی در مورد آن ماژول تعریف می کند. برای اطلاعات بیشتر در مورد ماژول های انگولار، می توانید به Angular – NgModules مراجعه کنید. اینجا جایی است که fake backend provider اضافه شده است. برای تغییر به backend provider اصلی کافیست ارائه دهنده هایی که با کامنت “// providers used to create fake backend” مشخص شده اند را حذف کنید.

App Routing

فایل app routing مسیرهای برنامه را تعریف می کند. هر مسیر شامل آدرس و کامپوننت مرتبط است. اگر به کد زیر توجه کنید، مسیر کامپوننت home با دادن AuthGuard به پراپرتی canActivate امن شه است.

فایل Index.html اصلی

فایل index.html اصلی، اولین فایلی است که توسط مرورگر لود می شود. Webpack تمام فایل های جاوا اسکریپت برنامه را با هم بسته بندی کرده و به درون فایل index.html تزریق می کند تا توسط مرورگر لود و اجرا شوند.

فایل Main.ts

فایل main.ts توسط انگولار به عنوان فایل اصلی و برای راه اندازی برنامه استفاده می شود.

فایل Polyfills.ts

برخی از ویژگی های مورد استفاده در انگولار ۷ هنوز به طور native توسط  همه مرورگرهای اصلی پشتیبانی نمی شوند. از polyfills به منظور افزودن این ویژگی ها به مرورگر در صورت نیاز استفاده می شود.

فایل نوع های سفارشی (Custom Typings)

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

فایل Package.json

فایل package.json شامل اطلاعات پیکربندی پروژه و بسته های مورد نیاز برنامه (dependencies) است که موقع اجرای دستور npm install نصب می شوند. برای اطلاعات بیشتر به صفحه npm docs مراجه کنید.

فایل tsconfig.json

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

پیکربندی Webpack 4

Webpack 4.23 به منظور bundle کردن کل فایل های پروژه استفاده می شود. فایل bundle شده توسط مرورگر بارگذاری می شود. چگونگی bundle شدن فایل های پروژه در فایل webpack.config.js مشخص می شود. برای اطلاعات بیشتر به صفحه webpack docs مراجعه کنید. این ساده ترین حالت فایل webpack.config.js برای باندل کردن یک برنامه انگولار ۷ است که در آن ts-loader برای کامپایل کردن فایل های TypeScript، raw-loader برای لود کردن قالب های انگولار و HtmlWebpackPlugin برای تزریق اسکریپت باندل شده به بدنه فایل index.html استفاده می شود.

مسیر مستعار ‘@’ در فایل های webpack.config.js و tsconfig.json پیکربندی شده است به مسیر ‘/src/app’ اشاره می کند. بنابراین در مواردی مثل import کردن از ‘@’ استفاده کنیم.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است