Forms Authentication in Lightswitch With MVC: Part 1

Introduction

This article provides a walkthrough of how to use Forms Authentication with Visual Studio LightSwitch. In my previous articles we saw how to get started by creating a LightSwitch application. You can get them from the following:

Before we proceed please check the articles above since this is a continuation of them.

Step 1: Click on properties of SampleLightSwitchMVC. Navigate to Access Control and enable "Use Forms authentication" as shown below.

Notice this will cause LightSwitch to create LogIn and LogOut pages as shown below. These pages will redirect to the LightSwitch application.

Solution Explorer

Step 2: Now let's add a Model class. Right-click on the Models folder and then "Add class" and add the following properties. Here we have created two classes for user registration and to change the password.

using System.ComponentModel.DataAnnotations;

namespace LightSwitchApplication.Models

{

public class Users

{

public string UserName { get; set; }

public string Email { get; set; }

public string Password { get; set; }

public bool IsLockedOut { get; set; }

public bool IsOnline { get; set; }

public bool RememberMe { get; set; }

}

public class ChangePassword

{

[Display(Name = "Old Password")]

public string OldPassword { get; set; }

[Display(Name = "New Password")]

public string NewPassword { get; set; }

[Display(Name = "Confirm Password")]

public string ConfirmPassword { get; set; }

}

Step 3: Now Let's add 3 views. Create a new folder named "Account" under views and add the Razor views.

add views

Add the following HTML to the three views.

ChangePassword.cshtml

Layout = null;

}

@model LightSwitchApplication.Models.ChangePassword

<!DOCTYPE html>

<html>

<head>

<title>Change Password</title>

</head>

<body>

<h2>Change Password</h2>

<div>

@using (Html.BeginForm("ChangePassword", "Account",

FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary()

@Html.LabelFor(model => model.OldPassword,

new { @class = "col-md-2 control-label" })

@Html.PasswordFor(model => model.OldPassword,

new { @class = "form-control" })

</div>

@Html.LabelFor(model => model.NewPassword,

new { @class = "col-md-2 control-label" })

@Html.PasswordFor(model => model.NewPassword,

new { @class = "form-control" })

</div>

@Html.LabelFor(model => model.ConfirmPassword,

new { @class = "col-md-2 control-label" })

@Html.PasswordFor(model => model.ConfirmPassword,

new { @class = "form-control" })

</div>

<br />

<input type="submit"

value="Change password"

class="btn btn-default" />

</div>

}

<br />

<div>

@Html.ActionLink("GoBack", "Index", "Home")

</div>

</body>

</html>

Login.cshtml

Layout = null;

}

@model LightSwitchApplication.Models.Users

<!DOCTYPE html>

<html>

<head>

minimum-scale=1, maximum-scale=1, user-scalable=no" />

</head>

<body>

@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl },

FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

{ ;

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

@Html.LabelFor(model => model.UserName, new { @class = "col-md-2 control-label" })

@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })

@Html.ValidationMessageFor(model => model.UserName)

</div>

@Html.LabelFor(model => model.Password, new { @class = "col-md-2 control-label" })

@Html.PasswordFor(model => model.Password, new { @class = "form-control" })

@Html.ValidationMessageFor(model => model.Password)

</div>

<br />

@Html.CheckBoxFor(model => model.RememberMe)

@Html.LabelFor(model => model.RememberMe)

</div>

<br />

</div>

<p>

@Html.ActionLink("Register", "Register") if you don't have a local account.

</p>

}

</section>

</div>

</body>

</html>

Register.cshtml

Layout = null;

}

@model LightSwitchApplication.Models.Users

<!DOCTYPE html>

<html>

<head>

minimum-scale=1, maximum-scale=1, user-scalable=no" />

<title>Register</title>

</head>

<body>

<h2>Register</h2>

<div>

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@Html.LabelFor(model => model.UserName, new { @class = "control-label" })

@Html.EditorFor(model => model.UserName)

@Html.ValidationMessageFor(model => model.UserName,

null, new { @class = "help-inline" })

</div>

@Html.LabelFor(model => model.Password, new { @class = "control-label" })

@Html.PasswordFor(model => model.Password)

@Html.ValidationMessageFor(model => model.Password,

null, new { @class = "help-inline" }) ;

</div>

@Html.LabelFor(model => model.Email, new { @class = "control-label" })

@Html.EditorFor(model => model.Email)

@Html.ValidationMessageFor(model => model.Email,

null, new { @class = "help-inline" })

</div>

<br />

</div>

@Html.ValidationSummary(true)

}

<br />

<div>

@Html.ActionLink("Back", "Index", "Home")

</div>

</body>

</ html

Summary

In this article we learned how to enable forms authentication and creation of views. In the future articles we will add the controller to do login, registration and to change the password.

Next article: Learn How to Use Forms Authentication in Lightswitch With MVC: Part 2