احراز هویت با دو فاکتور اس ام اس و ایمیل در MVC

در این مقاله با هم به سراغ ایجاد یک احراز هویت با دو فاکتور اس ام اس و ایمیل در ۵ MVC  خواهیم رفت. میتوانید نسخه ی کامل این برنامه را در انتهای مطلب دانلود نمایید. دانلود شامل debugging helpers نیز میشود که به شما امکان تست کردن تایید ایمیل و اس ام اس را بدون برقرار کردن Provider برای آنها خواهد داد.
دو فاکتور احراز هویت

Visual Studio Express 2013 for Web یا Visual Studio 2013 را نصب و اجرا کنید. آپدیت شماره ۳ یا بالاتر را بر روی ویژوال خود نصب نمایید.

۱ یک برنامه ی ASP.NET Web ایجاد کنید و قالب MVC را برای آن درنظر بگیرید. Web Forms نیز هویت ASP.NET را پشتیبانی میکند پس میتوانید با انجام مراحلی مشابه همین عملیات را در web form پیاده کنید.

MVC-5-Authentication-with-Two-Factor-1

۲ احراز هویت پیش فرض را با عنوان Individual User Accounts رها کنید. اگر میخواهید که برنامه را در Azure میزبانی کنید ، CheckBox را به صورت تیک خورده رها کنید. جلوتر در آموزش در Azure مستقر خواهیم شد. میتوانید یک اکانت Azure به صورت رایگان از طریق لینک زیر ایجاد کنید.

http://azure.microsoft.com/en-us/pricing/free-trial/?WT.mc_id=A261C142F

۳ پروژه را بر روی استفاده از SSL تنظیم کنید.

برپایی اس ام اس برای احراز هویت دو فاکتوره

در این آموزش دستورالعمل های استفاده از هر دو Twilio و ASPSMS را ارائه خواهیم کرد اما شما میتوانید از هر Provider دیگری نیز استفاده کنید.

۱ ایجاد یک اکانت کاربری با SMS Provider.

یک حساب کاربری Twilio یا ASPSMS ایجاد کنید.

۲ نصب بسته های اضافی یا افزودن مراجع سرویس

Twilio:
در قسمت کنسول مدیریت بسته ها ، دستور زیر را وارد کنید :

Install-Package Twilio

ASPSMS:

احتیاج به افزودن مرجع سرویس زیر دارید :

MVC-5-Authentication-with-Two-Factor-2

آدرس :

https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

فضای نام :

ASPSMSX2

۳ تشخیص SMS Provider اطلاعات کاربری

Twilio:

از قسمت Dashboard اکانت Twilio خود ، AccountSID و Auth token را کپی کنید.

ASPSMS:

از قسمت تنظیمات اکانت خود به Userkey مراجعه کنید و آن را به همراه کلمه عبور خود کپی کنید.

جلوتر این مقادیر را با کلید های “SMSAccountIdentification” و “SMSAccountPassword” در فایل Web.Config ذخیره خواهیم کرد.

۴ مشخص کردن SenderID/Orginator

Twilio:
از قسمت Numbers ، شماره تلفن Twilio خود را کپی کنید.

ASPSMS:
در منوی Unlock Orginator ، یک یا بیشتر از Orginator را باز کنید و یا یک alphanumeric originator انتخاب کنید.

جلوتر این مقادیر را فایل Web.Config با کلید “SMSAccountForm” ذخیره خواهیم کرد.

۵ انتقال اطلاعات کاربری SMS Provider به برنامه

اطلاعات کاربری و فرستنده شماره تلفن را برای برنامه فعال کنید. برای ساده سازی این مقادیر را در فایل Web.Config ذخیره میکنیم. زمانی که میخواهیم در Azure مستقر شویم ، میتوانیم مقادیر را به صورت امن در بخش تنظیمات برنامه در tab مربوط به پیکربندی web site ذخیره کنیم.

</connectionStrings>
   <appSettings>
      <add key="webpages:Version" value="3.0.0.0" />
      <!-- Markup removed for clarity. -->
      <!-- SendGrid-->
      <add key="mailAccount" value="account" />
      <add key="mailPassword" value="password" />
      <add key="SMSAccountIdentification" value="My Identification" />
      <add key="SMSAccountPassword" value="My Password" />
      <add key="SMSAccountFrom" value="+12065551234" />
   </appSettings>
  <system.web>

 ۶ کلاس SmsService را در فایل App_Start\IdentityConfigs.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\Manager\Index.cshtml مربوط به View ، Razor را به روز رسانی کنید :

@model MvcPWy.Models.IndexViewModel
@{
   ViewBag.Title = "Manage";
}

<h2>@ViewBag.Title.</h2>



@ViewBag.StatusMessage


<div>

<h4>Change your account settings</h4>


<hr />


<dl class="dl-horizontal">

<dt>Password:</dt>


<dd>
         [
         @if (Model.HasPassword)
         {
            @Html.ActionLink("Change your password", "ChangePassword")
         }
         else
         {
            @Html.ActionLink("Create", "SetPassword")
         }
         ]
      </dd>


<dt>External Logins:</dt>


<dd>
         @Model.Logins.Count [
         @Html.ActionLink("Manage", "ManageLogins") ]
      </dd>


<dt>Phone Number:</dt>


<dd>
         @(Model.PhoneNumber ?? "None") [
         @if (Model.PhoneNumber != null)
         {
            @Html.ActionLink("Change", "AddPhoneNumber")
            @: &nbsp;|&nbsp;
            @Html.ActionLink("Remove", "RemovePhoneNumber")
         }
         else
         {
            @Html.ActionLink("Add", "AddPhoneNumber")
         }
         ]
      </dd>


<dt>Two-Factor Authentication:</dt>

 

<dd>
         @if (Model.TwoFactor)
         {
            using (Html.BeginForm("DisableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
               @Html.AntiForgeryToken()
               <text>Enabled
                  <input type="submit" value="Disable" class="btn btn-link" />
               </text>
            }
         }
         else
         {
            using (Html.BeginForm("EnableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
               @Html.AntiForgeryToken()
               <text>Disabled
                  <input type="submit" value="Enable" class="btn btn-link" />
               </text>
            }
         }
      </dd>

   </dl>

</div>

 ۸ متد های action مربوط به EnableTwoFactorAuthentication و DisableTwoFactorAuthentication را در ManageController فعال کنید . خاصیت [ValidateAntiForgeryToken] را خواهیم داشت:

//
// POST: /Manage/EnableTwoFactorAuthentication
[HttpPost,ValidateAntiForgeryToken]
public async Task<ActionResult> 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<ActionResult> 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");
}

 ۹ برنامه را اجرا کنید و با اکانتی قبلا ثبت کرده اید وارد شوید.

۱۰ بر روی UserID خود کلیک کنید ، که متد Action مربوط به Index را در کنترلر Manage فعال میکند.

MVC-5-Authentication-with-Two-Factor-3

۱۱ بر روی افزودن کلیک کنید

MVC-5-Authentication-with-Two-Factor-4

۱۲ متد Action مربوط به AddPhoneNumber یک dialog Box برای وارد کردن شماره تلفن برای ارسال پیام اس ام اس را نمایش میدهد.

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

MVC-5-Authentication-with-Two-Factor-5

۱۳ پس از چندین ثانیه یک متن به همراه کد فعالسازی دریافت خواهید کرد. آن را وارد کنید و ثبت را بفشارید.

MVC-5-Authentication-with-Two-Factor-6

۱۴ Manage View نشان میدهد که شماره تلفن شما افزوده شده است.

فعالسازی احراز هویت دو فاکتوره

در قالب برنامه تولید شده ، احتیاج دارید که از UI برای فعالسازی احراز هویت دو فاکتوره استفاده کنید. برای فعالسازی آن بر روی User ID خود در قسمت navigation bar کلیک کنید.

MVC-5-Authentication-with-Two-Factor-7

بر روی فعالسازی دو فاکتوره کلیک کنید.

MVC-5-Authentication-with-Two-Factor-8

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

MVC-5-Authentication-with-Two-Factor-9

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

MVC-5-Authentication-with-Two-Factor-10

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

 

دانلود سورس کد
پسورد : csharpoop.com

احراز هویت با دو فاکتور اس ام اس و ایمیل در MVC
5 (100%) 1 رای

(448 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *