Making the Web Authentication Broker Easy to Use.

If you’ve used the Web Authentication Broker (or WAB, as it is sometimes referred to as), you may know that it’s a little tricky to set up in a Windows Phone project. First, let me explain how the Web Authentication Broker (I’ll just call it the WAB from now on. It’s much easier to type) works.

The WAB is designed to allow you to integrate third-party sign in for your app. That could be to allow your app to access a user’s information on a service (i.e. Facebook or Twitter). On Windows Phone, you give the WAB a URI location to navigate to, and a callback URI to look for to know when the authentication process is complete. Then it will suspend your app and display the WAB, which is essentially a browser window that is sealed off from your app, so you can’t do any snooping and inject anything malicious into the website. The user can then go through the process of signing in to the service and granting your app access to their information. Once it is done, and the WAB detects the callback URI you provided, it will close the WAB and navigate back to your app, providing the access codes that the service provided.

The tricky part in all this is handling when your app is re-activated. In the samples Microsoft provides, they have a separate Continuation Manager class to handle the activation and will navigate your app to where it should go. This requires you to add code to the App.xaml.cs file to handle the activation. In my opinion, this whole process is unnecessarily convoluted and messy.

As a solution to this problem, and a way to make using the WAB across Windows and Windows Phone, I made a class I call WebAuthenticationBrokerHelper. (To be honest, my class mimics what Shawn Kendrot did to make picking files easier on Windows Phone. You can check his post out here.)

WebAuthenticationBrokerHelper consists of just two methods, only one of which you use, and a single property. First, there’s the TaskCompletionSource property:

private TaskCompletionSource<string> _authenticationCompletionSource;

1	private TaskCompletionSource<string> _authenticationCompletionSource;

Next, there’s the AuthenticateAsync method:

#if WINDOWS_PHONE_APP
        public Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)
#else
        public async Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)
#endif
        {
#if WINDOWS_PHONE_APP
            _authenticationCompletionSource = new TaskCompletionSource<string>();
            CoreApplication.GetCurrentView().Activated += WebAuthenticationBrokerHelper_Activated;
            WebAuthenticationBroker.AuthenticateAndContinue(authUrl, callbackUrl, null, WebAuthenticationOptions.None);
            return _authenticationCompletionSource.Task;
#else
            WebAuthenticationResult result = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, authUrl, callbackUrl);
            switch (result.ResponseStatus)
            {
                case WebAuthenticationStatus.Success:
                    return result.ResponseData;
                case WebAuthenticationStatus.UserCancel:
                    return "Cancelled";
                case WebAuthenticationStatus.ErrorHttp:
                    return result.ResponseErrorDetail.ToString();
                default:
                    return result.ResponseData;
            }
#endif
        }

#if WINDOWS_PHONE_APP

public Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)

#else

public async Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)

#endif

{

#if WINDOWS_PHONE_APP

_authenticationCompletionSource = new TaskCompletionSource<string>();

CoreApplication.GetCurrentView().Activated += WebAuthenticationBrokerHelper_Activated;

WebAuthenticationBroker.AuthenticateAndContinue(authUrl, callbackUrl, null, WebAuthenticationOptions.None);

return _authenticationCompletionSource.Task;

#else

WebAuthenticationResult result = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, authUrl, callbackUrl);

switch (result.ResponseStatus)

{

case WebAuthenticationStatus.Success:

return result.ResponseData;

case WebAuthenticationStatus.UserCancel:

return "Cancelled";

case WebAuthenticationStatus.ErrorHttp:

return result.ResponseErrorDetail.ToString();

default:

return result.ResponseData;

}

#endif

}

The AuthenticateAsync method takes two URIs, the authentication URI and the callback URI. First it sets the TaskCompletionSource and connects to your app’s Activated event. (See below) Then it uses the proper WAB method based on the currently running platform to allow the user to authenticate.

Next up is the Activated event to handle when the app resumes after the WAB is done.

        private void WebAuthenticationBrokerHelper_Activated(CoreApplicationView sender, IActivatedEventArgs args)
        {
            sender.Activated -= WebAuthenticationBrokerHelper_Activated;
#if WINDOWS_PHONE_APP
            WebAuthenticationBrokerContinuationEventArgs wabArgs = args as WebAuthenticationBrokerContinuationEventArgs;
            WebAuthenticationResult result = wabArgs.WebAuthenticationResult;

            switch (result.ResponseStatus)
            {
                case WebAuthenticationStatus.Success:
                    _authenticationCompletionSource.SetResult(result.ResponseData);
                    break;
                case WebAuthenticationStatus.UserCancel:
                    _authenticationCompletionSource.SetResult("Cancelled");
                    break;
                case WebAuthenticationStatus.ErrorHttp:
                    _authenticationCompletionSource.SetResult(result.ResponseErrorDetail.ToString());
                    break;
                default:
                    _authenticationCompletionSource.SetResult(result.ResponseData);
                    break;
            }
#endif
        }

private void WebAuthenticationBrokerHelper_Activated(CoreApplicationView sender, IActivatedEventArgs args)

{

sender.Activated -= WebAuthenticationBrokerHelper_Activated;

#if WINDOWS_PHONE_APP

WebAuthenticationBrokerContinuationEventArgs wabArgs = args as WebAuthenticationBrokerContinuationEventArgs;

WebAuthenticationResult result = wabArgs.WebAuthenticationResult;

switch (result.ResponseStatus)

{

case WebAuthenticationStatus.Success:

_authenticationCompletionSource.SetResult(result.ResponseData);

break;

case WebAuthenticationStatus.UserCancel:

_authenticationCompletionSource.SetResult("Cancelled");

break;

case WebAuthenticationStatus.ErrorHttp:

_authenticationCompletionSource.SetResult(result.ResponseErrorDetail.ToString());

break;

default:

_authenticationCompletionSource.SetResult(result.ResponseData);

break;

}

#endif

}

This is here so everything we need for the WAB is contained in one location. There’s no need to add code to your App.xaml.cs file or mess with a Continuation Manager.

Finally, here’s the complete class:

    public class WebAuthenticationBrokerHelper
    {
        private TaskCompletionSource<string> _authenticationCompletionSource;

#if WINDOWS_PHONE_APP
        public Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)
#else
        public async Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)
#endif
        {
#if WINDOWS_PHONE_APP
            _authenticationCompletionSource = new TaskCompletionSource<string>();
            CoreApplication.GetCurrentView().Activated += WebAuthenticationBrokerHelper_Activated;
            WebAuthenticationBroker.AuthenticateAndContinue(authUrl, callbackUrl, null, WebAuthenticationOptions.None);
            return _authenticationCompletionSource.Task;
#else
            WebAuthenticationResult result = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, authUrl, callbackUrl);
            switch (result.ResponseStatus)
            {
                case WebAuthenticationStatus.Success:
                    return result.ResponseData;
                case WebAuthenticationStatus.UserCancel:
                    return "Cancelled";
                case WebAuthenticationStatus.ErrorHttp:
                    return result.ResponseErrorDetail.ToString();
                default:
                    return result.ResponseData;
            }
#endif
        }

        private void WebAuthenticationBrokerHelper_Activated(CoreApplicationView sender, IActivatedEventArgs args)
        {
            sender.Activated -= WebAuthenticationBrokerHelper_Activated;
#if WINDOWS_PHONE_APP
            WebAuthenticationBrokerContinuationEventArgs wabArgs = args as WebAuthenticationBrokerContinuationEventArgs;
            WebAuthenticationResult result = wabArgs.WebAuthenticationResult;

            switch (result.ResponseStatus)
            {
                case WebAuthenticationStatus.Success:
                    _authenticationCompletionSource.SetResult(result.ResponseData);
                    break;
                case WebAuthenticationStatus.UserCancel:
                    _authenticationCompletionSource.SetResult("Cancelled");
                    break;
                case WebAuthenticationStatus.ErrorHttp:
                    _authenticationCompletionSource.SetResult(result.ResponseErrorDetail.ToString());
                    break;
                default:
                    _authenticationCompletionSource.SetResult(result.ResponseData);
                    break;
            }
#endif
        }
    }

public class WebAuthenticationBrokerHelper

{

private TaskCompletionSource<string> _authenticationCompletionSource;

#if WINDOWS_PHONE_APP

public Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)

#else

public async Task<string> AuthenticateAsync(Uri authUrl, Uri callbackUrl)

#endif

{

#if WINDOWS_PHONE_APP

_authenticationCompletionSource = new TaskCompletionSource<string>();

CoreApplication.GetCurrentView().Activated += WebAuthenticationBrokerHelper_Activated;

WebAuthenticationBroker.AuthenticateAndContinue(authUrl, callbackUrl, null, WebAuthenticationOptions.None);

return _authenticationCompletionSource.Task;

#else

WebAuthenticationResult result = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, authUrl, callbackUrl);

switch (result.ResponseStatus)

{

case WebAuthenticationStatus.Success:

return result.ResponseData;

case WebAuthenticationStatus.UserCancel:

return "Cancelled";

case WebAuthenticationStatus.ErrorHttp:

return result.ResponseErrorDetail.ToString();

default:

return result.ResponseData;

}

#endif

}

private void WebAuthenticationBrokerHelper_Activated(CoreApplicationView sender, IActivatedEventArgs args)

{

sender.Activated -= WebAuthenticationBrokerHelper_Activated;

#if WINDOWS_PHONE_APP

WebAuthenticationBrokerContinuationEventArgs wabArgs = args as WebAuthenticationBrokerContinuationEventArgs;

WebAuthenticationResult result = wabArgs.WebAuthenticationResult;

switch (result.ResponseStatus)

{

case WebAuthenticationStatus.Success:

_authenticationCompletionSource.SetResult(result.ResponseData);

break;

case WebAuthenticationStatus.UserCancel:

_authenticationCompletionSource.SetResult("Cancelled");

break;

case WebAuthenticationStatus.ErrorHttp:

_authenticationCompletionSource.SetResult(result.ResponseErrorDetail.ToString());

break;

default:

_authenticationCompletionSource.SetResult(result.ResponseData);

break;

}

#endif

}

Now, wherever you want, you can just call:

string result = await wabHelper.AuthenticateAsync(apiAuthURI, apiRedirectURI));

1	string result = await wabHelper.AuthenticateAsync(apiAuthURI, apiRedirectURI));

And regardless of the platform you are on, the WAB will open and return the API’s response when it is done.

And there you have it. Thanks again to Shawn Kendrot for his original post. You can check out his website here.

Feel free to leave a comment with your questions, suggestions or feedback.

Thanks,

Joshua

Simple Animation in WinRT apps

I do a lot of animating in my apps. Even if it’s just a small animation, it can make the experience of using the app so much nicer. Animations such as this, where the sidebar fades out when adjusting the font size, and fades back in when the user “lets go” of the slider:

This animation uses a custom method I made so that I can animate UIElements with just one line of code;

For example, the animation above was done with this one line:

sidebarPageTemplate.Animate(1, 0.1, "SidebarOpacity", 300, 0, new CubicEase() { EasingMode = EasingMode.EaseOut }, null);

1	sidebarPageTemplate.Animate(1, 0.1, "SidebarOpacity", 300, 0, new CubicEase() { EasingMode = EasingMode.EaseOut }, null);

Here’s the actual Animate method:

public static void Animate(this DependencyObject target, double from, double to,
                                    string propertyPath, int duration, int startTime,
                                    EasingFunctionBase easing = null, Action completed = null)
{
	if (easing == null)
	{
		easing = new CubicEase()
		{
			EasingMode = EasingMode.EaseOut
		};
	}

	var db = new DoubleAnimation();
	db.To = to;
	db.From = from;
	db.EasingFunction = easing;
	db.EnableDependentAnimation = true;
	db.Duration = TimeSpan.FromMilliseconds(duration);

	Storyboard.SetTarget(db, target);
	Storyboard.SetTargetProperty(db, propertyPath);

	var sb = new Storyboard();
	sb.BeginTime = TimeSpan.FromMilliseconds(startTime);

	if (completed != null)
	{
		sb.Completed += (s, e) => completed();
	}
	sb.Children.Add(db);
	sb.Begin();
}

public static void Animate(this DependencyObject target, double from, double to,

string propertyPath, int duration, int startTime,

EasingFunctionBase easing = null, Action completed = null)

{

if (easing == null)

{

easing = new CubicEase()

{

EasingMode = EasingMode.EaseOut

};

}

var db = new DoubleAnimation();

db.To = to;

db.From = from;

db.EasingFunction = easing;

db.EnableDependentAnimation = true;

db.Duration = TimeSpan.FromMilliseconds(duration);

Storyboard.SetTarget(db, target);

Storyboard.SetTargetProperty(db, propertyPath);

var sb = new Storyboard();

sb.BeginTime = TimeSpan.FromMilliseconds(startTime);

if (completed != null)

{

sb.Completed += (s, e) => completed();

}

sb.Children.Add(db);

sb.Begin();

}

Let me walk through this method.

Parameters:

this DependencyObject target – This is the object that you want to animate.
double from – this is the start position of the property you want to animate. For example, if you want to animate the opacity of a UIElement from 1 to 0, the from parameter would be 1.
double to – this is the end position of the property you want to animate. Using the previous example, this would be 0.
string propertyPath – This is the name of the property you want to animate. In our example, this would be “Opacity”.
int duration – This is the duration of the animation in milliseconds. You can experiment with how fast your want your animation to be, but most times I like 300 milliseconds.
int startTime – This is the time that the animation will start. (usually just set to 0)
EasingFunctionBase easing = null – This is the easing function that the animation will use. (If you don’t know what an easing function is, head here) My favorite easing function is CubicEase, with the EaseOut easing mode. In this method, if you leave out this parameter, it will automatically set the easing function to CubicEase, but you can change that to your favorite function.
Action completed = null – Sometimes I want my app to do something when the animation is done, so you can pass an Action here and it will be executed when the animation has finished. (If you leave it null, nothing will happen after the animation is finished.)

Method Content:

First, the method checks to see if you left the easing function null. If so, it automatically sets it to a CubicEase with the EaseOut easing mode.

if (easing == null)
{
	easing = new CubicEase()
	{
		EasingMode = EasingMode.EaseOut
	};
}

if (easing == null)

{

easing = new CubicEase()

{

EasingMode = EasingMode.EaseOut

};

}

Next, it creates a DoubleAnimation, sets the to, from, easing function, and duration to the values you provided.

var db = new DoubleAnimation();
db.To = to;
db.From = from;
db.EasingFunction = easing;
db.EnableDependentAnimation = true;
db.Duration = TimeSpan.FromMilliseconds(duration);

var db = new DoubleAnimation();

db.To = to;

db.From = from;

db.EasingFunction = easing;

db.EnableDependentAnimation = true;

db.Duration = TimeSpan.FromMilliseconds(duration);

Next, it sets the target object that is to be animated, and the property of that object.

Storyboard.SetTarget(db, target);
Storyboard.SetTargetProperty(db, propertyPath);

1 2	Storyboard.SetTarget(db, target); Storyboard.SetTargetProperty(db, propertyPath);

Next, it creates a new Storyboard, sets the begin time to the value you provided. Then it attaches the action you provided to the Completed event of the Storyboard (if you provided one).

var sb = new Storyboard();
sb.BeginTime = TimeSpan.FromMilliseconds(startTime);
if (completed != null)
{
	sb.Completed += (s, e) => completed();
}

var sb = new Storyboard();

sb.BeginTime = TimeSpan.FromMilliseconds(startTime);

if (completed != null)

{

sb.Completed += (s, e) => completed();

}

Finally, it adds the DoubleAnimation to the Storyboard, and begins the animation.

sb.Children.Add(db);
sb.Begin();

1 2	sb.Children.Add(db); sb.Begin();

Conclusion:

That’s it! You can use this to animate any property of an object that is a Double value.

However, sometimes you have to make sure you are animating the right object. For example, if you want to animate an object to move from one point to another, you’ll need to animate the RenderTransform property of the object. Like this:

CompositeTransform trans = myBorder.RenderTransform as CompositeTransform;
if (trans != null)
{
	trans.Animate(trans.TranslateX, 0, "TranslateX", 200, 0, null, null);
}

CompositeTransform trans = myBorder.RenderTransform as CompositeTransform;

if (trans != null)

{

trans.Animate(trans.TranslateX, 0, "TranslateX", 200, 0, null, null);

}

In this example, I’m animating the “X” position of a border. Notice that for the propertyPath parameter I’m using “TranslateX”. That is the property of the CompositeTransform that I want to animate.

Feel free to ask any questions or suggest improvements!

Thanks,

Joshua

The Grid . . . an endless frontier

How to use the Grid in XAML

Let’s start with the basics: The Grid. The grid is probably the control I use the most. It is a container control, so it is used to hold other controls and control how they are arranged on the display.

As the name implies, the grid arranges controls in a grid format. This is different from other container controls, such as the Canvas and Stackpanel (which I’ll discuss more in other posts). The great thing about the grid is the control you have over the height and width of individual rows and columns.

So, to start, here’s a simple grid with square border in it:

<Grid Width="200" Height="200" Background="Blue">
    <Border Width="100" Height="100" Background="Red" 
            VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>

<Border Width="100" Height="100" Background="Red"

VerticalAlignment="Center" HorizontalAlignment="Center" />

</Grid>

Which will show you something like this:

As you can see, this is very basic. Adding rows and columns is where it gets cool. However, you kind of need to have an idea about what you want to do before you create them, as it can be annoying to go back and add or remove rows or columns.

Rows

To add rows, you create a RowDefinitions object inside your grid. Like this:


<Grid Width="400" Height="200">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions> 
</Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

Which will look like this:

This creates a grid with four rows. I’ve included four different ways of specifying what you want the height of the row to be.

The first RowDefinition uses the default height, which just happens to be the same as the second definition; the value “star”. (More on that in a minute)
The second RowDefinition specifies a value of “star”. (Be patient, I WILL get to it)
The third RowDefinition specifies that the height be 100 units tall.
The fourth RowDefinition sets the height to Auto, which means that it will stretch to the height of the object with the greatest height in the row. For example, if there are three controls in the row, one 50px tall, another 75px tall, and the third 100px tall, the row will be 100px tall.

“Star” a.k.a. “*”

Now to address what “*” means. “*” means that it will set the height to whatever amount of space is left. For example, in the following grid:


<Grid Height="500">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

Which will look like this:

Since the grid is 500px tall, and the first row is 100px tall, the second row will be 400px tall since that’s the amount of vertical space left in the grid.

One neat thing you can do with “*” is to add a number right in front of the * to specify how much of the free space it gets. For example:


<Grid Height="500">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

Which will look like this:

In this case, the first row gets two times the height of the second row.

Important

In order to get other controls to appear in the desired row, you must include Grid.Row="x" in the properties of the control you want in row “x”. For example:

<Border Height="50" Width="50" Grid.Row="1"/>

1 2	<Border Height="50" Width="50" Grid.Row="1"/>

Another important thing to keep in mind is that when specifying what row you want a control in, the rows are a zero-based. i.e. row “0” is the first row, and row “1” is the second row. So the previous Border will appear in the second row.

Here’s a real-life example of a grid. In this case, I want to make a simple layout to display an album image with the album title below it.

<Grid Width="150" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Image Stretch="UniformToFill" Height="150" Width="150" Source="Assets/Artwork.jpg"/>
    <StackPanel Grid.Row="1">
        <TextBlock Text="Sherlock Holmes: Original Motion Picture Soundtrack" 
                   FontSize="18" TextWrapping="Wrap"
                   FontWeight="Normal" Margin="0,5,0,2.5"/>
        <TextBlock Text="Hans Zimmer" 
                   FontSize="14"
                   FontWeight="Light" Margin="0,0,0,5"/>
    </StackPanel>
</Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Text="Sherlock Holmes: Original Motion Picture Soundtrack"

FontSize="18" TextWrapping="Wrap"

FontWeight="Normal" Margin="0,5,0,2.5"/>

<TextBlock Text="Hans Zimmer"

FontSize="14"

FontWeight="Light" Margin="0,0,0,5"/>

</StackPanel>

</Grid>

This will end up looking like this:

Columns

Columns are very similar to rows. In fact, you can replace every reference to “Row” with “Column” and every “Height” reference in the RowDefinitions with “Width” in the ColumnDefintions and everything would work . . . just in the horizontal direction. For example, this:

<Grid Height="500" Width="500">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
</Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

Would look like this:

The End . . . finally

I hope you found this post useful. If you have any questions or comments, feel free to leave a comment.

Fedora Interactive

Menu

Making the Web Authentication Broker Easy to Use.

Simple Animation in WinRT apps

Parameters:

Method Content:

Conclusion:

The Grid . . . an endless frontier

How to use the Grid in XAML

Rows

“Star” a.k.a. “*”

Important

Columns

The End . . . finally

Here’s the code from this post: TheGrid_Examples

Menu

Parameters:

Method Content:

Conclusion:

How to use the Grid in XAML

Rows

“Star” a.k.a. “*”

*Important*

Columns

The End . . . finally

Here’s the code from this post: TheGrid_Examples

Important