Add User Id detection to GetSignalRInfo and update web app to verify user is authenticated before connecting to SignalR Service

Author: joelhulen

dotnet/ServerlessMicroservices.FunctionApp.Trips/TripFunctions.cs

@@ -166,7 +166,7 @@ public static async Task<IActionResult> AssignTripDriver([HttpTrigger(Authorizat
         /*** SignalR Info or Negotiate Function ****/
         [FunctionName("GetSignalRInfo")]
         public static IActionResult GetSignalRInfo([HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "signalrinfo")] HttpRequest req,
-            [SignalRConnectionInfo(HubName = "trips")] SignalRConnectionInfo info,
+            [SignalRConnectionInfo(HubName = "trips", UserId = "{headers.x-ms-client-principal-id}")] SignalRConnectionInfo info,
             ILogger log)
         {
             log.LogInformation("GetSignalRInfo triggered....");

web/serverless-microservices-web/src/api/trips.js

@@ -1,8 +1,13 @@
-import { checkResponse, post } from '@/utils/http';
+import { checkResponse, get, post } from '@/utils/http';
 //const baseUrl = 'http://localhost:7071/api';
 const baseUrl = window.apiTripsBaseUrl;
 const apiKey = window.apiKey;
 
+// GET methods
+export function getSignalRInfo() {
+  return get(`${baseUrl}/signalrinfo`, {}, apiKey).then(checkResponse);
+}
+
 // POST methods
 export function createTrip(trip) {
   return post(`${baseUrl}/trips`, trip, apiKey).then(checkResponse);

web/serverless-microservices-web/src/components/SignalRTrips.vue

@@ -16,26 +16,22 @@ export default {
     return {};
   },
   computed: {
-    ...commonGetters(['notificationSystem']),
+    ...commonGetters(['notificationSystem', 'user']),
     ...tripGetters(['trip', 'currentStep', 'contentLoading'])
   },
+  watch: {
+    user(val, old) {
+      if (old === null && val !== null) {
+        this.connectToSignalR();
+      }
+    }
+  },
   methods: {
-    ...tripActions(['setTrip', 'setCurrentStep', 'createTrip']),
-    getSignalRInfo: async url => {
-      console.log(`SignalR Info URL ${url}`);
-      let rawResponse = await fetch(url, {
-        method: 'GET', // *GET, POST, PUT, DELETE, etc.
-        mode: 'cors', // no-cors, cors, *same-origin
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, same-origin, *omit
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8'
-        },
-        redirect: 'follow', // manual, *follow, error
-        referrer: 'no-referrer' // no-referrer, *client
-      });
+    ...tripActions(['setTrip', 'setCurrentStep', 'createTrip', 'getSignalRInfo']),
+    async getSignalRInformation() {
+      let rawResponse = await this.getSignalRInfo(); // {url: '', status: 201};//await this.getSignalRInfo();
       if (rawResponse.status === 200) {
-        let signalRInfo = await rawResponse.json();
+        let signalRInfo = rawResponse.data;
         console.log(`Connection Endpoint: ${signalRInfo.url}`);
         return signalRInfo;
       } else {
@@ -47,7 +43,8 @@ export default {
       }
     },
     connectToSignalR() {
-      this.getSignalRInfo(window.signalrInfoUrl)
+      if (this.user !== null) {
+      this.getSignalRInformation()
         .then(signalrInfo => {
           if (signalrInfo !== null && signalrInfo !== undefined) {
             let options = {
@@ -144,6 +141,10 @@ export default {
             this.notificationSystem.options.error
           );
         });
+      }
+      else {
+        console.log('Not connecting to SignalR because the user is not authenticated.')
+      }
     }
   },
   mounted() {

web/serverless-microservices-web/src/store/trips.js

@@ -1,4 +1,4 @@
-import { createTrip } from '@/api/trips';
+import { createTrip, getSignalRInfo } from '@/api/trips';
 
 export default {
   namespaced: true,
@@ -49,6 +49,15 @@ export default {
       } finally {
         commit('contentLoading', false);
       }
+    },
+
+    async getSignalRInfo({ commit }) {
+      try {
+        let signalRInfo = await getSignalRInfo();
+        return signalRInfo;
+      } catch (e) {
+        throw e;
+      }
     }
   }
 };