Welcome to the second installment of the series on the ACS Extensions for Umbraco, part of the big ACS launch wave!
This time I am going to assume that you succesfully installed the Extensions on your Umbraco instance, and you want to start accepting members from social & web identity providers. You’ll see how easy it is to stitch together the sign-up and sign-in machinery, I’d estimate 3 mins max, and how we integrated the classic email verification flow into our invitation engine.
As usual, I am going to paste here what we wrote in the docs. However, remember that one of the big success factors for Umbraco is its great flexibility: in the same spirit, feel free to tinker with the Extensions as well to add any extra feature you may need. Few suggestions: bulk invitations, self-registering pages, etc.
'Click here for a video walkthrough of this tutorial'
One of the main features of the ACS Extensions is the ability to add members to your Umbraco web site directly from social providers: people will be able to sign up to your web site without having to create a new account and remember a new password, an you will not need to maintain credentials, field calls for lost passwords and so on.
The ACS Extensions accomplish this by providing you with a workflow for inviting users via a simple email verification system. The ACS Extensions also provide you some UI macro which you can use for creating sign-in and sign-up pages in just few clicks. The sign-in and sign-up mechanisms are integrated with the role-based security supported natively by Umbraco, the member groups.
In the section below we will walk you through the process of enabling classic sign-in and sign-up authentication features in your web site: this will help you to understand how the various components of the ACS Extensions work, so that you will be able to devise your own flow.
In order to add authentication capabilities to your Umbraco web site, you need to subdivide your users in member groups.
Figure 22 - Create Member Group popup dialog
In order to enable members to sign in using social providers, you need to add to your web site a login page that will display the appropriate choices, that is to say the list of social providers you selected when you set up the ACS Extensions. Thanks to the macro provided by the extensions, this task is very straightforward.
Figure 23 - Create Content popup dialog
Figure 24 - Insert Macro button
Figure 25 - Insert macro popup dialog
Figure 26 - Login Page Created
You now have all the necessary assets to authenticate members: the next step is to wire them up to the content you want to protect.
Umbraco supports role-based authorization as the access control method for its content pages. When you elect to use role-based security with a given page, Umbraco will ask you to specify one login and one error page. The ACS Extensions snap in that mechanism by using a login page containing its macro, just like the page you created in the former task. In the steps below we will restrict access to one page in order to demonstrate the process.
Figure 27 - Public access menu item
Figure 28 - Public access popup dialog | Choose how to restrict access to this page
Figure 29 - Public access popup dialog | Role based protection
Figure 30 - The end result in the public access popup dialog | Role based protection
Figure 31 - The Umbraco web site home page
Figure 32 - The login page
The login mechanism works, but at this point you don’t have any registered members yet. In the next task you will create the activation page that invited members will use for signing up to your Umbraco instance.
In order to register new members from social providers, you need to create some pages that will allow them to sign up to your web site using their account of choice. In a later task you will learn how to invite users; in the steps below you will see how to build the assets that will support the member activation experience.
The infrastructure is pretty simple: you need one Activation page, which constitutes the landing page for new members who have been just invited to join the site; and one Signup page, which they will use to associate their account from their social provider of choice with the account on your web site.
Figure 33 - Insert the federated login macro to list all configured social providers login links
The default name and path for the activation page is “~/activation”. If you keep all the defaults it is important that you call the page “activation”, or the invitation mechanism will fail (see the next task). If you want to change the page name you use here to toehr than “activation”, you need to update the web.config file of your Umbraco web site (appSettings -> ActivationPage).
Figure 34 - Edit activation page
Figure 35 - Permissions for the activation page
At this point you have everything you need to start inviting members from social providers.
With the ACS Extensions you can add members directly from social providers such as Facebook, Windows Live ID, Google and Yahoo. The sign in and sign up pages you created in the two former steps provide the user experience elements to support the registration and authentication flow. In this task you will learn how to use the administrative features of the ACS Extensions to invite one new member. You will discover that the process is practically the same of creating traditional members, minus the pain of managing credentials.
Figure 36 - Create Member
Figure 37 - The Create Member popup dialog
Note: As soon as you hit the Create button, the ACS Extensions create one invitation mail and send it to the user (using the SMTP you configured in the setup). That invitation contains a specially crafted activation link, which the member can use to associate his social account of choice with your web site using the activation assets you created in the former step. If you want to modify the template of the invitation email, you can do when creating a member from within the Create Member Dialog. The newly created member has some extra properties in respect to the default Umbraco member: one flag reporting if the invitation was sent, another if the account has been activated (false at the beginning, it flips when the user successfully signs up) and from which identity provider he is coming from (gets a value at activation time, according to the member’s choice).
Figure 38 - Edit Member panel
Let’s step for a moment in the shoes of the new member and see how the invitation and sign up experience looks like.
The flow begins when the prospect member receives the invitation mail, as shown below.
Figure 39 - The default invitation mail
As mentioned above, the invitation email template can be configured to fit your preferences.
The URL has been constructed to trigger the activation process; the ticketnumber parameter is used for associating the member defined in Umbraco with this specific email verification transaction.
Following the link, the prospect member will land on the activation page, which in turn will redirect to the Sign Up page.
Figure 40 - The Sign UpPage
There the user can select the Identity Provider he wants to use for signing in the web site. That account will be mapped to the Social Member created in Umbraco, with all its properties (including the assigned roles). For the purpose of this tutorial, let’s assume that the use picks Windows Live ID and successfully authenticates.
Figure 41 - Activation Completed
As a result, Umbraco can finally serve the activation page.
Now, you may remember from the earlier steps that the current member has been assigned to the Common Members group; that’s not enough for accessing the Go further page, which you configure to be visible only to Power Members. If you click on Go further at this point, you will get redirected to the error page.
Figure 42 - Unauthorized
Figure 43 - Updated Member Details
Figure 44 - Access Granted.
There you have it: your Umbraco web site is now integrated with Windows Live ID, Facebook, Google, Yahoo and any other social provider the Access Control Service will support in the future! It takes much longer to explain how to do it than to do it: the average time for walking through this tutorial is consistently under the 20 minutes.