DEV Community

loading...
Cover image for Securing Azure SignalR +Azure App Service - Part 1

Securing Azure SignalR +Azure App Service - Part 1

Jayendran Arumugam
MCT | Cloud Architect | Azure | AI Eng | DevOps | Stackoverflow | Technical Writer | Learner | @Gartner
・4 min read

Recently I start to explore the Azure SignalR Service for one of my chat based web wpplication.

Azure SignalR Service simplifies the process of adding real-time web functionality to applications over HTTP. This real-time functionality allows the service to push content updates to connected clients, such as a single page web or mobile application. As a result, clients are updated without the need to poll the server or submit new HTTP requests for updates.

To put more simple word Azure SignalR is a PaaS helps us to update the Client (UI) without refreshing the Page - So Cool😎 Is it?

For that I need to come-up with a architecture, So I start doing a POC - "How to securely connect a Azure SignalR Service from a simple ChatBased Application" ?

You can find more asp.net sample code for AzuresignalR from the below Repo.

GitHub logo aspnet / AzureSignalR-samples

Code samples for Azure SignalR

Welcome to Azure SignalR Service

This repository contains documentation and code samples for Azure SignalR Service.

Azure SignalR Service is an Azure managed service that helps developers easily build web applications with real-time features.

This service supports both ASP.NET Core SignalR and ASP.NET SignalR. SignalR is an open source library that simplifies the process of adding real-time web functionality to applications.

The ASP.NET Core version is not a simple .NET Core port of the original SignalR, but a rewrite of the original version. As a result, ASP.NET Core SignalR is not backward compatible with ASP.NET SignalR (API interfaces and behaviors are different). If it is the first time you try SignalR, we recommend you to use the ASP.NET Core SignalR, it is simpler, more reliable, and easier to use.

For more information about SignalR, please visit SignalR official site.

If you're new to Azure SignalR Service…

In this series of post, I am going to share the best practice / architecture on how to securely connect azuresignalr with azure app service.

Let us create a POC Environment

AzureSignalR

image

I choose the resource group, service name and keep the rest of another configurations to default.

The main thing to note here is the Service mode i.e, how we are going to consume/connect to the azure signalr service

  • Default mode- Using azure signalr for your Web application (Server based) - e.g., azure web App
  • Serverless mode- Using azure signalr for your Web application (Serverless based) - e.g., static web apps, function apps

  • Classic mode - Mixed of the above modes. This mode is for backward compatibility for those applications created before there is default and serverless mode. It is strongly recommended to not use this mode anymore

image

Leave the connectivity method to the public endpoint for now, we will configure this later.

Azure Web App

Create a simple webapp like below. Please keep an eye of the SKU/Size which you need at least the Standard / Premium plan that support secure network access.

image

Deploy the Web Chat App

Once we provisioned our web app, we deploy the ChatRoom in it.

After the deployment it’s time to update the azure signalr connection string to our app settings config variable called Azure:SignalR:ConnectionString

image

Finally, our site will look likes.

Alt Text

Different connections in Azure Signalr service

Before diving into the security, we first need to understand how the azure signalr works behind the screen.

There are 2 different connections in azure signalr (sdk) as of now(24/May/2021)

  • Server Connection (Not Applicable for Serverless mode)
  • Client Connection (Required for all modes)

Server Connection

Within your SignalR application, where you have a web server that hosts a hub (called hub server) and clients can have duplex real-time communication with the hub server

  • A negotiate endpoint is exposed by Azure SignalR Service SDK for each hub.
  • This endpoint will respond to client's negotiation requests and redirect clients to SignalR Service.
  • Eventually, clients will be connected to SignalR Service.

Server connection flow

image

From the Code

image

Please note that for serverless mode there is no server so we could not have a Hub server. So, this server connection will not be applicable for serverless mode.

Client Connection

There are 2 steps to establish the persistent connection.

1.Client will call the negotiate request to app server which returns a redirect response with SignalR Service's URL and access token

image

image

2.Client use the new URL and access token to make the persistent connection to SignalR

image

image

WebSocket Connection:

image

Client Connection flow

image

Overall Flow

Default mode = Server Connection + Client Connection

image

We will continue on how we secure our azure signalr connectivity to Azure web app in the upcoming parts.

Discussion (0)