There are times when you require certain sections of your site to have restricted access.

When working with Umbraco, this task is very easy to implement using the Role-Based authentication. In this post I will show you a simple example of how to use this feature.

Creating a Member Group and adding Members to it

First, inside de back office, navigate to Members > Member Groups and create a new group.

Next, create a new user under Members > Members.

Enter a name for the new user and then, on the Properties tab, enter a login name and an e-mail address (these parameters are required). Umbraco assigns a new password automatically, you can also edit it.

Also, it is necessary to assign the new user to a Member Group.

Scroll all the way down the properties tab, on the Member Group property, click on the group name you want the new user to be part of. The group name will then appear undet Member Group(s). After doing that, click Save.

Adding Content to the site

The next step is to create new document types and templates for the sections in the site.

For this example, I created two document types with their corresponding templates. I also created a Partial View that displays a login form.

For the Login template I inserted a Partial View which displays a login page. The code for the Login template is as follows.

@using UmbracoTestProject.Models @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = null; } <h2>Login Page</h2> <div id="loginForm"> @{Html.RenderPartial("LoginPartial", new LoginModel());} </div>

For the login form, the code is as follows.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<UmbracoTestProject.Models.LoginModel> @using (Html.BeginForm("Login", "Member", FormMethod.Post)) { <fieldset> <legend>Login</legend> @Html.ValidationSummary(false) @Html.LabelFor(m => m.Username) @Html.TextBoxFor(m => m.Username) <br /> @Html.LabelFor(m => m.Password) @Html.PasswordFor(m => m.Password) <br /> @Html.LabelFor(m => m.RememberMe) @Html.EditorFor(m => m.RememberMe) <br /> <button>Login</button> </fieldset> }

I created a model class for the user’s login information.

public class LoginModel { [DisplayName("Username")] public string Username { get; set; } [DisplayName("Password")] [DataType(DataType.Password)] public string Password { get; set; } [DisplayName("Remember Me")] public bool RememberMe { get; set; } }

Also, I added a SurfaceController that handles the login process.

public class MemberController : SurfaceController { public ActionResult Login(LoginModel model) { try { if (Membership.ValidateUser(model.Username, model.Password)) { FormsAuthentication.SetAuthCookie(model.Username, model.RememberMe); return Redirect("/private-content/"); } } catch (Exception e) { ModelState.AddModelError("Login error", "Unable to login, please try again."); } return PartialView("LoginPartial", model); } }

Finally, for the private page’s template, I added a simple line of code in order to test that the login was successful.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = null; } <h2>Welcome @Members.GetCurrentMemberProfileModel().UserName</h2>

Now, add the new nodes to the Content of the site.

Protecting the restricted content

Click on the node that you want to protect and select Public Access.

Choose the way you want to restrict access to the page. In this case, select Role based protection.

Now, it is necessary to select the roles that will have access to the page.

Select a login page.

Select an error page to show when the user logged on but is not authorized to see the content. (For this example, I just chose the Home Page).

Finally, click update to save your changes, you will notice there’s a “Forbidden” sign at the bottom of the node’s icon.

Now, if the user hasn’t registered, they will be redirected to the Login page you selected.