The primary reason to build this website, was to give my wife a way to maintain her own site, add new images of her paintings and drawings, add or modify meta data like name, year of creation, dimensions etc.

Creating management pages

Luckily, creating management pages for a data model is very easy in MVC because of its Razor templates. I started of with creating a new controller, called PaintingsController, which I gave an action called Manage. I generated the associated view from a strongly typed list template using Painting as the model. It displayed all the public properties of the Painting class in a grid with Edit, Delete, Move up and Move down action links next to each painting. Then, I implemented the Add action on the PaintingsController. It consists of two methods. The first one is invoked on a GET request and displays the view in which the user can enter data about the new painting in a HTML form. It also includes a browse button to allow the selection of the image file to upload.

public class PaintingsController : Controller
{
    private IArtCollection _artCollection;
  
    public PaintingsController(IArtCollection artcollection)
    {
        _artCollection = artcollection;
    }
  
    [HttpGet]
    public ActionResult Manage()
    {
        var paintings = _artCollection.Paintings;
        return View(paintings);
    }
  
    [HttpGet]
    public ActionResult Add()
    {
        return View();
    }
  
    [HttpPost]
    public ActionResult Add(Painting painting)
    { 
        foreach (string file in Request.Files)
        {
            var postedFile = Request.Files[file] as HttpPostedFileBase;
  
            if (postedFile.ContentLength == 0)
                continue;
  
            string filename = Path.GetFileName(postedFile.FileName);
            string imagesFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "images");
            string savedFileName = Path.Combine(imagesFolder, filename);
            postedFile.SaveAs(savedFileName);
  
            painting.ImageUrl = "/images/" + filename;
        }
  
        _artCollection.AddPainting(painting);
        return RedirectToAction("Manage", "Paintings");
    }
  
    [HttpGet]
    public ActionResult Edit(int id)
    {
        var painting = (from p in _artCollection.Paintings
                        where p.Id == id
                        select p).First();
        return View(painting);
    }
  
    [HttpPost]
    public ActionResult Edit(Painting painting)
    {
        if (ModelState.IsValid)
        {
            _artCollection.DeletePainting(painting.Id);
            _artCollection.AddPainting(painting);
        }
        return RedirectToAction("Manage", "Paintings");
    }
  
    [HttpGet]
    public ActionResult Delete(int id)
    {
        var painting = (from p in _artCollection.Paintings
                        where p.Id == id
                        select p).First();
        
        return View(painting);
    }
  
    [HttpPost]
    public ActionResult Delete(int id, Painting painting)
    {
        _artCollection.DeletePainting(id);
        return RedirectToAction("Manage", "Paintings");
    }
  
    public ActionResult MoveUp(int id)
    {
        _artCollection.PromotePainting(id);
  
        return RedirectToAction("Manage", "Paintings");
    }
  
    public ActionResult MoveDown(int id)
    {
        _artCollection.DemotePainting(id);
  
        return RedirectToAction("Manage", "Paintings");
    }
}

The second method is invoked on the POST request when the form is submitted. It reads the posted file from the POST request and saves it in a local folder. It also creates a thumbnail image and adds the new painting to the art collection XML file. The same controller has methods for editing and deleting paintings, and for moving them up or down in the display order.

@model IEnumerable<Website.Models.Painting>
@{
    ViewBag.Title = "Manage";
}
<h2>Manage</h2>
<p>
    @Html.ActionLink("New Painting", "Add")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ImageUrl)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ThumbUrl)
        </th>
        <th></th>
    </tr>
  
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Year)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ImageUrl)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ThumbUrl)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
            @Html.ActionLink("Up", "MoveUp", new { id=item.Id })
            @Html.ActionLink("Down", "MoveDown", new { id=item.Id })
        </td>
    </tr>
}
</table>

Authorization

Now, obviously I did not want to allow just anyone to add or remove images from the website. Therefore I needed to protect the management pages from being accessed by anonymous users. In MVC, all that’s needed to to protect an action is the [Authorize] attribute decorating the method. Now, if the user is not logged in, MVC will return a 401 Unauthorized HTTP status. Putting the following authentication element in the web.config file will make MVC redirect the browser automatically to the Login action of the AccountController.

<system.web>
  <authentication mode="Forms">
    <forms loginUrl="~/Account/Login" timeout="2880" />
  </authentication>

So, now I needed a AccountController with a Login action that redirects to Google to authenticate the user. Google allows 3rd party websites to authenticate users using their Google account. It uses the OpenId protocol to issue a claims token. As my wife has a Gmail email account, this would be a great option for her. When she clicks the manage icon, her browser is redirected to Google and if she’s not currently logged in, she’s asked for her credentials. If she is already logged in to her Google account, she’ll be presented (only the first time if the checkbox is checked) with the following dialog. After clicking ‘Allow’, she’s redirected back to her website and can now add or delete pictures of her art.

Next time she clicks the icon, she’ll only see some redirection happening in the address bar of the browser and she’ll be taken straight to the management pages of her website.

A good overview of integrating OpenId authentication providers into an MVC 4 website can be found here. However, the solution given there is much more than I needed. For this website, I only needed to authenticate a few users with a fixed provider: Google.

I started by using the NuGet package manager to install the DotNetOpenAuth library. I created a new controller class ‘AccountController’ and injected the IMembershipService and IAuthorizedUserManager interfaces. The latter interface abstracts which users have access to the management pages. It has only a single method called IsUserAllowed which takes an email address and the implementation of this interface reads the users from a text file with authorized users.

public interface IAuthorizedUserManager
{
    bool IsAllowedUser(string email);
}

The IMembershipService abstracts the interaction with the Google authentication provider.

public interface IMembershipService
{
    IAuthenticationRequest CreateAuthenticationRequest(string identifier);
    IUser GetUser();
    HttpCookie CreateFormsAuthenticationCookie(IUser user);
}

It has three methods. The first one creates the HTTP request to Google and is used from the Login action on the AccountController that is invoked on a POST HTTP request.

[AllowAnonymous]
[HttpPost]
public ActionResult Login(string openid_identifier)
{
    var response = _service.CreateAuthenticationRequest(openid_identifier);
  
    if (response != null)
    {
        return response.RedirectingResponse.AsActionResult();
    }
  
    return View();
}

It redirects the browser to the Google authentication provider, where the user is prompted to login if not already authenticated. The authentication provider will redirect back to the /Account/Login action after the user logged on and will invoke the method responding to the GET request.

[AllowAnonymous]
public ActionResult Login()
{
    var user = _service.GetUser();
  
    if (user != null)
    {
        if (user.IsSignedByProvider && _authorizedUserManager.IsAllowedUser(user.Email))
        {
            var cookie = _service.CreateFormsAuthenticationCookie(user);
            HttpContext.Response.Cookies.Add(cookie);
  
            return new RedirectResult(Request.Params["ReturnUrl"] ?? "/");
        }
    }
  
    // if user is not allowed to login, redirect back to home page
    return new RedirectResult("/");
}

This method will ask the service to retrieve the user. It does this by decoding the response from the provider and constructing an user object containing the claims sent by the provider. The Login method will then check if the email claim is in the list of authorized users and if it is, set an authentication cookie that will keep the user logged in for subsequent requests. After the cookie has been set, the browser is redirected back to the page that triggered the login process in the first place. But this time the authentication cookie is set and the request is routed to the authorized action on the controller.

The AccountController also has a LogOff action that calls the IMembershipService implementation SignOut method which just clears the authentication cookie.

Argument Out Of Range

Yet another blog on software development.

Art website – site management

Creating management pages

Authorization

Leave a comment Cancel reply

Creating management pages

Authorization

Share this:

Related

Leave a comment Cancel reply