Angular 7 - Azure Functions - SignalR - Custom Authorization

Introduction

This repro consists of two applications, an Angular 7 client and a .NET Core 2.2 Azure Functions app that uses Azure SignalR.

A backend web sever is not required or communicated with to load the website or flow messagees to and from the Azure services. These apps demonstrate Angular communicating directly with Azure Functions and authenticating using custom authentication.

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 SignalR NuGet packages published by Microsoft in Feb 2019.

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.

Refactoring - 6/24/2019

I refactored the code to simplify and make it cleaner. Of note is the Client signal-r.service.ts; it now uses async await to make the startSignalR method much easier to read and understand, since it now has top -> bottom flow.

The app.component.ts now uses the SubSink package to unsubscribe from Subjects properly.

I also removed all the magic strings from the Server app.

Blog Post

Angular 7 Azure Functions SignalR Custom Authentication

Training Videos

Please watch my YouTube Video Series Angular 7 - Azure Functions - SignalR - Custom Authorization. You can open the playlist or view the videos individually.

Playlist For Angular Azure SignalR Custom Authentication

0. Refactored Code - Cleaner Better - WATCH Me First

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

2, Seeding The Database

3. Logging Into Azure Application Using Custom Authentication

4. Getting A SignalR JWT and Start Client SignalR Hub

5. Sending SignalR Messages To One Or More Client Applications

6. Deep Dive - SignalRConnectionInfo & IBinder Output Binding

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

Let's Get Started

Create Azure SignalR Service

What is Azure SignalR Service?

Create an Azure SignalR Service Instance

1. 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 this 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 this 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": "*"
  }
}

6. Start Debugging

Angular Client (Client) App

Note: Please watch the above YouTube video if you have not watched it.

• 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 windows 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.