ACS Extensions for Umbraco - Part I: Setup

More unfolding of the tangle of new content announced with the ACS launch.

Today I want to highlight the work we’ve been doing for augmenting Umbraco with authentication and authorization capabilities straight out of ACS. We really made an effort to make those new capabilities blend into the Umbraco UI, and without false modesty I think we didn’t get far from the mark Smile

I would also like to take this chance to thank Southworks, our long-time partner on this kind of activities, for their great work on the ACS Exensions for Umbraco.

Once again, I’ll apply the technique I used yesterday for the ACS+WP7+OAuth2+OData lab post; I will paste here the documentation as is. I am going to break this in 3 parts, following the structure we used in the documentation as well.

Access Control Service (ACS) Extensions for Umbraco

setup-video 'Click here for a video walkthrough of this tutorial'

 

Setting up the ACS Extensions in Umbraco is very simple. You can use the Add Library Package Reference from Visual Studio to install the ACS Extensions NuGet package to your existing Umbraco 4.7.0 instance. Once you have done that, you just need to go to the Umbraco installation pages, where you will find a new setup step: there you will fill in few data describing the ACS namespace you want to use, and presto! You’ll be ready to take advantage of your new authentication capabilities.

noteNote:

Alternatively, if you don’t want the NuGet Package to update Umbraco’s source code for you, you can perform the required changes manually by following the steps included in the manual installation document found in the ACS Extensions package. Once you finished all the install steps, you can go to the Umbraco install pages and configure the extension as described above. You should consider the manual installation procedure only in the case in which you really need fine control on the details of how the integration takes place, as the procedure is significantly less straightforward than the NuGet route.

In this section we will walk you through the setup process. For your convenience we are adding one initial section on installing Umbraco itself. If you already have one instance, or if you want to follow a different installation route than the one we describe here, feel free to skip to the first section below and go straight to the Umbraco.ACSExtensions NuGet install section.

Install Umbraco using the Web Platform Installer and Configure It

  1. Launch the Microsoft Web Platform Installer from https://www.microsoft.com/web/gallery/umbraco.aspx

    72af6696-9ea6-4fe7-9d14-1e87c2c7110e

    Figure 1 - Windows Web App Gallery | Umbraco CMS

  2. Click on Install button. You will get to a screen like the one below:

    836673b3-3c97-4573-a9d4-057fed156c7d

    Figure 2 - Installing Umbraco via WebPI

  3. Choose Options. From there you’ll have to select IIS as the web server (the ACS Extensions won’t work on IIS7.5).

    6f32a32c-7ad9-4545-8f21-3114c645782d

    Figure 3 - Web Platform Installer | Umbraco CMS setup options

  4. Click on OK, and back on the Umbraco CMS dialog click on Install.

  5. Select SQL Server as database type. Please note that later in the setup you will need to provide the credentials for a SQL administrator user, hence your SQL Server needs to be configured to support mixed authentication.

    c3249465-e205-484e-8a95-6149a170b381

    Figure 4 - Choose database type

  6. Accept the license terms to start downloading and installing Umbraco.

  7. Configure the web server settings with the following values and click on Continue.

    34c67a5e-bae8-4c0f-beb3-198a732f0922

    Figure 5 - Site Information

  8. Complete the database settings as shown below.

    e981b429-2e80-4a3a-9f1f-1a8cb0fe9398

    47ca7626-f8ac-42c6-83b5-564a2cc1360e

    Figure 6 - Database settings

  9. When the installation finishes, click on Finish button and close the Web Platform Installer.

  10. Open Internet Information Services Manager and select the web site created in step 7.

  11. In order to properly support the authentication operations that the ACS Extensions will enable, your web site needs to be capable of protecting communications. On the Actions pane on the right, click Bindings… and add one https binding as shown below.

    eb8d0557-aab8-4a9f-9210-2d846722d01d

    Figure 7 - Add Site Binding

  12. Open the hosts file located in C:\Windows\System32\drivers\etc, and add a new entry pointing to the Umbraco instance you’ve created so that you will be able to use the web site name on the local machine.

    05c952f6-62fb-4fd2-a004-c7aae0a226ec

    Figure 8 - Hosts file entry

  13. At this point you have all the bits you need to run your Umbraco instance. All that’s left to do is make some initial configuration: Umbraco provides you with one setup portal which enables you to do just that directly from a browser. Browse to https://{yourUmbracoSite}/install/; you will get to a screen like the one below.

    d1b25d32-8a2c-4b88-ac37-793df8e9c426

    Figure 9 - The Umbraco installation wizard

  14. Please refer to the Umbraco documentation for a detailed explanation of all the options: here we will do the bare minimum to get the instance running. Click on “Let’s get started!” button to start the wizard.

  15. Accept the Umbraco license.

  16. Hit Install in the Database configuration step and click on Continue once done.

  17. Set a name and password for the administrator user in the Create User step.

  18. Pick a Starter Kit and a Skin (in this tutorial we use Simple and Sweet@s).

  19. Click on Preview your new website: your Umbraco instance is ready.

    6a3b2fae-2658-429f-afb6-5c3f276f6aae

    Figure 10 - Your new Umbraco instance is ready!

Install the Umbraco.ACSExtensions via NuGet Package

Installing the ACS Extensions via NuGet package is very easy.

  1. Open the Umbraco website from Visual Studio 2010 (File -> Open -> Web Site… )

  2. Open the web.config file and set the umbracoUseSSL setting with true.

    9037edd0-6d75-467d-b5c3-010b96b4c3cd

    Figure 11 - umbracoUseSSL setting

  3. Click on Save All to save the solution file.

  4. Right-click on the website project and select “Add Library Package Reference…” as shown below. If you don’t see the entry in the menu, please make sure that NuGet 1.2 is correctly installed on your system.

    b32a7562-4a77-4601-9466-e2ce7591c5d5

    Figure 12 -

    umbracoUseSSL setting

  5. Select the Umbraco.ACSExtensions package form the appropriate feed and click install.

    note[1]Note:

    At the time in which you will read this tutorial, the ACS Extensions NuGet will be available on the NuGet official package source: please select Umbraco.ACSExtensions from there. At the time of writing the ACS Extensions are not published on the official feed yet, hence in the figure here we are selecting it from a local repository. (If you want to host your own feed, see Create and use a NuGet local repository )

    e14c3124-5725-4936-944d-43c3053394b6

    Figure 13 - Installing theUmbraco. ACSExtensions NuGet package

If the installation takes place correctly, a green checkmark will appear in place of the install button in the Add Library Package Reference dialog. You can close Visual Studio, from now on you’ll do everything directly from the Umbraco management UI.

Configure the ACS Extensions

Now that the extension is installed, the new identity and access features are available directly in the Umbraco management console. You didn’t configure the extensions yet: the administrative UI will sense that and direct you accordingly.

  1. Navigate to the management console of your Umbraco instance, at https://{yourUmbracoSite}/umbraco/. If you used an untrusted certificate when setting up the SSL binding of the web site, the browser will display a warning: dismiss it and continue to the web site.

  2. The management console will prompt you for a username and a password, use the credentials you defined in the Umbraco setup steps.

  3. Navigate to the Members section as shown below.

    7b906eec-f469-4368-9139-f61862e1b55e

    Figure 14 - The admin console home page

  4. The ACS Extensions added some new panels here. In the Access Control Service Extensions for Umbraco panel you’ll notice a warning indicating that the ACS Extensions for Umbraco are not configured yet. Click on the ACS Extensions setup page link in the warning box to navigate to the setup pages.

    5b084653-9e2c-4886-9c43-6a9a616eb4fa

    Figure 15 - The initial ACS Extensions configuration warning.

    74ee66d0-2042-4e2c-81da-b116d995adb1

    Figure 16 - The ACS Extensions setup step.

The ACS Extensions setup page extends the existing setup sequence, and lives at the address https://{yourUmbracoSite}/install/?installStep=ACSExtensions. It can be sued both for the initial setup, as shown here, and for managing subsequent changes (for example when you deploy the Umbraco site form your development environment to its production hosting, in which case the URL of the web site changes). Click Yes to begin the setup.

Access Control Service Settings

Enter your ACS namespace and the URL at which your Umbraco instance is deployed. Those two fields are mandatory, as the ACS Extensions cannot setup ACS and your instance without those.

The management key field is optional, but if you don’t enter most of the extensions features will not be available.

3ca687b5-0454-489d-b701-305d5254aaa8

Figure 17 - Access Control Service Setttings

note[2]Note:

The management key can be obtained through the ACS Management Portal. The setup UI provides you a link to the right page in the ACS portal, hut you’ll need to substitute the string {namespace} with the actual namespace you want to use
fb97b81f-0cf2-42dc-8783-a43b9dbe62a4

Social Identity Providers

Decide from which social identity providers you want to accept users from. This feature requires you to have entered your ACS namespace management key: if you didn’t, the ACS Extensions will use whatever identity providers are already set up in the ACS namespace.

Note that in order to integrate with Facebook you’ll need to have a Facebook application properly configured to work with your ACS namespace. The ACS Extensions gather from you the Application Id and Application Secret that are necessary for configuring ACS to use the corresponding Facebook application.

824a50e8-44b9-4383-b742-1e87535acdcf

Figure 18 - Social Identity Providers

SMTP Settings

Users from social identity providers are invited to gain access to your web site via email. In order to use the social provider integration feature you need to configure a SMTP server.

bced5f6f-e82c-49b8-9bbc-a7ba6ac4f001

Figure 19 - SMTP Settings

  1. Click on Install to configure the ACS Extensions.

    71777c8e-1548-4818-959e-cbbf26ab09fb

    Figure 20 - ACS Extension Configured

If everything goes as expected, you will see a confirmation message like the one above. If you navigate back to the admin console and to the member section, you will notice that the warning is gone. You are now ready to take advantage of the ACS Extensions.

cb5d0925-6849-4ac7-8025-bce518cbb9a9

Figure 21 - The Member section after the successful configuration of the ACS Extensions