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:

Next, there’s the AuthenticateAsync method:

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.

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:

Now, wherever you want, you can just call:

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:
Sidebar fade animation

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:

Here’s the actual Animate method:

Let me walk through this method.

Parameters:

  1. this DependencyObject target – This is the object that you want to animate.
  2. 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.
  3. double to – this is the end position of the property you want to animate. Using the previous example, this would be 0.
  4. string propertyPath – This is the name of the property you want to animate. In our example, this would be “Opacity”.
  5. 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.
  6. int startTime – This is the time that the animation will start. (usually just set to 0)
  7. 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.
  8. 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.

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

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

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).

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

 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:

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