FBA customization with Office 365 and ADFS

Article
10/03/2012

First I'd like to give a shout out to Dmitrii who recently provided instructions on updating the FBA to support ADFS. I used his blog entry as a source to update my installation. I did have some minor changes but the original blog can be found here.

By default with Office 365 you have WIA (Windows Integrated Authorization) for ADFS to validate your claim against AD. I changed the default type to Forms Based Authentication and detailed the steps below.

The major changes I needed included background, helpdesk information since O365 can't be customized, and getting rid of my unsightly naming convention with my ADFS. It was a long name and it appeared on my sign in page.

I started with my FormsSignin.aspx page.

I wanted my screen to look like this:

The following files have control over the Forms Signin:

Inetpub\adfs\ls\web.config
Inetpub\adfs\ls \FormsSignIn.aspx
Inetpub\adfs\ls \FormsSignIn.aspx.cs
Inetpub\adfs\ls\App_GlobalResources\CommonResources.resx
Inetpub\adfs\ls\App_GlobalResources\CommonResources.en.resx (and many other language files, if you need to present it in those languages)
Inetpub\adfs\ls\MasterPages\StyleSheet.css
Inetpub\adfs\ls\MasterPages\MasterPage.master
Inetpub\adfs\ls\MasterPages\MasterPage.master.cs
On the following diagram I’ll point out what area in the Forms SignIn page is controlled by what configuration file.

Modify web.config and bring forward Forms to be first authentication type:

<microsoft.identityServer.web>

Modify the global.asax.cs and FormsSignIn.aspx.cs to add UPN into FBA.

https://social.technet.microsoft.com/wiki/contents/articles/4184.aspx

Background. Modify StyleSheet.css from this:
body
{
background-color: #ffffff;
color:#222222;
font-size: 0.8em;
font-weight: normal;
font-family: "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
margin: 0px;
background-repeat: repeat-x;
background-image: url(../App_Themes/Default/header_background.png);
}
To this:
body
{
background-color: #ffffff;
color:#222222;
font-size: 0.8em;
font-weight: normal;
font-family: "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
margin: 0px;
background-repeat: repeat-x;
background-image: url(../App_Themes/Default/custombackground.gif);
}
. Header. First, in MasterPage.master move the following code
<div class="Header">
<asp:Label ID="PageTitleLabel" runat="server"></asp:Label>
</div>
From being in front of the
<%
string logoPath =
System.Web.Configuration.WebConfigurationManager.AppSettings[ "logo" ];
if( !String.IsNullOrEmpty( logoPath ) )
{
%>
<div class="GroupXLargeMargin">
<img src="<%= logoPath %>" alt="logo" />
</div>
<%
}
%>
To be behind it, so it looks like this:
<%
string logoPath =
System.Web.Configuration.WebConfigurationManager.AppSettings[ "logo" ];
if( !String.IsNullOrEmpty( logoPath ) )
{
%>
<div class="GroupXLargeMargin">
<img src="<%= logoPath %>" alt="logo" />
</div>
<%
}
%>
<div class="Header">
<asp:Label ID="PageTitleLabel" runat="server"></asp:Label>
</div>
Second, update StyleSheet.css Header to look like this:

.Header

{

color: 000000;

padding: 8px 0 5px 0;

margin-bottom: 1px;

font-size: 200%;

font-weight:bold;

position:relative;

left:184px;

top:-63px;

}

To replace the "Sign In" I had to make changes to for And finally, replace “Sign In” text in both CommonResources files for the FormsSignInPageTitle text label to be “Welcome to the Microsoft EDU STU team”.

</data>

<value>Welcome to the Microsoft EDU STU team</value>

</data>

STS Title. This is your STS server name. To hide it you can do the following:
a. In MasterPage.master page change the following code
<div class="TextSizeXLarge">
<asp:Label ID="STSLabel" runat="server"></asp:Label>
</div>
To look like this:
<div class="STSTitleNotVisible">
<asp:Label ID="STSLabel" runat="server"></asp:Label>
</div>
b. In StyleSheet.css create new code for STSTitleNotVisible to be this:
.STSTitleNotVisible
{
visibility:hidden;
}
To introduce new text in the main section update FormsSignIn.aspx file with new Label Texts and introduce that text to the CommonResources files.
a. In FormsSignIn.aspx make <asp:Content section to look like this:

div class="GroupXLargeMargin"><asp:Label Text="<%$ Resources:CommonResources, FormsSignInHeader%>" runat="server" /></div>

<tr>

<td>

<span class="Label"><asp:Label Text="<%$ Resources:CommonResources, UsernameLabel%>" runat="server" /></span>

</td>

<td>

<asp:TextBox runat="server" ID="UsernameTextBox" ></asp:TextBox>

</td>

<asp:Label Text="<%$ Resources:CommonResources, UsernameExample%>" runat="server" />

</td>

</tr>

<tr>

<td>

<span class="Label"><asp:Label Text="<%$ Resources:CommonResources, PasswordLabel%>" runat="server" /></span>

</td>

<td>

<asp:TextBox runat="server" ID="PasswordTextBox" TextMode="Password" ></asp:TextBox>

</td>

</tr>

<tr>

<asp:Label ID="ErrorTextLabel" runat="server" Text="" Visible="False"></asp:Label>

</td>

</tr>

<tr>

<asp:Button ID="SubmitButton" runat="server" Text="<%$ Resources:CommonResources, FormsSignInButtonText%>" OnClick="SubmitButton_Click" CssClass="Resizable"/>

</div>

</td>

</tr>

</table>

<asp:Label Text="<%$ Resources:CommonResources, HomeRealmSelectionTextThree%>" runat="server" />

<a href="mailto:micore@edustl.com?subject=FEDERATION">Helpdesk@edustl.com</a>

<asp:Label Text="<%$ Resources:CommonResources, HomeRealmSelectionTextThreeHalf%>" runat="server" />

</div>

<asp:Label Text="<%$ Resources:CommonResources, HomeRealmSelectionTextFour%>" runat="server" />

</div>

</asp:Content>

b. Add the following to the CommonResouces files:

</data>

<value>NOTE: The following Identity Providers will let you into the application.</value>

</data>

<value>Welcome to the demo site provided by the Microsoft Education STU Team. If you need assistance please contact </value>

</data>

<value>- If we don't respond it's because we are busy with customers. Thank you and have a good day.</value>

</data>

<value>If you believe that you have arrived at this page by accident, please close your web browser and try accessing the application webpage URL again in a new browser session.</value>

</data>

I didn't add a button like Dmitrii did so use his guidance for that sample.
Finally, to add the logo do the following:
a. Modify web.config file by uncommenting code that specifies the name of the logo file and then place your logo file in the root folder of AD FS (Inetpub\adfs\ls\)
b. In MasterPage.master change the following code
<div class="GroupXLargeMargin">
<img src="<%= logoPath %>" alt="logo" />
</div>
To look like this:
<div class="CustomLogo">
<img src="<%= logoPath %>" alt="logo" />
</div>
c. And finally, add new code to the StyleSheet.css:

.CustomLogo

{

margin-top:25px;

}

After doing all these changes, the default looking page looks like below.

Special thanks to the original contributer Dmitrii and to my partner in troubleshooting the code Michael Icore.

FBA customization with Office 365 and ADFS

Additional resources