Branding your Hybrid Identity Solution, Part 6: The Azure Multi-Factor Authentication Server User Portal

This entry is part 6 of 6 in the series Branding your Hybrid Identity Solution

BrandingTo avoid service desk calls, you can implement Azure Multi-Factor Authentication Server’s User Portal. Colleagues enrolled in Azure Multi-Factor Authentication can access this portal to change their phone number(s), change their verification method and/or enroll and/or remove devices with the Azure Authenticator app. Even if they screw up their verification options badly, they can still access the User Portal by answering their security questions again. (if enabled)

 

Choosing your approach

Stylesheets and Graphical resources

There are two methods to apply most of the branding:

  1. Overwrite the graphical resources and css files in the default theme folder.
  2. Copy over the default theme folder, rename it, do all the customizations in that theme and then configure the User Portal to use your theme instead of the default theme.

In both cases, you would replace the default images with new ones of the same name, or adding images and changing the references to the images in the cascading stylesheet.

The second method is the preferred way, because your customizations will not be overwritten during upgrades of the Azure Multi-Factor Authentication Server product. To implement it, go into the web.config file in the web folder of the Azure MFA User Portal and change the line that begins with

<pages theme=”Default”

Replace “Default” with the name of your new folder and the new design will then be used. Be sure to make a backup of the web.config file since it will get overwritten during future upgrades.

Going further

However, both methods may lack the customizations you’d want. Then, you’ll have to resort to editing the *.aspx files. If you do that, you should make a backup of the modified page(s), because each subsequent upgrade to the Azure Multi-Factor Authentication Server product and User Portal overwrites the custom pages created.

We’ll look at going each route, with detailed steps per example:

 

Adding a Custom theme

To add a custom theme to your Azure Multi-Factor Authentication Server User Portal(s), follow these steps:

  1. Log on interactively to the Windows Server hosting the Azure Multi-Factor Authentication Server User Portal with a user account that has administrative privileges.
  2. Open File Explorer and navigate to the folder where the Azure Multi-Factor Authentication Server User Portal is installed. By default, it is located in C:\inetpub\wwwroot\MultiFactorAuth.
  3. Navigate to the \App_Themes subfolder. You’ll see a folder named Default.
  4. Right-click the folder and select Copy from the context menu.
  5. Now, right-click an empty space below the Default folder in the File Explorer user interface and select Paste from the context-menu.
  6. Right-click the newly created folder and select Rename from the context menu. Rename the folder to something appropriate. I chose to rename it to Custom.
  7. In File Explorer, go up one level. This brings you back to the folder where the Azure Multi-Factor Authentication Server User Portal is installed.
  8. Select the web.config file.
  9. Right-click it, and select Edit from the context menu. This will open Notepad, by default.
  10. In Notepad, in the Edit menu, choose Find… or type Ctrl + F simultaneously.
  11. In the Find dialog, search for Default.
     
    Finding "Default" in the Web.Config file of the Azure Multi-Factor Authentication Server User Portal (click for original screenshot)
  12. Change the text Default between the quotes to the name of your folder. In my case, I replaced it with Custom.
  13. Save the web.config file.
  14. Close Notepad.

If you have more than one (web)server hosting your Azure Multi-Factor Authentication Server User Portal, perform these steps on all the other servers as well. It is best to perform these changes on the servers in your acceptance environment, before making the changes in your production environment.

Now you can replace all the graphical resources and change the cascading stylesheet (*.css-file) without problems:

  • \images\change_mode.png
  • \images\change_phonenumber.png
  • \images\change_pin.png
  • \images\correct.png
  • \images\customize_180x100.png
  • \images\icon_help_sm.gif
  • \images\incorrect.png
  • \images\one-time_bypass.png
  • \images\PF_th_back.png
  • \images\phoneFactor_logo.png
  • \images\PN_app_back.gif
  • \images\security_questions.png
  • \images\topNav_gradient.png
  • \images\userAdmin_32x32.png
  • \images\userAdmin_180x100.png
  • \images\users_32x32.png
  • \images\users_180x100.png
  • \StyleSheet.css

Note:
The files noted in grey, above, are files I usually leave alone.

If you do run into problems, simply change the theme name in the web.config and start over in a fresh copy of the Default theme. Again, make sure to make this change on all servers running the Azure Multi-Factor Authentication User Portal.

 

Adding a disclaimer, option 1

Unfortunately, the Azure Multi-Factor Authentication Server User Portal does not natively support adding a disclaimer text, but we can add it. We can even create a different disclaimer for several languages. We’ll abuse the Version and Copyright labels to this purpose.

The easiest way that I found to add a disclaimer is to perform the following steps:

  1. Log on interactively to the Windows Server hosting the Azure Multi-Factor Authentication Server User Portal with a user account that has administrative privileges.
  2. Open File Explorer and navigate to the folder where the Azure Multi-Factor Authentication Server User Portal is installed. By default, it is located in C:\inetpub\wwwroot\MultiFactorAuth.
  3. Navigate to the \App_LocalResources subfolder.
  4. Click on the navigation_menu.ascx.resx file to select it and then right-click it. Select Edit from the context menu. This should open Notepad.
  5. Copy the contents of the lblCopyrightResource1.Text label (Default value is © 2016 Microsoft. All rights reserved.) before the contents of the lblVersionResource1.Text and place a space between the two texts. This way, the label for the Version in the User Portal is prepended by the Copyright notice.

    Prepending the contents of the "lblCopyrightResource1.Text" value to the "lblVersionResource1.Text" value (click for original screenshot)

  6. Now, we can abuse the lblCopyrightResource1.Text label for our disclaimer. Replace the default text with your disclaimer text.
  7. Save the navigation_menu.ascx.resx file.
  8. Close Notepad.

You might have noticed that the \App_LocalResources subfolder contains several files with filenames starting with navigation_menu.ascx. These files contain the language-specific labels for the Graphical User Interface (GUI) elements of the Azure Multi-Factor Authentication Server User Portal. The navigation_menu.ascx.nl.resx file, for instance contains the Dutch labels.

Note:
You might also notice, that Microsoft hasn’t really updated these files regularly. The language-independent copyright notice mentions 2016 as the copyright date, whereas the language-specific copyright notices mention 2013. Even when you’re not adding a disclaimer, you might as well fix this oversight in your Azure Multi-Factor Authentication Server User Portal(s).

 

Adding a disclaimer, option 2

Now, the above method to add a disclaimer, actually adds a disclaimer to every page in the Azure Multi-Factor Authentication Server User Portal, not just the login page. If you really want the disclaimer to show on the login page of the the Azure Multi-Factor Authentication Server User Portal, follow these steps:

  1. Log on interactively to the Windows Server hosting the Azure Multi-Factor Authentication Server User Portal with a user account that has administrative privileges.
  2. Open File Explorer and navigate to the folder where the Azure Multi-Factor Authentication Server User Portal is installed. By default, it is located in C:\inetpub\wwwroot\MultiFactorAuth.
  3. Click on the login.aspx file to select it and then right-click it. Select Edit from the context menu. This should open Notepad.
  4. In the file, find a good place to provide the disclaimer text. You might opt to place it between the login fields elements and the login button element, before these elements, or after the login button element. The login button element is identified by:

    Button ID=”btnLogin”

  5. Copy the first line of one of the login field labels and place it between, before or after the elements, but before the </div> tag. Then, change it to make it read:

    <h5><asp:Label ID=”lblDisclaimer” runat=”server” Text=”Your disclaimer text here“></asp:Label></h5>
     
  6. Save the login.aspx file.
  7. Close Notepad.

You might notice that I’m not copying over the lbl values or introducing a new lblDisclaimerResource1. This is the way to make your disclaimer available in multiple language depending on the browser language settings used by your colleagues, but the downside is that you will have to define the lblDisclaimerResource1 in each of the login.aspx.xx.resx files in the the \App_LocalResources subfolder… If your organization has different disclaimers for each of the languages/countries you do business in, than this is the way to go. Otherwise, it’s a lot of work to implement only one language-specific disclaimer…

Unfortunately, this second option for adding a disclaimer involves editing the *.aspx files of your Azure Multi-Factor Authentication Server User Portal(s). You might have a hard time getting Microsoft support for your implementation, until you revert the changes.

 

Concluding

Many Azure Multi-Factor Authentication Server User Portals are not branded. The information above provides guidance on applying branding and implementing disclaimers for your implementation.

Your Azure Multi-Factor Authentication Server User Portals could look like this, with just five minutes of work:

Example of a branded Azure Multi-Factor Authentication Server User Portal (click for original screenshot)

Further reading

Add a banner to login portal
Deploy the user portal for the Azure Multi-Factor Authentication Server
Install MFA User Portal
When you should use Azure MFA and when you should use MFA Server

Series Navigation

<< Branding your Hybrid Identity Solution, Part 5: Azure Multi-Factor Authentication Server’s AD FS Adapter implementation

leave your comment