Infragistics(R) NetAdvantage(R) Windows Phone 2012.2
Using xamAccessControl
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic demonstrates how to use the xamAccessControl™ control to authenticate with a supported authentication provider like Twitter or Facebook. In addition, code examples showing how to use the xamAccessControlCatalog control, which mirrors xamAccessControl usage, but enables you to use more than one authentication provider.

Note: Please refer to the Obtaining Access to an Authentication Provider for xamAccessControl topic, if you need more information for obtaining access to individual providers. In this topic

This topic contains the following sections:

Required Background

Before using this control, make sure you obtain a key from an authentication provider as well as read through the list of topics below to become familiar with the necessary information required as a prerequisite for this topic:

Control Configuration Overview

Control configuration chart

The table below lists the authentication scenarios covered in this topic.

Configurable Behavior Configuration Details Configuration Properties
Twitter Authentication Use the xamAccessControl to authenticate with Twitter.

AuthenticationService

Facebook Authentication Use the xamAccessControl to authenticate with Facebook.

AuthenticationService

Facebook and Twitter Authentication Use the xamAccessControlCatalog to authenticate with Facebook and Twitter.

AuthenticationService

Authentication Examples

Twitter Authentication

Preview

Figure 1: The authentication provider login page for Twitter.

The code snippet below shows how to use the xamAccessControl integrated with Twitter as the authentication provider.

In XAML:

<igauth:XamAccessControl x:Name="accessTwitter">
    <igauth:XamAccessControl.AuthenticationService>
        <igauth:AuthenticationService
        Provider="Twitter"
        ClientId="xxxYOURCLIENTIDxxx" 
        RedirectUri="http://www.thesite.com"
        ClientSecret="xxxYOURCLIENTSECRETxxx" />
    </igauth:XamAccessControl.AuthenticationService>
</igauth:XamAccessControl>

In order to display the xamAccessControl, you must explicitly set the IsOpen property in your application. The code snippet below uses a button click event to demonstrate how to show the log in screen for the selected provider.

In C#:

private void Button_Click(object sender, RoutedEventArgs e)
{
    accessTwitter.IsOpen = true;
}

In Visual Basic:

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    accessTwitter.IsOpen = True
End Sub

Facebook Authentication

Preview

Figure 2: The authentication provider login page for Facebook.

The code snippet below shows the usage of the xamAccessControl, and uses Facebook as its authentication provider.

In XAML:

<igauth:XamAccessControl x:Name="accessFacebook">
    <igauth:XamAccessControl.AuthenticationService>
        <igauth:AuthenticationService
        Provider="Facebook"
        ClientId="xxxYOURCLIENTIDxxx" 
        RedirectUri="http://www.facebook.com/connect/login_success.html" />
    </igauth:XamAccessControl.AuthenticationService>
</igauth:XamAccessControl>

In order to display the xamAccessControl, you must explicitly set the IsOpen property in your application. The code snippet below uses a button click event to demonstrate how to show the log in screen for the selected provider.

In C#:

private void Button_Click(object sender, RoutedEventArgs e)
{
    accessFacebook.IsOpen = true;
}

In Visual Basic:

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    accessFacebook.IsOpen = True
End Sub

Facebook and Twitter Authentication

Preview

Figure 3: The xamAccessControlCatalog showing Facebook and Twitter as the authentication provider options.

The code snippet below shows the usage of the xamAccessControlCatalog, and lists Twitter and Facebook as an authentication provider. Adding multiple providers gives the user the opportunity to select which service they’d like to use to authenticate.

In XAML:

<igauth:XamAccessControlCatalog x:Name="accessTwitterFacebook">
    <igauth:XamAccessControlCatalog.AuthenticationServices>
        <igauth:AuthenticationService
            Provider="Twitter"
            ClientId="xxxYOURCLIENTIDxxx"
            RedirectUri="http://www.thesite.com"
            ClientSecret="xxxYOURCLIENTSECRETxxx">
        </igauth:AuthenticationService>
        <igauth:AuthenticationService 
            Provider="Facebook"
            ClientId="xxxYOURCLIENTIDxxx"
            RedirectUri="http://www.facebook.com/connect/login_success.html">
        </igauth:AuthenticationService>
    </igauth:XamAccessControlCatalog.AuthenticationServices>
</igauth:XamAccessControlCatalog>

Authentication Event Handling

As the user authenticates against the selected provider your application must handle the possible authenticated, unauthenticated and error responses. While the events raised by the xamAccessControl and xamAccessControlCatalog controls are the same, the following code listing demonstrates how the constructor method of the Windows Phone 7 application initializes the event handlers. Under the constructor are the event methods that handle each event and display a debug message when the event is raised.

In C#:

public MainPage()
{
    InitializeComponent();

    accessTwitter.AuthenticationCompleted += new EventHandler<Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs>(accessTwitter_AuthenticationCompleted);
    accessTwitter.AuthenticationDenied += new EventHandler<Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs>(accessTwitter_AuthenticationDenied);
    accessTwitter.AuthenticationException += new EventHandler<Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs>(accessTwitter_AuthenticationException);
            
}

void accessTwitter_AuthenticationException(object sender, Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs e)
{
    Debug.WriteLine("AUTHENTICATION_EXCEPTION:" + e.Exception.Message);
}

void accessTwitter_AuthenticationDenied(object sender, Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs e)
{
    Debug.WriteLine("AUTHENTICATION_DENIED:" + e.AuthenticationDeniedResult.Error);
}

void accessTwitter_AuthenticationCompleted(object sender, Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs e)
{              
    Debug.WriteLine("AUTHENTICATION_COMPLETED:" + e.AuthenticationResult.AuthenticationToken);
}

In Visual Basic:

Public Sub New()
    InitializeComponent()

    accessTwitter.AuthenticationCompleted += New EventHandler(Of Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs)(AddressOf accessTwitter_AuthenticationCompleted)
    accessTwitter.AuthenticationDenied += New EventHandler(Of Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs)(AddressOf accessTwitter_AuthenticationDenied)

    accessTwitter.AuthenticationException += New EventHandler(Of Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs)(AddressOf accessTwitter_AuthenticationException)
End Sub

Private Sub accessTwitter_AuthenticationException(sender As Object, e As Infragistics.Controls.Authentication.AuthenticationExceptionEventArgs)
    Debug.WriteLine("AUTHENTICATION_EXCEPTION:" & Convert.ToString(e.Exception.Message))
End Sub

Private Sub accessTwitter_AuthenticationDenied(sender As Object, e As Infragistics.Controls.Authentication.AuthenticationDeniedEventArgs)
    Debug.WriteLine("AUTHENTICATION_DENIED:" & Convert.ToString(e.AuthenticationDeniedResult.[Error]))
End Sub

Private Sub accessTwitter_AuthenticationCompleted(sender As Object, e As Infragistics.Controls.Authentication.AuthenticationCompletedEventArgs)
    Debug.WriteLine("AUTHENTICATION_COMPLETED:" & Convert.ToString(e.AuthenticationResult.AuthenticationToken))
End Sub

Unlike the xamAccessControl, the xamAccessControlCatalog control contains a default template for authentication providers, removing the need to use any code behind events for manually showing the authentication provider’s login screen.

Authentication Settings Item Templates

When using the xamAccessControlCatalog control, you’ll see buttons for each authentication provider as shown in Figure 1 below.

Figure 4: Windows 7 Phone application using xamAccessControlCatalog showing Twitter and Google as authentication providers.

If you’d like to provide a custom layout, you can specify a different template for each item in the xamAccessControlCatalog to change its layout using the AuthenticationSettingsItemTemplate property. The code snippet below demonstrates how to define a custom layout using the AuthenticationSettingsItemTemplate property.

In XAML:

<igauth:XamAccessControlCatalog x:Name="accessTwitterGoogle">
    <igauth:XamAccessControlCatalog.AuthenticationServices>
        <igauth:AuthenticationService
            Provider="Twitter"
            ClientId="xxxYOURCLIENTIDxxx"
            RedirectUri="http://www.thesite.com"
            ClientSecret="xxxYOURCLIENTSECRETxxx">
        </igauth:AuthenticationService>
        <igauth:AuthenticationService 
            Provider="Google"
            ClientId="xxxYOURCLIENTIDxxx"
            RedirectUri="http://www.thesite.com/oauth2callback">
        </igauth:AuthenticationService>
    </igauth:XamAccessControlCatalog.AuthenticationServices>
    <igauth:XamAccessControlCatalog.AuthenticationServiceItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <ContentPresenter
            Content="{Binding ProviderImplementation.Icon}" 
            Width="45" 
            Height="45"
            Margin="0,0,15,15" />
                <StackPanel>
                    <TextBlock FontSize="28" Text="{Binding ProviderImplementation.Name}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </igauth:XamAccessControlCatalog.AuthenticationServiceItemTemplate>
</igauth:XamAccessControlCatalog>

Related Topics