This is the final post in a series of posts on converting an asp.net mvc project to use both forms authentication and Azure appFabric Access Control Service (ACS) authentication. The first post focused on creating the project, configuring the site for acs and forms authentication and setting up the database. This second poste focused on the association process and the hybrid form where users can choose between forms authentication and ACS authentication. This final post will add some more steps to the original workflow which will cover user signup.
This simplifies the process for non-members who would otherwise have to signup then logout to begin the association process.
Original workflow:
New Workflow:
Open the MVC3MixedAuthenticationSample from the two previous posts and make the following changes:
Open Controllers\AccountController.cs and replace the Register(RegisterModel model) action with the following:
[HttpPost]
public ActionResult Register(RegisterModel model)
{
if (ModelState.IsValid)
{
// Attempt to register the user
MembershipCreateStatus createStatus;
Membership.CreateUser(model.UserName, model.Password, model.Email, null, null, true, null, out createStatus);
if (createStatus == MembershipCreateStatus.Success)
{
var claim = new IdentityClaim();
if (claim.HasIdentity)
{
var db = new IdentityRepository();
var user = Membership.GetUser(model.UserName);
db.MapIdentity(user.ProviderUserKey.ToString(), claim.IdentityProvider, claim.IdentityValue);
IdentityClaim.ClearSession();
}
FormsAuthentication.SetAuthCookie(model.UserName, false /* createPersistentCookie */);
return RedirectToAction("Index", "Home");
}
else
{
ModelState.AddModelError("", ErrorCodeToString(createStatus));
}
}
// If we got this far, something failed, redisplay form
return View(model);
}
Open Views\Account\LogOn.cshtml and find the following:
$('#AssociateCancel').click(CancelAssociation);
Immediately below insert the following code:
$('#AssociateRegister').click(function () {
window.location = '@Url.Action("Register")';
});
Next Find the following code:
<div id="AssociationMessage">
<div id="AssociateMessageText">Please login to associate your account</div>
<div id="AssociateMessageActions"><button id="AssociateCancel">Cancel</button></div>
<div class="clear"></div>
</div>
Immediately below insert the following code:
<div id="AssociationMessageRegister">
<div id="AssociateMessageRegisterText">Click Register if you don't already have an account</div>
<div id="AssociateMessageRegisterActions"><button id="AssociateRegister">Register</button></div>
<div class="clear"></div>
</div>
Open Content\HrdPage.css and insert the following css:
#AssociateMessageRegisterActions
{
float:right;
}
#AssociateMessageRegisterText
{
float:left;
}
#AssociationMessageRegister
{
border: 1px solid #9F6000;
background-color: #FEEFB3;
color:#9F6000;
padding:5px;
width:400px;
}
Next run the site and click one of the provider buttons and login with a provider account that is not already associated. You can also go to Account/Identites and remove any existing associations if you don’t have another one to spare.
When you return to the site your login page should look like this:
Register as normal:
Once the user completes registration they will be able to use their identity provider to access the site.
My Random Stuff 