Video Tutorial - How to add identity to mobile applications – Windows Phone 7 and the Access Control Service – Facebook, Yahoo, Google, Live ID


  What this post is about
 

Before diving into this post, special thanks to Wade Wegner for posting this: https://www.wadewegner.com/2011/11/nuget-packages-for-windows-azure-and-windows-phone-developers/          His post introduced me to NuGet, which is an amazing step forward in application development. You simply enter a single text command and you get huge amounts of powerful functionality. With this post and Wades, you should be able to quickly and easily add code and references to your Visual Studio 2010 project that includes a mobile application that externalizes such identity providers as Facebook, Google, Live ID, Yahoo and Active Directory. MainImage This post describes the easiest possible way to add identity to your Windows Phone 7 application. Nuget is a breakthrough approach to writing applications. Nuget dramatically simplifies adding functionality to existing projects. We will use Nuget to add the needed functionality to our mobile application so that we can integrate identity from Facebook, Yahoo , Google, Live ID, and Active Directory. A demonstration version of the Access Control Service is also provided for your convenience. Your own mobile applications will require an Azure subscription. The adoption of claims-based identity is increasing. It is becoming the preferred way of securing business applications. A key advantage is that it permits the reuse of existing identity stores. Claims based approaches are known to abstract away the complexities associated with including identity management code inside of your mobile application. It is a great example of loose coupling since the entire credential submission/management and token generation mechanism is in one of 6 places:

1. Facebook
2. Google
3. Yahoo!
4. Live ID
5. Active Directory
6. Windows Azure Access Control Service

 

Your mobile application will simply receive a simple web token. A simple web token is just a dictionary that contains attributes of a user. It is a list of attributes for a user.

The great news is that this Simple Web Token is standardized. The developer doesn’t care which identity provider was used. The token format is the same.

Remember this – if you didn’t have the Windows Azure Access Control Service, the developer would have to write all this painful custom code for each identity provider (Facebook, Yahoo!, Google, Live ID, A/D). Moving forward, the developer would need to keep close tabs on how the various identity providers evolve their token format.

The Windows Azure Access Control Service helps do this magical task, saving a developer from creating this Simple Web Token based on the huge differences between Facebook, Yahoo!, Google, Live ID, A/D.

 

Here is a link to some more mobile resources and connecting to cloud and multiple device types:          

What the link is about Link
Table of Contents – Mobile to Cloud Series https://bit.ly/MobileToCloud
   
Remember, you will need to download the Azure 90-day free trial account. l

  Clipboard Viewer
  Clipboard viewer gives you all the code snippets that are used to build the application. Downloading this tool will make it trivial to find the right source code. A zip file contains your code snippets. You can easily add your own snippets as well.                     This application holds the code snippets used in my demo.         image
  There are files inside the zip – put them in the same folder once you extract the zip file
  Here is the zip file that contains clipboard viewer, including the editable data file. This download will help you build your application easily.
What the download does Link
It is the Clipboard Viewer - Easy access to source code https://brunoblogfiles.com/clipboard/wp7ACS.zip
   

  What is Clipboard Viewer?
  Clipboard Viewer is composed of two files:                    
What it does? File Name
It loads code into the clipboard. You run this application. wp7ACS.exe
The data file that holds the source code. Should be same folder as wp7ACS.exe wp7ACS.xml
   

  Video
  Here is the video of using NuGet to retrofit an existing Windows Phone 7 application to leverage identity provisioning in Facebook, Google, Live ID, and Yahoo.
Video using NuGet to externize identity to Facebook, Google, Live ID, and Yahoo. https://brunoblogfiles.com/videos/WP7PlusAcs.wmv

  Adding Identity to your mobile/cloud application
  A video is available at the end of this post. Be sure to read to the end of this post. When creating mobile/cloud applications, the goal is to externalize as much of the authentication and authorization functionality as possible. Modern applications let users choose a specific identity provider, such as Facebook, LiveID, Google, and Yahoo, even Active Directory within an organization. This sample will use the Access Control Service (ACS) to perform the authentication functionality. The workflow is quite simple. The mobile application typically uses a web browser control to login to Facebook or one of the other identity providers.         image

  Viewing the Simple Web Token
  As explained earlier, the user will authenticate with on of the identity providers (Facebook. Yahoo, Google, Live Id, Active Directory). After this process is complete (including the interaction with the Access control Service), a Simple Web token will be sent to the mobile application. The mobile application we build will simple display the contents of the Simple Web Token. The developer ha a variety of choices here with various trade-offs.  This token can be encrypted and sent back to the cloud application. The claims inside the token (information about the user) can be used to make application decisions, such as offering less or more application functionality.         image

  Simple Web Token (SWT) and the Open Authentication (OAuth) 2.0 protocol
  Using Simple Web Token (SWT) and the Open Authentication (OAuth) 2.0 protocol is based on open standards. This protocol offers many advantages:
The authentication process is managed externally from your mobile application.
The authentication process uses established standards.
The mobile/cloud application can use a claims-based approach to handle any future authorization requirements.
More can be read here https://msdn.microsoft.com/en-us/library/gg490769.aspx

  How it works
  The process of creating a Simple Web Token is explained below.
1. The user logs into an identity provider, such as Facebook.
2. Facebook returns an Facebook-specific token
3. The Facebook-specific identity token gets forwarded to the Access Control Service
4. The Access control service transforms that token into a Simple Web Token
5. The claims inside the token can be viewed by the mobile application or simply forwarded to the cloud-hosted application that requires identity
                                 image

  What the video tutorial will demonstrate
  Here is a quick synopsis about what I plan to cover in this post.
ACS We will use the Access Control Serivice (powered by Windows Azure) to help us manage Facebook, Google, Yahoo, Live, Active Directory Ids.
NuGet A breakthrough technology will help us add the needed code to support authentication. NuGet is a free, open source developer focused package management system for the .NET platform intent on simplifying the process of incorporating third party libraries into a .NET application during development.
Login Page for Windows Phone 7 Additionally, this package provides a base login page that uses the control and is easy to setup in your phone application.
What you need to do at the portal All that is left for you to do is to configure your ACS namespace via the management portal (i.e. specifying your preferences such as the identity providers you want to enable in your application) and integrate the login page into your existing Windows Phone application.

  A Temporary Demo Account has been setup to test with
  An ACS service has already been setup. It has been setup so you can run this exercise right away without setting up your own Access Control Service. Obviously, this is just for testing purposes.         You can read about how this works here:        
Login Pages and Home Realm Discovery https://msdn.microsoft.com/en-us/library/windowsazure/gg185963.aspx
                               The namespace and realm have been setup for you.
Item What was created and hosted just for this demo
Namespace – Relates to the endpoint where our ACS application lives in a Microsoft Data Center. watwindowsphone
Realm - The user account location is also called the realm uri:watwindowsphone
   

  What the NuGet Package has added
  I have highlighted what the NuGet package has added to Visual Studio. This is fantastic what NuGet can do – adding references, images, source code modules – with one command line entry .                      image The differences are more obvious using a differencing tool. The files that were there already with the default Windows Phone 7 project are still there unchanged. image

  NuGet Command for Adding Identity to Windows Phone 7
  The package manager console makes it possible to easily add the needed code and references to our project. 
Command to type in to Package Manager Console Install-Package Phone.Identity.AccessControl.BasePage

  Follow Up Materials and Links
  Very detailed information about the ACS can be found here:
ACS How To's https://msdn.microsoft.com/en-us/library/windowsazure/gg185939.aspx
For further reading, refer to these links.
Documentation for Access Control Service https://acs.codeplex.com/
Documentation for NuGet https://nuget.codeplex.com/
Technical Evangelist Lead for Windows Azure - Wade Wegner https://www.wadewegner.com/2011/11/outsourcing-user-authentication-in-a-windows-phone-application/

  Full Source Code
  Download the whole project here:
Full Source Code https://brunoblogfiles.com/SourceCode/WindowsPhone7WithACS.zip

 


  MainPage.xaml
  Code for the visual interface.
 <phone:PhoneApplicationPage 
    x:Class="WindowsPhone7WithACS.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="480"
    d:DesignHeight="768"
    
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="MainPage_Loaded">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <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="ACS + WP7"
                Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock
                x:Name="PageTitle"
                Text="Simple Web Tk"
                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">

            <ScrollViewer
                 HorizontalAlignment="Left"
                 Margin="12,34,0,0" 
                 VerticalAlignment="Top" >
                <TextBlock
                    VerticalAlignment="Top"
                    TextWrapping="Wrap"
                    Name="DisplayLoginInfo"
                    Text=""
                    Width="378"
                    />
            </ScrollViewer>



        </Grid>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
    <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
    <shell:ApplicationBar.MenuItems>
    <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
    <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
    </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage>

  MainPage.xaml.cs
  Code behind file.
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.WindowsAzure.Samples.Phone.Identity.AccessControl;


namespace WindowsPhone7WithACS
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            // Add code here

            // Retrieve Token that is stored in the application
            var simpleWebTokenStore = Application.Current.Resources["swtStore"]
                               as SimpleWebTokenStore;

            var userNameIdentifier = simpleWebTokenStore.SimpleWebToken.NameIdentifier;

            //////////////////////////////////////////////////////////////////////////
            // Loop through the claims in the token and display in the textbox

            List<KeyValuePair<string, string>> list = simpleWebTokenStore.SimpleWebToken.Claims.ToList();

            string msg = string.Empty;
            this.DisplayLoginInfo.Foreground = new SolidColorBrush(Colors.Yellow);
            foreach (KeyValuePair<string, string> pair in list)
            {
                msg += "Claim Name = \"" + pair.Key + "\"  " + Environment.NewLine +
                            Environment.NewLine + "ClaimValue = \"" + pair.Value + "\"" +
                            Environment.NewLine +
                            "==========================" +
                            Environment.NewLine + Environment.NewLine;
            }

            this.DisplayLoginInfo.Text = msg;
            
        
        }

    }
}