SL.Phone.Federation, I made it better

There is the Windows Phone Azure Toolkit. It has these fancy project templates that load your Windows Phone app up with an Azure Storage Service Proxy, ACS, Table or SQL Azure based AuthZ, etc. Once you are done you have a behemuth of a Windows Phone app and everything ticks and ties (for the most part). But try and learn what they are doing or change something slightly and CLANG!

I searched long and hard for a simple sample that demonstrates the use of Windows Azure Access Control Service with Windows Phone. Yes, all I want is AuthN. No Azure Storage, No Push Notifications, No AuthZ. Just AuthN. I couldn’t find it.

As a result I built a singleton class that simplifies the usage of the Access Control Service on Windows Phone. I had the following goals in making this modification:

1. Reduce setup tasks & points of failure

2. Provide easier access to the available claims

Download my solution here.

Here’s what’s in the box:

Reduce Setup tasks & points of failure

1. Eliminated App.xaml resource “rstrStore”

2. Moved initialization of Access Control Service out of LoginView.xaml and into a single line of code. Just add this line of code to your Application’s constructor:

 AuthenticationState.Instance.Configure("myNamespace", "uri:MyRealm");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Where ‘myNamespace’ is the sub-domain you have setup within Windows Azure Access Control Service and MyRealm is the realm you created. For more details about configuring the Access Control Service see this article. See bottom of this post for the new LoginView.

Provide easier access to available claims

1. AuthenticationState provides a Claims Dictionary. This is mostly for you enterprise developers out there who might be building internal Windows Phone apps that talk to Azure ACS + ADFS. With ADFS you can specify custom claims that will show up. If you are using a public / consumer iP (identity Provider) you don’t care about is.

var myCorporateClaim = "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier";
var currentUsersEmailAddress = 
    AuthenticationState.Instance.Claims[myCorporateClaim];

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

2. AuthenticationState provides helper properties for common claims (e.g. IdentityProvider, NameIdentifier, EMailAddress, etc.). If you are using a public / consumer iP then you care about these a lot. This should make them easier to access.

var currentUsersEmailAddress = AuthenticationState.Instance.EMailAddress;

Here’s what your LoginView looks like with this code:

NOTE: The Assembly has changed!

<phone:PhoneApplicationPage 
    x:Class="SilverDollar.GameFabric.WindowsPhone.Views.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:fed="clr-namespace:SL.Phone.Federation.Controls;assembly=SilverDollar.GameFabric.WindowsPhone.Federation"
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"
    >

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="{Binding Title}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="log in" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <fed:AccessControlServiceSignIn x:Name="SignInControl" />
        </Grid>
    </Grid>
    
</phone:PhoneApplicationPage>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Enjoy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s