Connecting to an Authorized SignalR Hub from a .NET Client

In a previous post, I talked about adding Access and Refresh tokens to your Web Application using OAuth Bearer Tokens. In this post, we are going to be using this same logic to authorize external clients from an external .NET client application such as Windows Store apps, Xamarin.iOS, Xamarin.Android, etc.

Assuming we have our access token (and refresh token) stored locally on our client, we can use it to authorize our requests to our SignalR Hub. Let’s put together a basic Hub:

public class SimpleHub : Hub
    public string AuthorizedString()
        return "You are successfully Authorized";


This is obviously and extremely simple example, and we aren’t going to get into calling client methods from the server with our authorized user as I will be covering that in a later post.
Now that we have our server-side Hub, let’s put together a client-side manager to connect to this Hub and make our request to AuthorizedString()

public class SimpleHubManager
    private HubConnection _connection;
    private IHubProxy _proxy;
    public SimpleHubManager()
        _connection = new HubConnection("http://YOUR_DOMAIN/"); //connect to SignalR on your server
        _connection.Headers.Add("Authorization", string.format("Bearer {0}", YOUR_ACCESS_TOKEN)); //THIS IS WHERE YOU ADD YOUR ACCESS TOKEN MENTIONED ABOVE
        _proxy = _connection.CreateHubProxy("SimpleHub"); //connect to Hub from above

    public async Task<string> GetAuthorizedString()
        await _connection.Start(); //start connection
        var authorizedString = await _proxy.Invoke<string>("AuthorizedString"); //Invoke server side method and return value
        return authorizedString;

As long as the Access Token being used by the client has not expired and is added to the Authorization Http Header, then we will be able to bypass the [Authorization] on the server.
So now, from our client, if we call:

var manager = new SimpleHubManager();
var authString = await manager.GetAuthorizedString(); //"You are successfully Authorized"

We see our string is exactly what we expect.

Stay tuned for some more advanced SignalR work in the future!

Databinding a Windows FlipView with MVVM Light

MVVM Light is a great cross-platform MVVM Framework, and was chosen to be used in this example. However, it isn’t required to get the same results.

FlipViews were a great addition to the WIndows Control family for Windows Phone and Windows Store applications. It’s easily customized, simple to use, and can give your app a user friendly experience for anything from an image gallery, to a news reader. So let’s get to the code.

Let’s first build the model we are going to use for each of our views in our FlipView. I’m using a PCL for my Models and ViewModels and a Windows Phone 8.1 project for the xaml, but it works in the same fashion for Windows Store.

Here is our model:

public class RotatorItem
     public string Title { get; set; }
     public string ImageUri { get; set; }
     public string Subtitle { get; set; }

Now let’s look at a simple ViewModel with MVVM Light to hold our collection of SimpleRotatorItems.

public class LandingRotatorPageViewModel : ViewModelBase
     #region Private Properties
     private ObservableCollection<RotatorItem> _rotatorItems;
     private RotatorItem _activeItem;

     #region Public Properties
     public ObservableCollection<RotatorItem> RotatorItems
             return _rotatorItems;
             Set(() => RotatorItems, ref _rotatorItems, value);
     public RotatorItem ActiveItem
             return _activeItem;
             Set(() => ActiveItem, ref _activeItem, value);

     public LandingRotatorPageViewModel()
         var rotatorItems = new ObservableCollection<RotatorItem>();
         rotatorItems.Add(new RotatorItem { ImageUri = "/Assets/Logo.scale-240.png", Title = "Title 1", Subtitle = "Subtitle 1"});
         rotatorItems.Add(new RotatorItem { ImageUri = "/Assets/Logo.scale-240.png", Title = "Title 2", Subtitle = "Subtitle 2" });
         rotatorItems.Add(new RotatorItem { ImageUri = "/Assets/Logo.scale-240.png", Title = "Title 3", Subtitle = "Subtitle 3" });
         rotatorItems.Add(new RotatorItem { ImageUri = "/Assets/Logo.scale-240.png", Title = "Title 4", Subtitle = "Subtitle 4" });
         RotatorItems = rotatorItems;
         ActiveItem = rotatorItems.First();

Let’s go ahead now and get our markup done for our page with the FlipView:

<FlipView x:Name="SimpleFlipView" ItemsSource="{Binding RotatorItems}" Grid.Row="1" SelectionChanged="FlipView_SelectionChanged">
                    <RowDefinition Height="200" />
                    <RowDefinition Height="120" />
                    <RowDefinition Height="80" />
                <Image Source="{Binding ImageUri}" Height="150" Grid.Row="0" VerticalAlignment="Top" Margin="0,50,0,0"/>
                <TextBlock TextWrapping="Wrap" TextAlignment="Center" Grid.Row="1" Text="{Binding Title}" FontSize="30" HorizontalAlignment="Center" Margin="20"></TextBlock>
                <TextBlock TextWrapping="Wrap" TextAlignment="Center" Grid.Row="2" FontSize="20" HorizontalAlignment="Center" Margin="20">
                    <Run Text="{Binding Subtitle}"></Run>


Last but not least, let’s make sure our ViewModel is bound to our Page in our page Class:

 public sealed partial class MainPage : Page
     private LandingRotatorPageViewModel _vm;
     public MainPage()

          _vm = new LandingRotatorPageViewModel();
          this.DataContext = _vm;

     /// <summary>
     /// Invoked when this page is about to be displayed in a Frame.
     /// </summary>
     /// <param name="e">Event data that describes how this page was reached.
     /// This parameter is typically used to configure the page.</param>
     protected override void OnNavigatedTo(NavigationEventArgs e)

Now that the Page’s DataContext is set to our ViewModel, the binding we placed on the FlipView element ‘ItemSource=”{Binding RotatorItems}”‘ will bind our FlipView’s Items to the items we created in the constructor for our ViewModel, and will use our ItemTemplate to create our items from the fields on the RotatorItems.

Now let’s take a look at our final result:

FlipView Item
First FlipView Item bound to ViewModel
Second FlipView Item

So there you have it. An easy solution to using the Windows FlipView Control to display content that is bound to a ViewModel.