Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 26: Authentication and Personalization

The data we work with in business application is valuable.  We need to protect the data.. sometimes by keeping up with exactly who accesses and updates what data when and other times we need to actively prevent data from being accessed expected by trust parties.   

The web is increasingly becoming a personal place – applications often “know about you” enabling users to having customized settings that work everywhere the apps works. 

In this example, I will take our ever popular SuperEmployees application and augment it to show more details on the authentication and personalization. 

You can see the full series here.

The demo requires (all 100% free and always free):

1. VS2008 SP1
2. Silverlight 3 RTM
3. .NET RIA Services July '09 Preview

 download the full demo files

 

Basic Authentication

Let’s start by looking at how we ensure that only authenticated users can access access the data and keep a very simple log of who access the data.  

Starting with the original example,  let’s look at adding authentication to the GetSuperEmployees() method on the DomainService in the server project.

1. [RequiresAuthentication]
2. public IQueryable<SuperEmployee> GetSuperEmployees()
3. {

Once we use the RequiresAuthentication attribute, the system will ensure that only calls from authenticated users make it through.  That means we can do some very simple such as logging who is accessing the data and when:

1. [RequiresAuthentication]
2. public IQueryable<SuperEmployee> GetSuperEmployees()
3. {
4.     File.AppendAllText(@"C:\users\brada\desktop\userslog.txt",
5.         String.Format("{0}: {1} {2}", DateTime.Now,
6.         ServiceContext.User.Identity.Name, Environment.NewLine));

(check out a package such as Log4net for a complete solution for logging).

Now when we run the application, no results are returned. 

 

We need to log in to see some results… Luckily the Business Application Template that ships with .NET RIA Services includes great support for this. 

Click on login

Notice here, we could change to use window auth to get integrated NTLM security, either way works fine.

Then register now

and we can create a new user directly from the Silverlight client.

Notice if you want to customize the look and feel of any of these dialogs, it is easy to do by looking in the Views\LoginControl.xaml, Views\LoginWindow.xaml.

And if you want to control the backend on how these are implemented, you can by looking in server project under Services\AuthenticationService.cs and UserRegistrationService.cs.  By default these go against the ASP.NET Membership and roles system, but you can customize them to do whatever you’d like by simply overriding the methods there. 

Now, we just need to react to the logged in event.  In this case, I am going to simply reload the data when the user logs in.  Lines 10-13 signs up for the logged in event and sets reloads the data, this time, as an authenticated user. 

1. public Home()
2. {
3.     InitializeComponent();
4.  
5.     var context = dds.DomainContext as SuperEmployeeDomainContext;
6.     originFilterBox.ItemsSource = context.Origins;
7.  
8.     context.Load(context.GetOriginsQuery());
9.  
10.     RiaContext.Current.Authentication.LoggedIn += (s, e) =>
11.     {
12.         if (dds != null) dds.Load();
13.     };
14.  
15. }

 

 

And notice, the client knows who I am:

And the server knows as well..  If you go look at the log file we create in the DomainService we will see:

So, that is cool, but I think we can do a bit better on the client user experience.   After all, I get no error whatsoever to tell me I need to log in to see the data.  

First, let’s follow best practice and handle the DDS.LoadedData event and simply show any errors that are returned. 

1. <riaControls:DomainDataSource x:Name="dds"
2.         AutoLoad="True"
3.         QueryName="GetSuperEmployeesQuery"
4.         LoadedData="dds_LoadedData"
5.         LoadSize="20">

Then the implementation is very simple:

1. private void dds_LoadedData(object sender, LoadedDataEventArgs e)
2. {  
3.     if (e.Error != null)
4.     {
5.         var win = new ErrorWindow(e.Error);
6.         win.Show();
7.     }
8. }

Now, when we run this app, we get this error:

That is helpful, maybe for a developer, but for an end user, maybe we want something more explicit. 

The first step is to not even make the request if the user is not authenticated.  We know that on the client, so this is very easy to do.

First, let’s sign up for the DDS.DataLoading event to capture the load before it happens. 

1. <riaControls:DomainDataSource x:Name="dds"
2.         AutoLoad="True"
3.         QueryName="GetSuperEmployeesQuery"
4.         LoadedData="dds_LoadedData"
5.         LoadingData="dds_LoadingData"
6.         LoadSize="20">

then we will simple cancel the load if the user is not authenticated. 

1. private void dds_LoadingData(object sender, LoadingDataEventArgs e)
2. {
3.    e.Cancel = !RiaContext.Current.User.IsAuthenticated;
4. }

 

Now, let’s provide an alternate way to tell the user they need to log on.     We simply add some text and make it visible only when the user is not authenticated. 

1. <TextBlock Text="Data is only available to authenticated users" Foreground="Red"
2.            DataContext="{StaticResource RiaContext}"
3.            Visibility="{Binding Path=User.IsAuthenticated, Converter={StaticResource VisibilityConverter}}">
4. </TextBlock>

The implementation of the value convert is pretty simple. 

1. public class VisibilityConverter : IValueConverter
2. {
3.     public object Convert(
4.         object value,
5.         Type targetType,
6.         object parameter,
7.         CultureInfo culture)
8.     {
9.         bool visibility = (bool)value;
10.         return visibility ? Visibility.Collapsed : Visibility.Visible;
11.     }
12.  
13.     public object ConvertBack(
14.         object value,
15.         Type targetType,
16.         object parameter,
17.         CultureInfo culture)
18.     {
19.         Visibility visibility = (Visibility)value;
20.         return (visibility != Visibility.Visible);
21.     }
22. }

 

Now, when we run this, we get a nice UX:

Then when we log in, it looks nice.

We can even make it a bit better by giving users an easy to to log in from here:

1. <TextBlock Text="Data is only available to authenticated users. Please click here to log in." Foreground="Red"
2.            DataContext="{StaticResource RiaContext}"
3.            Visibility="{Binding Path=User.IsAuthenticated, Converter={StaticResource VisibilityConverter}}"
4.            MouseLeftButtonUp="TextBlock_MouseLeftButtonUp">
5. </TextBlock>

 

1. private void TextBlock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
2. {
3.     new LoginWindow().Show();
4. }

 

What we showed in this section is how easy it is to require authentication for data and how to create a great user experience for this on the client. 

 

Personalization

Now that we have the basics of authentication down, let’s see how we can provide a bit more of a personalized experience.  For many applications, uses spend a huge amount of time in the application, we want them to feel comfortable and in control of their experience.    For the first part of this, let’s create a user setting for the background color of the application.  Each user can have a different value and it should follow them no mater what machine they run the application on.   

Let’s start be defining a profile property in the web.config file. 

1. <profile enabled="true" >
2.   <properties>
3.     <add name="PageBackgroundColor"  defaultValue="White"/>
4.   </properties>
5. </profile>

Then we can make this strongly typed by adding it to the AuthenticationService.cs file on the server.  

1. public class User : UserBase
2. {
3.     public string PageBackgroundColor { get; set; }
4. }

 

Now we can simply access this on the client.  First let’s define a page to set this value.  in MyFirstPage.xaml… let’s add some UI:

1. <StackPanel Orientation="Horizontal" >
2.     <TextBlock Text="Enter background color: "/>
3.     <TextBox x:Name="colorTextBox" KeyDown="colorTextBox_KeyDown" Width="100" />
4.     <Button Content="Save" Click="Button_Click" />
5. </StackPanel>
6. <TextBlock x:Name="saveStatus"/>

 

We can handle the save button click as follows..

1. private void Button_Click(object sender, RoutedEventArgs e)
2. {
3.     string colorString = this.colorTextBox.Text.Trim().ToLower();
4.     colorString = colorString.Substring(0, 1).ToUpper() + colorString.Substring(1, colorString.Length - 1);
5.     RiaContext.Current.User.PageBackgroundColor = colorString;
6.     this.saveStatus.Text = "setting saving..";
7.     RiaContext.Current.Authentication.SaveUser((o) =>
8.                 { this.saveStatus.Text = "setting saved"; },
9.       null);
10. }
11.  
12. private void colorTextBox_KeyDown(object sender, KeyEventArgs e)
13. {
14.     this.saveStatus.Text = "";
15. }

Notice in lines 3-4 we are normalizing the string name of the color so that it is “xaml compliant”..
Then in line 5 we are setting the strongly typed User.PageBackgroundColor property. 
Then in lines 6-9 we are simply giving some UI hints as we save this value back to the server. 

Of course this will only work if the user is logged in first, so this time, let’s be proactice and encourage the user to log in when they hit the page for the first time.

1. protected override void OnNavigatedTo(NavigationEventArgs e)
2. {
3.     if (!RiaContext.Current.User.IsAuthenticated)
4.     {
5.         new LoginWindow().Show();
6.     }
7. }

 

The last step here is the honor this value when it is set.  That turns out to be pretty easy in this case.  Just go to MainPage.Xaml and databind the LayoutRoot’s backgroun color to this value.  

1. <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}"
2.       DataContext="{StaticResource RiaContext}"
3.       Background="{Binding Path=User.PageBackgroundColor}">

 

then when we log in…

And if we change the color to blue…

And notice the color change effects the whole app. 

And if I hit the app from a different machine, on a different browser, my setting still carries forward… We start off not logged in we get the default:

but when we log in… our settings show up.

Now this is a user specific setting, so if I create a new user “Glenn” and set his background color to pink

that doesn’t effect the background color for Darb…

 

OK, background color is fun and all, but what might be even more useful is to store some state on how I last left the application.   This ensures that as I access the application from over time, the context of my work is preserved.  

So, let’s add a few more fields to our profile.. 

1. <profile enabled="true" >
2.   <properties>
3.     <add name="PageBackgroundColor"  defaultValue="White"/>
4.     <add name="SortOrder"  type="Int32" defaultValue="0"/>
5.     <add name="SortProperty"  defaultValue="Name"/>
6.     <add name="OriginFilter"  defaultValue=""/>
7.   </properties>
8. </profile>

then update the User class to make this strongly typed.

1. public class User : UserBase
2. {
3.     public string PageBackgroundColor { get; set; }
4.     public int SortOrder { get; set; }
5.     public string SortProperty { get; set; }
6.     public string OriginFilter { get; set; }
7. }

 

We need to set the UI based on the user’s settings.

1. void LoadUserState()
2. {
3.     var user = RiaContext.Current.User;
4.     if (user.OriginFilter != null)
5.         originFilterBox.Text = user.OriginFilter;
6.     else
7.         originFilterBox.Text = string.Empty;
8.  
9.     if (user.SortProperty != null)
10.     {
11.         dds.SortDescriptors.Add(new SortDescriptor(user.SortProperty,
12.                                 (SortDirection)user.SortOrder));
13.     }
14. }

And we need to call that when the page is navigated to…

1. protected override void OnNavigatedTo(NavigationEventArgs e)
2. {
3.     LoadUserState();

and when the user logs on.

1. RiaContext.Current.Authentication.LoggedIn += (s, e) =>
2. {
3.     User user = RiaContext.Current.User;
4.     if (dds != null)
5.     {
6.         dds.Load();
7.         LoadUserState();
8.     }
9. };

 

Next we need to store the values back to the server at the right time.  This SaveUserState method plucks the right values out of the UI, and saves them the server if the values have changed. 

1. string lastSave;
2. void SaveUserState()
3. {
4.     User user = RiaContext.Current.User;
5.     if (!user.IsAuthenticated) return;
6.  
7.     var order = dds.SortDescriptors.LastOrDefault();
8.     if (order != null)
9.     {
10.         user.SortProperty = order.PropertyPath.Value.ToString();
11.         user.SortOrder = (int)order.Direction;
12.     }
13.     user.OriginFilter = this.originFilterBox.Text;
14.  
15.     if (lastSave != user.SortProperty + user.SortOrder + user.OriginFilter)
16.     {
17.          RiaContext.Current.Authentication.SaveUser();
18.          lastSave = user.SortProperty + user.SortOrder + user.OriginFilter;
19.     }
20.  
21. }

 

We need to call this method when the user navigates away.

1. protected override void OnNavigatedFrom(NavigationEventArgs e)
2. {
3.     SaveUserState();
4. }

and, periodically we check to see if we need to save the changes back to the server.  So we set this up in the forms constructor..

1. Timer = new DispatcherTimer();
2. Timer.Interval = TimeSpan.FromSeconds(10);
3. Timer.Tick += (o, e) => SaveUserState();
4. Timer.Start();

 

Now, when we run it..   setup some sort order and a filter

then log out

 

log back in (from a different machine) and we see it is back just where we left off.

 

What we saw in this section what how to personalize the user experience based on the user preferences. 

 

Admin UI

In this last section, let’s look at how to build out an admin UI.. What we want to do is provide a page that allows Admins to see all the users and edit their profile settings.

First, let’s go into the AuthenticationService and add some custom methods to return all the users.  We should be sure that only users in the Admin role can access this service. 

1.     [EnableClientAccess]

2.     public class AuthenticationService : AuthenticationBase<User>

3.     {

5.         [RequiresRoles("Admin")]

6.         public IEnumerable<User> GetAllUsers()

7.         {

8.             return Membership.GetAllUsers().Cast<MembershipUser>().Select(mu => this.GetUserForMembershipUser(mu));

9.         }

10.  

11.         private User GetUserForMembershipUser(MembershipUser membershipUser)

12.         {

13.             return this.GetAuthenticatedUser(

14.                 new GenericPrincipal(new GenericIdentity(membershipUser.UserName), new string[0]));

15.         }

 

Now, lets add some Silverlight UI to consume this.  We will create a new page called “Admin”.   The first thing we want to do is to prompt the user to log in if they are not already logged in as a user in the admin role.

1. protected override void OnNavigatedTo(NavigationEventArgs e)
2. {
3.     if (!RiaContext.Current.User.Roles.Contains("Admin"))
4.     {
5.         new LoginWindow().Show();
6.         RiaContext.Current.Authentication.LoggedIn += (s, ev) =>
7.         {
8.             if (dds != null) dds.Load();
9.         };
10.     }
11. }

 

Next, we define a DomainDataSource for accessing  the AuthenticationService

1. <riaControls:DomainDataSource x:Name="dds"
2.         AutoLoad="True"
3.         QueryName="GetAllUsersQuery"
4.         LoadSize="20">
5.  
6.     <riaControls:DomainDataSource.DomainContext>
7.         <App:AuthenticationContext/>
8.     </riaControls:DomainDataSource.DomainContext>
9.  
10. </riaControls:DomainDataSource>

then we define some simple UI for working with the data..

1. <activity:Activity IsActive="{Binding IsBusy, ElementName=dds}">
2.     <StackPanel>
3.         <dataControls:DataForm x:Name="dataForm1"
4.                                Height="393" Width="331"
5.            VerticalAlignment="Top"       
6.            Header="User Data"
7.            ItemsSource="{Binding Data, ElementName=dds}"                     
8.            HorizontalAlignment="Left" >
9.         </dataControls:DataForm>
10.  
11.         <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
12.             <Button Content="Submit" Width="105" Height="28"
13.               Click="SubmitButton_Click" />
14.  
15.         </StackPanel>
16.  
17.     </StackPanel>
18. </activity:Activity>

Now, we run it..  log in but it doesn’t give us any data… why?

Well, the user we created is not an Admin.  To make them a Admin, go to the Web Admin tool and add them to the “Admin” role.

Select “Security”

Then under Roles, Add a new role for “Admin”

and under Users, “Manager User”… here you can easily add your user to the role. 

Now when I log on and go to the Admin page, I can access the all the user’s settings.

What we saw in this section was how to build an admin UI for your applications. 

 

I hope you found this to be a helpful walkthrough of the authentication and personalization support in RIA Services.   Again, you can download the full demo files or check out the full series here.

Enjoy.