Tuesday, March 19, 2024
Innovative SMS Gateway & Messaging solutions

ASP.NET MVC Web Application with Two-Factor Authentication

This tutorial explains step by step how you can add two-factor authentication via SMS with the ASPSMS gateway to your ASP.NET MVC project. The sample uses Visual C # and requires a minimum of Visual Studio 2013.

  1. New ASP.NET-Project
  2. Add Service Reference: ASPSMS SOAP Web Service
  3. Make ASPSMS credentials available in Web.config
  4. Configure ASP.NET Identity SmsService
  5. Update code of Manage View
  6. Add a mobile phone number
  7. Enable Two-Factor Authentication
  8. Try to login
  1. New ASP.NET-Project

    New ASP.NET-Project

    In Visual Studio 2013, create a new Visual C# ASP.NET Web application. Select the template MVC and make sure that the authentication is set to "Individual user accounts".

  2. Add Service Reference: ASPSMS SOAP Web Service

    Add Service Reference: ASPSMS SOAP Web Service

    Copy/Paste Web Service Address and Namespace and add the Service Reference to your project.

    Address (copy/paste)

    Namespace (copy/paste)

    Add Service Reference: ASPSMS SOAP Web Service


  3. Make ASPSMS credentials available in Web.config
    <appSettings>
        <add key="webpages:Version" value="3.0.0.0" />
        <add key="webpages:Enabled" value="false" />
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
        <add key="ASPSMSUSERKEY" value="MYUSERKEY" />
        <add key="ASPSMSPASSWORD" value="MYPASSWORD" />
        <add key="ASPSMSORIGINATOR" value="+41790000000" />
    </appSettings>
    Make the ASPSMS credentials available to your project by adding the following lines of code to the Web.config:

    (copy/paste)

    Replace the placeholders <USERKEY> and <PASSWORD> with userkey and password of your ASPSMS account.

  4. Configure ASP.NET Identity SmsService
    public class SmsService : IIdentityMessageService
    {
        public Task SendAsync(IdentityMessage message)
        {
            // Plug in your SMS service here to send a text message.
            var soapSms = new WebApplication2.ASPSMSX2.ASPSMSX2SoapClient("ASPSMSX2Soap");
            soapSms.SendSimpleTextSMS(
                System.Configuration.ConfigurationManager.AppSettings["ASPSMSUSERKEY"],
                System.Configuration.ConfigurationManager.AppSettings["ASPSMSPASSWORD"],
                message.Destination,
                System.Configuration.ConfigurationManager.AppSettings["ASPSMSORIGINATOR"],
                message.Body);
            soapSms.Close();
            return Task.FromResult(0);
        }
    }
    Insert the code to call the ASPSMS SOAP Web Service into the SmsService class in the file App_Start\IdentityConfig.cs:

    (copy/paste)


  5. Update code of Manage View
    @model WebApplication2.Models.IndexViewModel
    @{
        ViewBag.Title = "Manage";
    }
    
    <h2>@ViewBag.Title.</h2>
    
    <p class="text-success">@ViewBag.StatusMessage</p>
    <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>
            @*
                Phone Numbers can used as a second factor of verification in a 
                two-factor authentication system.
    
                 See <a href="http://go.microsoft.com/fwlink/?LinkId=403804">this article</a>
                    for details on setting up this ASP.NET application to support two-factor 
                    authentication using SMS.
    
                 Uncomment the following block after you have set up two-factor authentication
            *@
            <dt>Phone Number:</dt>
            <dd>
                @(Model.PhoneNumber ?? "None") [
                @if (Model.PhoneNumber != null)
                {
                    @Html.ActionLink("Change", "AddPhoneNumber")
                    @:  | 
                    @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>
    The needed code can either be activated by removing the Razor comment delimiters @* and *@

    Or you can simply copy the code below and replace the appropriate section in the file Views\Manage\Index.cshtml:

    (copy/paste)


  6. Add a mobile phone number

    Manage

    Start your project and create a new account. A mouse click on the selected account email address will take you to the Management page. [Add] your phone number.

    Add a Phone number

    Add your mobile phone number. ASP.NET Identity sends a verification code to that number.

    Enter verification code

    Enter the verification code received.

  7. Enable Two-Factor Authentication

    Enable Two-Factor Authentication

    Enable two-factor authentication.

  8. Try to login

    Überprüfungscode senden

    Log off and log on again. You will be prompted to let Send the verification code as a phone code.

    Überprüfungscode eingeben

    Enter the code which has been sent to your mobile phone and decide whether to "remember this browser" or if your application requires a Two-factor authentication regardless of the used browser.

    You got it? Happy Coding :-)


New User Registration

Click here for the ASPSMS new user registration.

Have you already registered? Log in with your user e-mail address and password.


Forgot Login Password?

Available SMS tools and interfaces for ASPSMS