Angular 7 Azure Functions SignalR Custom Authentication

Introduction

I’ve been working on an Angular 7 game that has a multi-player over the Internet feature, so I was time to learn Microsoft Azure!

I chose Azure to host the game, store users in Azure Table Storage, and provide real-time communication features using Azure SignalR.

I wrote this reference implementation that combines Angular 7, Azure Functions, Azure SignalR, and Custom Authentication for the Azure Functions endpoints so that I could learn all the pieces and how they fit together.

Additionally, this application uses a custom IBinder imperative output binding for creating the SignalRConnectionInfo.  The SignalRConnectionInfo contains the JWT token that the client SignalR Hub uses when communicating with the Azure SignalR Service. This application demonstrates injecting an authenticated users UserId into the token, this is required by the SignalR Service to send messages to specific users.

What Can You Learn From This Application and Videos?

  • How to configure a Visual Studio 2019 Azure Functions project to communicate with SignalR
  • How to authenticate a user against a database and then return a JWT authorization token
  • How to implement custom authentication for Azure Function endpoints
  • How to include an Authorization Bearer token with an HTTP call to the Azure Functions endpoints
  • How to validate and read JWT tokens
  • How to request and return JWT tokens for SignalR
  • How to start a client SignalR Hub
  • How to send a SignalR message to one or more users
  • How to create a custom IBinder imperative output binding for an Azure Functions
  • How to use a GateKeeper to simplify authenticating Azure Functions endpoints

Source Code

Download or clone this GitHub repo:  https://github.com/Oceanware/Angular-Azure-SignalR-CustomAuth

Prerequisites

Server Application: Visual Studio 2019 with the Azure Development Workload installed. Visual Studio 2019 for the Mac will probably work, I’ve just not tested it.

Client Application: Standard Angular 7 tooling setup, editor of your choice.

Videos

Full Video Series Playlist

https://www.youtube.com/playlist?list=PLFZfBw9eNzgzojmcvLlO0a0gw-n6sdInd

Individual Videos

1. Azure SignalR, Source Code Installing, Configuring, and Running The Applications

This is the first of seven videos in this series explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how to get the source code, configure it, then run the application.

2. Seeding The Database

This is the second in a series of seven videos explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how an Angular 7 Client application calls an Azure Function endpoint that will seed an Azure Table Storage table with users for the app.

3. Logging Into Azure Application Using Custom Authentication

This is the third in a series of seven videos explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how an Angular 7 Client application logs into an Azure Functions application. The users are validated against users in an Azure Table Storage table, and if authenticated, the caller is issued a JWT authorization token.

The caller will then use the token for future calls to Azure Function endpoints that require an authorization token.

4. Getting A SignalR JWT and Start Client SignalR Hub

This is the fourth in a series of seven videos explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how an Angular 7 Client calls an Azure Function to get an Azure SignalR JWT and then start the client SignalR Hub.

5. Sending SignalR Messages To One Or More Client Applications

This is the fifth in a series of seven videos explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how an Angular 7 application can send a request to an Azure Function that publishes a SignalR message to one or more client applications.

6. Deep Dive – SignalRConnectionInfo & IBinder Output Binding

This is the sixth in a series of seven videos explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how to use a custom Azure Function Output Binding to create the SignalRConnectionInfo JWT token and embed the authenticated users UserId in the token.

The custom solution is more secure than the default Input Binding SignalRConnectionInfo provided by the SDK. Microsoft will be offering a solution of this type in a future release.

7. Deep Dive – Custom Authentication – Gatekeeper – Token Tools

This is the seventh in a series of seven videos explaining an application that uses Angular 7, Azure Functions, SignalR, and Custom Authentication for Azure Function endpoints.

In this video, you’ll learn how to implement custom authorization and custom authentication for the Azure Function endpoints.

A GateKeeper class simplifies authenticating endpoints.

Getting Started

Create Azure SignalR Service

What is Azure SignalR Service?

Create an Azure SignalR Service Instance

Create an Azure SignalR Service instance in the Azure Portal. Go to Keys and note the connection string, you’ll need this later.

Azure Functions (SignalRServer) App

  1. Clone or download the source repo.
  2. Open the SignalRServer solution in Visual Studio.
  3. Add a local.settings.json file to the SignalRServer project.
  4. Open the local.settings.json file and paste the below json into the file.
  5. Replace the below AzureSignalRConnectionString with the connection string you copied from the Azure Portal Keys blade.
{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "AzureWebJobsDashboard": "UseDevelopmentStorage=true",
    "AzureSignalRConnectionString": "Endpoint=INSERT_YOUR_SIGNALRSERVICE_ENDPOINT_HERE;"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}
  1. Start Debugging

Angular Client (Client) App

From the Client folder, run npm install, this will install all dependencies.

Run ng serve, this will start a local test server and open your default browser open http://localhost:4200.

Open a second or more browser window and navigate to http://localhost:4200.

Using the UI:

  1. Seed The Database
  2. Login
  3. Start SignalR Client
  4. Start sending messages to all user or to an individual user.

Helpful Links

I learned a lot from these posts:

GrillPhil ServerlessRealtimeDemo

SibeeshVenu Realtime IoT Device Data using Azure SignalR and Azure Function in Angular

Erik Andreas Azure Functions SignalR Authentication Using Imperative Binding

Dynamic Binding in Azure Functions with Imperative Bindings

Ben Morris Custom Token Authentication In Azure Functions

Some of the above posts were authored before the latest SignalR client NuGet packages came out. This app reflects Angular 7 and the newer Microsoft.Azure.WebJobs.Extensions.SignalRService packages published by Microsoft in Feb 2019.

Close

I hope you find this reference implementation helpful. I learned a lot by writing it and consulting with Microsoft’s Cloud Developer Advocate Anthony Chu Twitter and https://anthonychu.ca/ blog.

Just a grain of sand on the world’s beaches.

 

WPF XamDataGrid Configurator Released!

Introduction

Since joining Infragistics, I’ve spent the bulk of my time working on Visual Studio tooling (extensions) for Xamarin.Forms and WPF.  We have shipped an Xamarin.Forms Toolbox, Xamarin.Forms AppMap, and Control Configurators for these Xamarin.Forms and WPF Infragistics controls:

  • XamBulletGraph
  • XamCategoryChart
  • XamDataGrid
  • XamLinearGauge
  • XamPieChart
  • XamRadialGauge

The Infragistics Controls Configurators are a giant leap forward in Visual Studio design-time tooling, providing the developer with an unparalleled experience and feature set.  If you have not tried these or at least watched some of the below videos, I recommend you do so. 

An example of the unparalleled experience is the dynamic, design-time sample data created from your user types. Seeing a data grid or chart filled with live sample data from your users types is an awesome design-time experience.  Unlike the WPF XAML Designer feature that allows for injecting user specified sample data into the designer (I was the Microsoft PM on that feature), the Configurator sample data does not required the developer to do anything except create their types, build the solution, and set up a data binding.  Configurators are the gold standard of excellence for a design-time development experience.

The Infragistics documentation for the Configurators is here:

The Infragistics YouTube videos for the Xamarin.Forms and WPF Configurators are in this list:

The Infragistics YouTube videos for the Xamarin.Forms are in this list

WPF XamDataGrid Control Configurator

configurators

The Infragistics WPF XamDataGrid is a feature rich, performant data grid that meets the needs of demanding enterprise line-of-business applications. I have a lot of real-world experience using this data grid in my WPF enterprise applications before joining Infragistics.

The above image shows the Configurator extension dynamic sample data being rendered.  The Orders collection has 5 Order instances, each Order has 5 OrderDetail instances, and each OrderDetail has 5 Feature instances.  All dynamically created from the DataSource property binding to underlying user data types.

Notice the Customer.Status field, this is an Enum, this is type generated as well.

Configurators enable Infragistics customers to more easily learn and discover the control API’s because as properties or collections are changed at design-time, these changes are immediately reflected in the Configurator UI. The Configurators also have customized property window categories that group properties by feature.

Links to related online Help Topics are also provided in the Help ribbon group.

If you are a WPF line-of-business developer, I strongly encourage you to investigate Ultimate UI for WPF. Feature rich controls, outstanding support, and design-time Control Configurators for visually configuring your controls.

Have a great day,

Just a grain of sand on the worlds beaches.

Infragistics AppMap for Xamarin.Forms

Introduction

Today, Infragistics has made the popular AppMap for Xamarin.Forms available to all developers at no charge.

AppMap enables developers to visually map out and then generate their Xamarin.Forms application.

The code generation includes selected projects (iOS and Android, UWP coming soon), Pages (Views), ViewModels, and navigation code that follows best-practice Prism MVVM architecture.

For example, last month I created a 17 page application in three minutes. Easily saved myself an hour or two with project creation..

Videos

Please watch these short AppMap training videos to ensure you get the most from the AppMap tool and Prism for Xamarin.Forms.

Download and Installation

AppMap is included with the Infragistics Platform Installer and can also be download from the Visual Studio Marketplace.

Additionally, you can install from within Visual Studio using the Extensions and updates dialog.

AppMap works in all versions of Visual Studio 2015 and 2017.

Launching AppMap

AppMap is launched from the Visual Studio New Project Dialog or New Item Dialog.

NewProject

When using the New Item dialog, the name has no impact and is not used by the tool.  You can leave the default name and click the Add button.

Note: The New Item dialog only works with Xamarin.Forms project that were created by AppMap.

NewItem

Sign In

The first time you open AppMap you’ll need to sign in.  If you don’t have an Infragistics account yet, click the link and set one up.

The Customer Experience Improvement Program really does help us plan, allocate resources, is zero impact, and anonymous. As you can imagine, creating and maintaining Visual Studio Tooling is expensive and time consuming. This data helps us provide the best tooling for our customers and provide free tools to the community.

SignIn

Project Selection

This Create New Project dialog allows the developer to select the platforms for project creation. 

UWP will be supported in the coming soon release of AppMap

AppMap uses Prism for Xamarin.Forms. Prism provides a modern framework and developer guidance that embraces separation of concerns, dependency injection (DI), MVVM, and provides an incredibly rich, simple, and easy to use navigation API. The docs can be read here.

This dialog prompts you to select the DI Container you would like to use. When the project is created by AppMap, or when an AppMap Item is added to a project, AppMap automatically registers the added pages with the DI Container for you.

The Show AppMap checkbox allows you to show the AppMap dialog and then create the projects, or when unchecked, just create the projects.

The purpose of this dialog option is to enable a real-world application development workflow. Most developers have their own ViewModel base class.  AppMap allows developers to select the ViewModel base class to use for code generation. You can use one of two provided bases classes, or selected your own. So, by first creating  empty projects (projects without pages), developers can then bring in their own libraries and frameworks to the solution.  Then, launch the add New Item dialog, and in the AppMap select your ViewModel base class.

If your not familiar with the provided AppMap ViewModel base classed, please review them.  They both implement Prism navigation interfaces and have several commands that AppMap expects a ViewModel to have.  When AppMap generates your views, it wires up buttons and toolbar buttons to commands on the ViewModel. Optionally, you can derive your own ViewModel base class from one of the provided ones, but this is not a requirement.

ProjectDialog

AppMap

AppMap provides a diagram tool for laying out pages and creating relationships between them. These relationships provide the tool metadata for generating navigation code.

A feature of AppMap is to parse the entered Name, and set the Title property. You can edit the Name by double clicking the name in the diagram page or use the Properties panel.

The Code Generations Options panel is where you decide where your ViewModels will be placed, which folder names you would like to use, and the ViewModel base class to use.

Again, please watch the series of videos on AppMap to get a full understanding of it’s capabilities and features.

AppMap

This is the solution that was created by the above AppMap selections.  It took me 30 seconds to lay my application out and create it.

Notice that I like my ViewModels nested under my views.  This is not a requirement, but a personal preference.

Solution

Road Map

In the near future, we’ll release a new version of AppMap with these features:

  • .NET Standard 2.0 Xamarin.Forms Project Creation
  • Option to create UWP Project

Close

I always use AppMap for creating my projects as it saves so much time and saves me from having to create the pages and ViewModels one by one.

Have a great day,

Just a grain of sand on the worlds beaches.

Laser-Focused Internet Searching

Introduction

I work at Infragistics. Our company has been publishing UI control suites for many years. For each major release of a control suite, we publish online documentation specific to that release.

Today, when I perform a search for, “xamdatagrid fieldlayoutsettings” I get results for many previous versions of our WPF Help Docs that relate to the search. Unfortunately, the results contain links to old versions of our help docs; this is not what I’m looking for, but this is the nature of Internet searching.

I’ve tried limiting my results to the last year, but the results are still not optimal.

Solution

By providing the search engine (I’ve tested with both Google and Bing) with a “site:” argument, the search only returns results from the specified site. The site can be much more than just a domain name.  You must supply the subdomain such as “www”, and then you can specify a top-level fold to search.

If I modify the above search to this:   “site:www.infragistics.com/help/wpf/ xamdatagrid fieldlayoutsettings” I’ll get laser focus search results, drawn from the current documentation only because the current Infragistics English WPF docs are all under this URL, https://www.infragistics.com/help/wpf/

Having to remember and type “site:www.infragistics.com/help/wpf/” each time I need to search the current Infragistics WPF Help Docs would be a bit of a pain.

Happy Searching

The solution to never having to remember or re-enter the “site” argument is to set up a browser Favorite for each of the sites you search most often.

To do this:

  • Open your browser of choice
  • Navigate to your search engine of choice
  • For each site, you need laser focused search results for, type in or paste in the site criteria into the search and press Enter.
  • Save the current URL to a Favorite.  (I have several I’ve dragged to my Favorites bar.)

Below, I have provided some Infragistics site criteria that you can use to create search favorites for these products.

English Help Sites

site:www.infragistics.com/help/wpf/

site:www.infragistics.com/help/xamarin/

site:www.infragistics.com/help/winforms/

Japanese Help Sites

site:jp.infragistics.com/help/wpf/

site:jp.infragistics.com/help/xamarin/

site:jp.infragistics.com/help/winforms/

Searching

Now to search, open the favorite, this will cause the browser to navigate to the search engine and place the “site:” argument in the search box.  Now, you just enter your search criteria and enjoy happy and productive searching.

  1. Click on the Favorite you created
  2. Enter your additional search criteria.

9-20-2017 10-45-02 AM

Close

Obviously, this technique will work for any site, not just Infragistics. If you find yourself wanting to search a specific site or folders within that site, considering setting up a Favorite for that search.

Have a great day,

Just a grain of sand on the worlds beaches.

Enterprise Xamarin.Forms Training

Profissional Xamarin.Forms development has a sizable concept count.

Anyone with a little XAML experience can follow the many getting started tutorials and successfully create a Xamarin.Forms application for iOS, Android, UWP, and soon to RTM macOS.

However, once your application evolves beyond demoware towards a paid for or corporate enterprise application that must be maintainable over time,  the developer and team will need to start addressing the many facets of professional mobile development.

The best place to start is with the Xamarin.Forms documentation.  I always tell folks, “when all else fails, Read The Free Manual. (RTFM).” From here invest in your skill set and attend https://university.xamarin.com.

Personally, I’m looking forward to the next RTM release of Xamarin.Forms and it’s full support for .NET Standard 2.0.  This release will provide for much easier to share code without the confusing and frustrating assembly target profiles.  The number of available API’s will also be greatly enhanced.

I don’t like reinventing the wheel, especially on platforms that are not my primary development platform.  Instead, I like to leverage the knowledge and experience of professionals that their day-to-day focus is the platform I’m learning.

I just found an outstanding resource for Profissional Enterprise Xamarin.Forms Development by MVP Adam Pedley here:

https://training.xamarinhelp.com/course/enterprise-xamarin-forms-development/

Adam’s blog is located here:  http://xamarinhelp.com/

Adam’s training site is new and the content is ever growing. I just completed this course and learned a lot on these topics:

  • Architecture
  • Cross-cutting concerns
  • Security
  • Analytics

Xamarin.Forms Development Tooling

  • Cross-platform Environment Setup
  • Debugging
  • Application Profiling
  • Unit Testing
  • UI Testing
  • Continuous Integration and Deployment

This course will expose you to the high number of considerations and essential topics for creating a Profissional Xamarin.Forms application.

Have a great day,

Just a grain of sand on the worlds beaches.

Infragistics Xamarin Toolbox Free For All Users

Infragistics has published two Xamarin productivity tools on the Visual Studio Marketplace and made them free for all developers.

The Infragistics Xamarin.Forms Toolbox is the first NuGet-powered toolbox.  It includes all the Xamarin.Forms controls by Infragistics, as well as the Xamarin controls native to the platform.  The Toolbox enables developers to quickly design your page – automatically adding the namespace and XAML for your selected control.

The Infragistics Xamarin.Forms Control Configurators provides visual configuration of rich Infragistics controls like charts, gauges, and the data grid right in the XAML editor, shaving hours off your development time. Configure your controls and bind data directly from XAML files with pre-built styles and themes and rich property editing. Use the control configurator to learn the rich API’s of the Xamarin Forms controls.

Please visit the above links to install and for detailed documentation.

Enjoy!

Just a grain of sand on the world’s beaches

Updated My Visual Studio Extensions for VS 2017

I’ve updated the following extensions for Visual Studio 2017:

XAML Power Toys for Visual Studio 2015 and Visual Studio 2017

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.XAMLPowerToysforVisualStudio2015

Mole for Visual Studio 2017

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.MoleforVisualStudio2017

I’ve added the following extensions for Visual Studio 2017:

Tame Visual Studio Editor Tool Tips

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.TameVisualStudioEditorToolTips

Font Sizer

https://marketplace.visualstudio.com/items?itemName=KarlShifflettkdawg.FontSizer

Enjoy!

Just a grain of sand on the world’s beaches