Thursday, June 11, 2015

SMS Authentication in ASP.NET5 Application

In today's blog post, I will be discussing how to set up SMS authentication in ASP.NET5 web application.

SMS Authentication in Web Application

To begin with, I first created a web application in Visual Studio 2015RC named "SmsAuth".
Then I navigated to www.twilio.com and created an account.
In my application, I added the Twilio Nuget package.

Then I navigated to SendSmsAsync method in MessageServices.cs and added the following lines of code:

public static Task SendSmsAsync(string number, string message)

{
var client = new TwilioRestClient

  ("TwilioAccountSid", "TwilioAuthToken");

var result = client.SendMessage

  ("FromTwilioPhoneNumber", number, message);

return Task.FromResult(0);

}

The TwilioAccountSid, TwilioAuthToken and FromTwilioPhoneNumber are all available from the twilio account I created above. For simplicity, I have added all this information here only. For secret information, I would rather use SecretManager as I discussed in a previous blog post here.

Next, I went to Index.cshtml in Manage folder and uncommented the following code:

@(Model.PhoneNumber ?? "None") [

        @if (Model.PhoneNumber != null)

        {

             <a asp-controller="Manage" 
    asp-action="AddPhoneNumber">Change</a>

             @: &nbsp;|&nbsp;

             <a asp-controller="Manage" 
    asp-action="RemovePhoneNumber">Remove</a>

         }

         else

         {

             <a asp-controller="Manage" 
    asp-action="AddPhoneNumber">Add</a>

          }

   ]
This allows the user to add a phone number to user account. Next in the same file I also uncommented the following code:

@if (Model.TwoFactor)

 {

     <form asp-controller="Manage" 
    asp-action="DisableTwoFactorAuthentication"
        method="post" class="form-horizontal" role="form">

     <text>

     Enabled

     <input type="submit" value="Disable" 
    class="btn btn-link" />

     </text>

     </form>

     }

    else

     {

     <form asp-controller="Manage" asp-action=

    "EnableTwoFactorAuthentication" method="post"
 
    class="form-horizontal" role="form">


     <text>

     Disabled

     <input type="submit" value="Enable" 
    class="btn btn-link" />

     </text>

     </form>

}

This allows user to enable/ disable two factor authentication in the user account.

Next, I removed "dnxcore50" from frameworks in projects.json because twilio cannot target dnxcore50.

Now I ran the application and registered as a regular user with my email and password.
Then I clicked on my username and it navigated me to Manage Index page: http://localhost:31469/Manage
Next, I added my phone number to my account.






Then I received a verification code on my cell phone.
I entered that on the screen and it verified my phone number.

Then I enabled the two factor authentication.





Then I logged off and logged in again. I entered my username and password. Next, it asked me my method of second authentication and since Phone was the only option, I selected that.
Then I received an SMS with security code.

I entered that code in my application




And was able to login.
So now everytime user tries to login, he has to put in his password as well as the security code. This makes the application more secure as it's two factor authentication.


Conclusion

So we saw it's easy to set up SMS authentication on our web application. This is useful if we want to make our application more secure or if for some reason we want to use only SMS authentication, we can set up like this.
For future updates to my weekly blog, please subscribe to my blog via the "Subscribe By Email" feature at the right and follow me on Twitter. Until then Happy Coding :)


No comments:

Post a Comment