You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-signalr/signalr-tutorial-authenticate-azure-functions.md
+38-35Lines changed: 38 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,45 +37,40 @@ Your application will access a SignalR Service instance. Use the following step
37
37
38
38
1. Select on the **Create a resource** (**+**) button for creating a new Azure resource.
39
39
40
-
1. Search for **SignalR Service** and select it.
40
+
1. Search for **SignalR Service** and select it.
41
41
1. Select **Create**.
42
42
43
43
1. Enter the following information.
44
44
45
45
| Name | Value |
46
46
|---|---|
47
-
| Resource name | A unique name for the SignalR Service instance |
48
-
| Resource group | Create a new resource group with a unique name |
49
-
| Location | Select a location close to you |
50
-
| Pricing Tier | Free |
47
+
|**Resource group**| Create a new resource group with a unique name |
48
+
|**Resource name**| A unique name for the SignalR Service instance |
49
+
|**Region**| Select a region close to you |
50
+
|**Pricing Tier**| Free |
51
+
|**Service mode**| Serverless |
51
52
52
53
1. Select **Review + Create".
53
54
1. Select **Create**.
54
55
55
-
1. After the deployment finishes, select **Go to resource**
56
-
1. Select **Settings** from the menu.
57
-
1. Select the **Serverless** to change the **Service mode** setting.
58
-
1. Select **Save**.
59
-
60
-

61
56
62
57
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
63
58
64
59
### Create an Azure Function App and an Azure Storage account
65
60
66
61
1. From the home page in the Azure portal, select on the **Create a resource** (**+**).
67
62
68
-
1. Search for **Function App** and select it.
63
+
1. Search for **Function App** and select it.
69
64
1. Select **Create**.
70
65
71
66
1. Enter the following information.
72
67
73
68
| Name | Value |
74
69
|---|---|
75
-
|Function App name | A unique name for the SignalR Service instance |
76
-
|Resource group | Create a new resource group with a unique name|
77
-
|Location | Select a location close to you|
78
-
|Runtime stack | Node.js|
70
+
|**Resource group**| Use the same resource group with your SignalR Service instance |
71
+
|**Function App name**| A unique name for the Function app instance|
72
+
|**Runtime stack**| Node.js|
73
+
|**Region**| Select a region close to you|
79
74
80
75
1. By default, a new Azure Storage account will also be created in the same resource group together with your function app. If you want to use another storage account in the function app, switch to **Hosting** tab to choose an account.
81
76
@@ -84,11 +79,13 @@ Your application will access a SignalR Service instance. Use the following step
84
79
## Create an Azure Functions project locally
85
80
### Initialize a function app
86
81
87
-
1. Create a new folder locally and execute the following command in your terminal to create a new JavaScript Functions project.
82
+
1. From a command line, create a root folder for your project and change to the folder.
83
+
84
+
1. Execute the following command in your terminal to create a new JavaScript Functions project.
The generated project by default has an extension bundle in the `host.json` file, which contains SignalR extensions, and you don't need to install it yourself. For more information about extension bundle, see [Register Azure Functions binding extensions](../azure-functions/functions-bindings-register.md#extension-bundles).
88
+
By default, the generated project includes a *host.json* file containing the extension bundles which include the SignalR extension. For more information about extension bundles, see [Register Azure Functions binding extensions](../azure-functions/functions-bindings-register.md#extension-bundles).
92
89
93
90
### Configure application settings
94
91
@@ -107,10 +104,13 @@ When running and debugging the Azure Functions runtime locally, application sett
107
104
}
108
105
```
109
106
110
-
* Enter the Azure SignalR Service connection string into the' AzureSignalRConnectionString' setting.
111
-
112
-
Copy the value from the **Keys** page of the Azure SignalR Service resource in the Azure portal. You can use either the primary or secondary connection string.
113
-
107
+
* Enter the Azure SignalR Service connection string into the' AzureSignalRConnectionString' setting.
108
+
109
+
Navigate to your SignalR Service in the Azure portal. In the **Settings** section, locate the **Keys** setting. Select the **Copy** button to the right of the connection string to copy it to your clipboard. You can use either the primary or secondary connection string.
110
+
111
+
* Enter the storage account connection string into the' AzureWebJobsStorage' setting.
112
+
113
+
Navigate to your storage account in the Azure portal. In the **Security + networking** section, locate the **Access keys** setting. Select the **Copy** button to the right of the connection string to copy it to your clipboard. You can use either the primary or secondary connection string.
114
114
115
115
116
116
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
@@ -127,8 +127,8 @@ When the chat app first opens in the browser, it requires valid connection crede
127
127
func new --template "SignalR negotiate HTTP trigger" --name negotiate
128
128
```
129
129
130
-
1. Open *negotiate/function.json* to view the function binding configuration.
131
-
130
+
1. Open *negotiate/function.json* to view the function binding configuration.
131
+
132
132
The function contains an HTTP trigger binding to receive requests from SignalR clients and a SignalR input binding to generate valid credentials for a client to connect to an Azure SignalR Service hub named `default`.
133
133
134
134
```json
@@ -160,11 +160,11 @@ When the chat app first opens in the browser, it requires valid connection crede
160
160
```
161
161
162
162
There's no `userId` property in the `signalRConnectionInfo` binding for local development, but you'll add it later to set the user name of a SignalR connection when you deploy the function app to Azure.
163
-
163
+
164
164
1. Close the *negotiate/function.json* file.
165
-
166
-
167
-
165
+
166
+
167
+
168
168
169
169
1. Open **negotiate/index.js** to view the body of the function.
170
170
@@ -214,7 +214,7 @@ The web app also requires an HTTP API to send chat messages. You'll create an HT
214
214
]
215
215
}
216
216
```
217
-
We make two changes to the original function:
217
+
Two changes are made to the original file:
218
218
* Changes the route to `messages` and restricts the HTTP trigger to the **POST** HTTP method.
219
219
* Adds a SignalR Service output binding that sends a message returned by the function to all clients connected to a SignalR Service hub named `default`.
220
220
@@ -251,7 +251,7 @@ The web app also requires an HTTP API to send chat messages. You'll create an HT
251
251
252
252
The chat application's UI is a simple single-page application (SPA) created with the Vue JavaScript framework using [ASP.NET Core SignalR JavaScript client](/aspnet/core/signalr/javascript-client). For simplicity, the function app hosts the web page. In a production environment, you can use [Static Web Apps](https://azure.microsoft.com/products/app-service/static) to host the web page.
253
253
254
-
1. Create a new folder named *content* in the root directory of your function project.
254
+
1. Create a new folder named *content* in the root directory of your function project.
255
255
1. In the *content* folder, create a new file named *index.html*.
256
256
257
257
1. Copy and paste the content of **[index.html](https://github.com/aspnet/AzureSignalR-samples/blob/da0aca70f490f3d8f4c220d0c88466b6048ebf65/samples/ServerlessChatWithAuth/content/index.html)** to your file. Save the file.
@@ -308,10 +308,10 @@ The chat application's UI is a simple single-page application (SPA) created with
308
308
309
309

310
310
311
-
1. Enter a message in the chat box and press enter.
311
+
1. Enter a message in the chat box and press enter.
312
312
313
313
The message is displayed on the web page. Because the user name of the SignalR client isn't set, we send all messages as "anonymous".
314
-
314
+
315
315
316
316
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
317
317
@@ -354,13 +354,13 @@ The *--publish-local-settings* option publishes your local settings from the *lo
354
354
355
355
Azure Functions supports authentication with Azure Active Directory, Facebook, Twitter, Microsoft account, and Google. You will use **Microsoft** as the identity provider for this tutorial.
356
356
357
-
1. Go to the resource page of your function app on Azure portal.
357
+
1. Go to the resource page of your function app on Azure portal.
358
358
1. Select **Settings** -> **Authentication**.
359
359
1. Select **Add identity provider**.
360
360

361
361
362
362
1. Select **Microsoft** from the **Identity provider** list.
363
-

363
+

364
364
365
365
Azure Functions supports authentication with Azure Active Directory, Facebook, Twitter, Microsoft account, and Google. For more information about the supported identity providers, see the following articles:
To clean up the resources created in this tutorial, delete the resource group using the Azure portal.
394
394
395
+
[!CAUTION]
396
+
Deleting the resource group deletes all resources contained within it. If the resource group contains resources outside the scope of this tutorial, they will also be deleted.
397
+
395
398
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
396
399
397
400
## Next steps
398
401
399
402
In this tutorial, you learned how to use Azure Functions with Azure SignalR Service. Read more about building real-time serverless applications with SignalR Service bindings for Azure Functions.
400
403
401
404
> [!div class="nextstepaction"]
402
-
> [Build Real-time Apps with Azure Functions](signalr-concept-azure-functions.md)
405
+
> [Real-time apps with Azure SignalR Service and Azure Functions](signalr-concept-azure-functions.md)
403
406
404
407
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
0 commit comments