aspnet · terencefan · Mar 12, 2025
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/ApplicationWithCertificates.csproj b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/ApplicationWithCertificates.csproj
@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.Azure.SignalR" Version="1.*" />
+  </ItemGroup>
+
+</Project>
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/Hub/ChatSampleHub.cs b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/Hub/ChatSampleHub.cs
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+using Microsoft.AspNetCore.SignalR;
+
+public class ChatSampleHub : Hub
+{
+    public Task BroadcastMessage(string name, string message) =>
+        Clients.All.SendAsync("broadcastMessage", name, message);
+
+    public Task Echo(string name, string message) =>
+        Clients.Client(Context.ConnectionId)
+                .SendAsync("echo", name, $"{message} (echo from server)");
+}
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/Program.cs b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/Program.cs
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+using Azure.Identity;
+
+using Microsoft.Azure.SignalR;
+
+const string Endpoint = "https://<resourceName>.service.signalr.net";
+
+var builder = WebApplication.CreateBuilder(args);
+builder.Services.AddSignalR().AddAzureSignalR(option =>
+{
+    var appTenantId = "<guid>";
+    var appClientId = "<guid>";
+    var clientCertificatePath = "<your path to certificate>";
+    var credential = new ClientCertificateCredential(appTenantId, appClientId, clientCertificatePath);
+    var endpoint = new ServiceEndpoint(new Uri(Endpoint), credential);
+    option.Endpoints = [endpoint];
+});
+var app = builder.Build();
+
+app.UseHttpsRedirection();
+app.UseDefaultFiles();
+app.UseStaticFiles();
+app.UseRouting();
+
+app.MapHub<ChatSampleHub>("/chat");
+
+app.Run();
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/Properties/launchSettings.json b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/Properties/launchSettings.json
@@ -0,0 +1,12 @@
+{
+  "profiles": {
+    "ApplicationWithCertificates": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:55450;http://localhost:55451"
+    }
+  }
+}
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/wwwroot/css/site.css b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/wwwroot/css/site.css
@@ -0,0 +1,82 @@
+/*html, body {
+    font-size: 16px;
+}
+
+@media all and (max-device-width: 720px) {
+    html, body {
+        font-size: 20px;
+    }
+}*/
+
+html, body {
+    padding: 0;
+    height: 100%;
+}
+
+#messages {
+    width: 100%;
+    border: 1px solid #ccc;
+    height: calc(100% - 120px);
+    float: none;
+    margin: 0px auto;
+    padding-left: 0px;
+    overflow-y: auto;
+}
+
+textarea:focus {
+    outline: none !important;
+}
+
+.system-message {
+    background: #87CEFA;
+}
+
+.broadcast-message {
+    display: inline-block;
+    background: yellow;
+    margin: auto;
+    padding: 5px 10px;
+}
+
+.message-entry {
+    overflow: auto;
+    margin: 8px 0;
+}
+
+.message-avatar {
+    display: inline-block;
+    padding: 10px;
+    max-width: 8em;
+    word-wrap: break-word;
+}
+
+.message-content {
+    display: inline-block;
+    background-color: #b2e281;
+    padding: 10px;
+    margin: 0 0.5em;
+    max-width: calc(60%);
+    word-wrap: break-word;
+}
+
+.message-content.pull-left:before {
+    width: 0;
+    height: 0;
+    display: inline-block;
+    float: left;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid #b2e281;
+    margin: 15px 0;
+}
+
+.message-content.pull-right:after {
+    width: 0;
+    height: 0;
+    display: inline-block;
+    float: right;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid #b2e281;
+    margin: 15px 0;
+}
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/wwwroot/favicon.ico b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/wwwroot/favicon.ico
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithCertificates/wwwroot/index.html b/samples/MicrosoftEntraAuth/ApplicationWithCertificates/wwwroot/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta name="viewport" content="width=device-width">
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="css/site.css" rel="stylesheet" />
+  <title>Azure SignalR Group Chat</title>
+</head>
+
+<body>
+  <h2 class="text-center" style="margin-top: 0; padding-top: 30px; padding-bottom: 30px;">Azure SignalR Group Chat</h2>
+  <div class="container" style="height: calc(100% - 110px);">
+    <div id="messages" style="background-color: whitesmoke; "></div>
+    <div style="width: 100%; border-left-style: ridge; border-right-style: ridge;">
+      <textarea id="message" style="width: 100%; padding: 5px 10px; border-style: hidden;"
+        placeholder="Type message and press Enter to send..."></textarea>
+    </div>
+    <div style="overflow: auto; border-style: ridge; border-top-style: hidden;">
+      <button class="btn-warning pull-right" id="echo">Echo</button>
+      <button class="btn-success pull-right" id="sendmessage">Send</button>
+    </div>
+  </div>
+  <div class="modal alert alert-danger fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <div>Connection Error...</div>
+          <div><strong style="font-size: 1.5em;">Hit Refresh/F5</strong> to rejoin. ;)</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!--Reference the SignalR library. -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>
+
+  <!--Add script to update the page and send messages.-->
+  <script type="text/javascript">
+    document.addEventListener("DOMContentLoaded", function () {
+      function getUserName() {
+        function generateRandomName() {
+          return Math.random().toString(36).substring(2, 10);
+        }
+
+        // Get the user name and store it to prepend to messages.
+        var username = generateRandomName();
+        var promptMessage = "Enter your name:";
+        do {
+          username = prompt(promptMessage, username);
+          if (!username || username.startsWith("_") || username.indexOf("<") > -1 || username.indexOf(">") > -1) {
+            username = "";
+            promptMessage = "Invalid input. Enter your name:";
+          }
+        } while (!username)
+        return username;
+      }
+
+      username = getUserName();
+      // Set initial focus to message input box.
+      var messageInput = document.getElementById("message");
+      messageInput.focus();
+
+      function createMessageEntry(encodedName, encodedMsg) {
+        var entry = document.createElement("div");
+        entry.classList.add("message-entry");
+        if (encodedName === "_SYSTEM_") {
+          entry.innerHTML = encodedMsg;
+          entry.classList.add("text-center");
+          entry.classList.add("system-message");
+        } else if (encodedName === "_BROADCAST_") {
+          entry.classList.add("text-center");
+          entry.innerHTML = `<div class="text-center broadcast-message">${encodedMsg}</div>`;
+        } else if (encodedName === username) {
+          entry.innerHTML = `<div class="message-avatar pull-right">${encodedName}</div>` +
+            `<div class="message-content pull-right">${encodedMsg}<div>`;
+        } else {
+          entry.innerHTML = `<div class="message-avatar pull-left">${encodedName}</div>` +
+            `<div class="message-content pull-left">${encodedMsg}<div>`;
+        }
+        return entry;
+      }
+
+      function appendMessage(encodedName, encodedMsg) {
+        var messageEntry = createMessageEntry(encodedName, encodedMsg);
+        var messageBox = document.getElementById("messages");
+        messageBox.appendChild(messageEntry);
+        messageBox.scrollTop = messageBox.scrollHeight;
+      }
+
+      function bindConnectionMessage(connection) {
+        var messageCallback = function (name, message) {
+          if (!message) return;
+          // Html encode display name and message.
+          var encodedName = name;
+          var encodedMsg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          appendMessage(encodedName, encodedMsg);
+        };
+        // Create a function that the hub can call to broadcast messages.
+        connection.on("broadcastMessage", messageCallback);
+        connection.on("echo", messageCallback);
+        connection.onclose(onConnectionError);
+      }
+
+      function onConnected(connection) {
+        console.log("connection started");
+        connection.send("broadcastMessage", "_SYSTEM_", username + " JOINED");
+        document.getElementById("sendmessage").addEventListener("click", function (event) {
+          // Call the broadcastMessage method on the hub.
+          if (messageInput.value) {
+            connection.send("broadcastMessage", username, messageInput.value)
+              .catch((e) => appendMessage("_BROADCAST_", e.message));
+          }
+
+          // Clear text box and reset focus for next comment.
+          messageInput.value = "";
+          messageInput.focus();
+          event.preventDefault();
+        });
+        document.getElementById("message").addEventListener("keypress", function (event) {
+          if (event.keyCode === 13) {
+            event.preventDefault();
+            document.getElementById("sendmessage").click();
+            return false;
+          }
+        });
+        document.getElementById("echo").addEventListener("click", function (event) {
+          // Call the echo method on the hub.
+          connection.send("echo", username, messageInput.value);
+
+          // Clear text box and reset focus for next comment.
+          messageInput.value = "";
+          messageInput.focus();
+          event.preventDefault();
+        });
+      }
+
+      function onConnectionError(error) {
+        if (error && error.message) {
+          console.error(error.message);
+        }
+        var modal = document.getElementById("myModal");
+        modal.classList.add("in");
+        modal.style = "display: block;";
+      }
+
+      var connection = new signalR.HubConnectionBuilder()
+        .withUrl("/chat")
+        .build();
+      bindConnectionMessage(connection);
+      connection.start()
+        .then(function () {
+          onConnected(connection);
+        })
+        .catch(function (error) {
+          console.error(error.message);
+        });
+    });
+  </script>
+</body>
+
+</html>
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/ApplicationWithClientSecrets.csproj b/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/ApplicationWithClientSecrets.csproj
@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.Azure.SignalR" Version="1.*" />
+  </ItemGroup>
+
+</Project>
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/Hub/ChatSampleHub.cs b/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/Hub/ChatSampleHub.cs
@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+using Microsoft.AspNetCore.SignalR;
+
+public class ChatSampleHub : Hub
+{
+    public Task BroadcastMessage(string name, string message) =>
+        Clients.All.SendAsync("broadcastMessage", name, message);
+
+    public Task Echo(string name, string message) =>
+        Clients.Client(Context.ConnectionId)
+                .SendAsync("echo", name, $"{message} (echo from server)");
+}
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/Program.cs b/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/Program.cs
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+using Azure.Identity;
+
+using Microsoft.Azure.SignalR;
+
+const string Endpoint = "https://<resourceName>.service.signalr.net";
+
+var builder = WebApplication.CreateBuilder(args);
+builder.Services.AddSignalR().AddAzureSignalR(option =>
+{
+    var appTenantId = "<guid>";
+    var appClientId = "<guid>";
+    var clientSecret = "<client secret>";
+    var credential = new ClientSecretCredential(appTenantId, appClientId, clientSecret);
+    var endpoint = new ServiceEndpoint(new Uri(Endpoint), credential);
+    option.Endpoints = [endpoint];
+});
+var app = builder.Build();
+
+app.UseHttpsRedirection();
+app.UseDefaultFiles();
+app.UseStaticFiles();
+app.UseRouting();
+
+app.MapHub<ChatSampleHub>("/chat");
+
+app.Run();
diff --git a/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/Properties/launchSettings.json b/samples/MicrosoftEntraAuth/ApplicationWithClientSecrets/Properties/launchSettings.json
@@ -0,0 +1,12 @@
+{
+  "profiles": {
+    "ApplicationWithClientSecrets": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:55457;http://localhost:55458"
+    }
+  }
+}