آموزش MVC – پیاده سازی یک اپلیکیشن تحت وب مبتنی بر MVC5 با قابلیت ارسال SMS و ایمیل یا احرازهویت و تایید دو مرحله ای ورود به حساب (Two-Factor Authentication)

آموزش MVC – پیاده سازی یک اپلیکیشن تحت وب مبتنی بر MVC5 با قابلیت ارسال SMS و ایمیل یا احرازهویت و تایید دو مرحله ای ورود به حساب (Two-Factor Authentication)

مبحث پیشرو نحوه ی ساخت و توسعه ی یک اپلیکیشن ASP.NET MVC 5 که برای ورود به سایت کاربر، از قابلیت احراز هویت و ثبت ورود دو مرحله ای (Two-Factor Authentication) بهره می گیرد را به شما کاملا آموزش خواهیم داد.

ایجاد یک پروژه ی ASP.NET MVC

پروسه ی توسعه اپلیکیشن را با نصب و راه اندازی محیط کاری Visual Studio Express 2013 for Web یا Visual Studio 2013 آغاز می کنیم. لازم است آپدیت 3 محیط برنامه نویسی Visual Studio 2013 یا جدیدتر را دانلود و نصب نمایید.

1. یک پروژه ی تحت وب ASP.NET ایجاد کرده و از قالب های آماده ی توسعه ی اپلیکیشن، MVC را انتخاب نمایید. لازم به ذکر است که ASP.NET Web forms نیز از سامانه ی ASP.NET Identity پشتیبانی می کند و برای انجام این تمرین با web forms می توانید مراحل تشریح شده در همین آموزش را طی نمایید.
2. قابلیت احرازهویت را بر روی گزینه ی پیش فرض Individual User Accounts تنظیم نمایید. چنانچه مایلید اپلیکیشن را در بستر Azure میزبانی نمایید، چک باکس مربوطه را تیک دار نمایید. در بخش های آتی این آموزش اپلیکیشن مورد نظر را در بستر Azure نصب و مستقر می نماییم.
3. پروژه را طوری تنظیم کنید که از پروتکل SSL استفاده نماید.

تنظیم و راه اندازی قابلیت ارسال SMS برای احراز هویت دو مرحله ای (two-factor authentication)

آموزش حاضر دستور العمل های لازم برای استفاده از ابزار Twilio یا ASPSMS را جهت راه اندازی قابلیت ارسال SMS ارائه می نماید. با این حال شما می توانید از سایر SMS Provider ها استفاده نمایید.

1. ایجاد یک حساب کاربری در سایت های سرویس دهی و ارسال SMS (SMS provider)
   • یک حساب کاربری Twilio یا ASPSMS ایجاد نمایید.
2. نصب سایر پکیج ها و اضافه کردن آدرس (reference) و پوشه ی سرویس ها (namespace)
   Twilio:
   در کنسول مدیریت پکیج ها (PMC)، دستور زیر را وارد نمایید:
   

   Install-Package Twilio

   ASPSMS:
   آدرس URL و namespace سرویس مد نظر بایستی مانند زیر اضافه شود:
   آدرس url:
   https://webservice.aspsms.com/aspsmsx2.asmx?WSDL
   اسم پوشه ی حامل سرویس (Namespace):
   ASPSMSX2
3. بدست آوردن اطلاعات احرازهویت کاربری از سرویس ارائه دهنده ی SMS (SMS Provider User credentials)
   Twilio:
   از تب Dashboard حساب کاربری Twilio خود، مقادیر Account SID و Auth token را کپی نمایید.
   ASPSMS:
   از تنظیمات مربوط به حساب کاربری خود، به Userkey مراجعه کرده و سپس مقدار آن را به همراه Password اختصاصی خود (رمزعبوری که خود تعیین کرده اید) کپی نمایید.
   بعده ها این مقادیر را در فایل web.config، داخل کلیدهای "SMSAccountIdentification" و "SMSAccountPassword" ذخیره خواهیم کرد.
   
4. مشخص کردن SenderID/Originator
   Twilio:
   از تب Numbers، مقدار شماره تلفن Twilio را کپی نمایید.
   ASPSMS:
   داخل منوی Unlock Originator، یک یا چند Originator را unlock نموده یا یک Originator حرفی-عددی انتخاب نمایید (تمامی شبکه ها از آن پشتیبانی نمی کنند). بعده ها این مقدار را در فایل web.config داخل کلید یا متغیر "SMSAccountFrom" ذخیره خواهیم کرد.
   
5. ارسال اطلاعات احراز هویت SMS provider (ارائه دهنده ی سرویس sms رسانی) به اپلیکیشن
   مقدار شماره ی تلفن ارسال کننده SMS و اطلاعات احرازهویت (Credentials) را در اختیار اپلیکیشن مورد نظر قرار دهید. به منظور ساده نگه داشتن مفاهیم، این مقادیر را در فایل web.config ذخیره می کنیم. زمانی که اپلیکیشن را در بستر Azure مستقر می کنیم، این مقادیر به طور امن در بخش app settings بر روی تب Web site configure ذخیره می شوند.
   
   نکته:

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

   
   
6. پیاده سازی قابلیت ارسال اطلاعات به SMS provider
   کلاس SmsService را در فایل App_Start\IdentityConfig.cs تنظیم نمایید. با توجه به سرویس SMS Provider مورد استفاده، یکی از دو بخش Twilio یا ASPSMS را فعال نمایید.
   

   public class SmsService : IIdentityMessageService
   {
       public Task SendAsync(IdentityMessage message)
       {
           // Twilio Begin
           // var Twilio = new TwilioRestClient(
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountIdentification"],
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountPassword"]);
           // var result = Twilio.SendMessage(
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountFrom"],
           //   message.Destination, message.Body
           // );
           // Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
           // Trace.TraceInformation(result.Status);
           // Twilio doesn't currently have an async API, so return success.
           // return Task.FromResult(0);
           // Twilio End
   
           // ASPSMS Begin 
           // var soapSms = new MvcPWx.ASPSMSX2.ASPSMSX2SoapClient("ASPSMSX2Soap");
           // soapSms.SendSimpleTextSMS(
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountIdentification"],
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountPassword"],
           //   message.Destination,
           //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountFrom"],
           //   message.Body);
           // soapSms.Close();
           // return Task.FromResult(0);
           // ASPSMS End
       }
   }
   

   محتوای فایل Views\Manage\Index.cshtml را بروز رسانی نمایید: (توجه: کامنت های موجود فایل جاری را حذف نکنید. از کد زیر استفاده نمایید.)
   

   @model MvcPWy.Models.IndexViewModel
   @{
      ViewBag.Title = "Manage";
   }
   @ViewBag.Title.
   @ViewBag.StatusMessage
   
      
   Change your account settings
      
   
      
   
         
   Password:
         
   
            [
            @if (Model.HasPassword)
            {
               @Html.ActionLink("Change your password", "ChangePassword")
            }
            else
            {
               @Html.ActionLink("Create", "SetPassword")
            }
            ]
         
         
   External Logins:
         
   
            @Model.Logins.Count [
            @Html.ActionLink("Manage", "ManageLogins") ]
         
           
   Phone Number:
         
   
            @(Model.PhoneNumber ?? "None") [
            @if (Model.PhoneNumber != null)
            {
               @Html.ActionLink("Change", "AddPhoneNumber")
               @:  | 
               @Html.ActionLink("Remove", "RemovePhoneNumber")
            }
            else
            {
               @Html.ActionLink("Add", "AddPhoneNumber")
            }
            ]
         
         
   Two-Factor Authentication:
    
         
   
            @if (Model.TwoFactor)
            {
               using (Html.BeginForm("DisableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
               {
                  @Html.AntiForgeryToken()
                  Enabled
                     
                  
               }
            }
            else
            {
               using (Html.BeginForm("EnableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
               {
                  @Html.AntiForgeryToken()
                  Disabled
                     
                  
               }
            }
         
      
   
   

   کد را بررسی کرده و مطمئن شوید که در بالای متدهای EnableTwoFactorAuthentication و DisableTwoFactorAuthentication داخل ManageController دستور (attribute) [ValidateAntiForgeryToken] حتما درج شده است:
   

   //
   // POST: /Manage/EnableTwoFactorAuthentication
   [HttpPost,ValidateAntiForgeryToken]
   public async Task EnableTwoFactorAuthentication()
   {
       await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), true);
       var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
       if (user != null)
       {
           await SignInAsync(user, isPersistent: false);
       }
       return RedirectToAction("Index", "Manage");
   }
   //
   // POST: /Manage/DisableTwoFactorAuthentication
   [HttpPost, ValidateAntiForgeryToken]
   public async Task DisableTwoFactorAuthentication()
   {
       await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), false);
       var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
       if (user != null)
       {
           await SignInAsync(user, isPersistent: false);
       }
       return RedirectToAction("Index", "Manage");
   }
   

7. اپلیکیشن را اجرا نموده و با حساب کاربری قبلی وارد سایت شوید.
8. بر روی User ID خود کلیک نموده تا متد Index در کلاس Manage فعال و اجرا شود.
9. بر روی Add کلیک نمایید.
10. متد AddPhoneNumber یک کادر محاروه ای را نمایش داده و شماره تلفن را جهت دریافت پیغام های SMS درخواست می کند.

    // GET: /Account/AddPhoneNumber
    public ActionResult AddPhoneNumber()
    {
       return View();
    }
    

    
11. در طی چند ثانیه ی آینده، یک پیغام متنی حامل کد تایید یا امنیتی دریافت می کنید. آن را وارد کرده و دکمه ی Submit را فشار دهید.
12. فایل ویو (View) Manage نشان می دهد که شماره ی تلفن اضافه شده است.

فعال سازی قابلیت احرازهویت دو مرحله ای (two-factor authentication)

داخل اپلیکیشنی که مبتنی بر قالب آماده تولید شده است (template generated app)، لازم است با استفاده از رابط کاربری (UI)، قابلیت هویت سنجی دو مرحله ای (2 Factor authentication) را فعال سازی نمایید. برای این منظور، بر روی User ID (نام مستعار و جایگزین ایمیل/Alias) در نوار پیمایش (nav bar) کلیک نمایید.

حال در مقابل آیتم Two-Factor Authentication بر روی لینک Enable کلیک نمایید.

با کلیک بر روی لینک Log off از برنامه خارج شوید. اکنون مجددا به سایت لاگین نمایید. اگر قابلیت تایید و بررسی ایمیل را فعال و پیاده سازی کرده باشید (که در مبحث قبلی به آن پرداخته شد)، بایستی بتوانید از منوی کشویی Two-Factor Authentication، گزینه ی Phonecode یا Emailcode را جهت دریافت کد تایید و امنیتی انتخاب نمایید.

صفحه ی مربوط به کد تایید امنیتی (Verify Code) نمایش داده می شود. شما می توانید کد دریافتی از طریق SMS یا email را در این صفحه وارد نمایید.

بر روی چک باکس Remember this browser کلیک نمایید. با این کار، اگر شما بخواهید بار دیگر به سایت وارد شوید (لاگین کنید)، دیگر نیازی نیست از (احراز هویت دو مرحله ای) 2FA در مرورگری و دستگاهی که داخل آن چک باکس مزبور را فعال کردید، جهت ورود به سایت استفاده نمایید. مادام اینکه کاربران مخرب به دستگاه شما دسترسی ندارند، فعال سازی قابلیت احرازهویت دو مرحله ای (2FA) و کلیک بر روی Remember this browser به شما این امکان را می دهد تا با دسترسی تک مرحله ای مبتنی بر ارائه ی رمزعبور (one step password access) به سایت راه پیدا کنید و در عین حال از تمامی کاربران و دستگاه های غیرقابل اعتماد بخواهید که از طریق مکانیزم احرازهویت دو مرحله ای به سایت لاگین کنند. می توانید این قابلیت را بر روی هر دستگاه خصوصی که مکررا برای ورود به سایت استفاده می کنید به راحتی فعال و جهت دسترسی آسان به اپلیکیشن از آن استفاده نمایید.