Skip to content

Commit 4ddaaa7

Browse files
committed
Update
1 parent 313794a commit 4ddaaa7

File tree

3 files changed

+38
-35
lines changed

3 files changed

+38
-35
lines changed
Loading

articles/azure-signalr/signalr-tutorial-authenticate-azure-functions.md

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -37,45 +37,40 @@ Your application will access a SignalR Service instance. Use the following step
3737

3838
1. Select on the **Create a resource** (**+**) button for creating a new Azure resource.
3939

40-
1. Search for **SignalR Service** and select it.
40+
1. Search for **SignalR Service** and select it.
4141
1. Select **Create**.
4242

4343
1. Enter the following information.
4444

4545
| Name | Value |
4646
|---|---|
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 |
5152

5253
1. Select **Review + Create".
5354
1. Select **Create**.
5455

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-
![SignalR Service Mode](media/signalr-concept-azure-functions/signalr-service-mode.png)
6156

6257
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
6358

6459
### Create an Azure Function App and an Azure Storage account
6560

6661
1. From the home page in the Azure portal, select on the **Create a resource** (**+**).
6762

68-
1. Search for **Function App** and select it.
63+
1. Search for **Function App** and select it.
6964
1. Select **Create**.
7065

7166
1. Enter the following information.
7267

7368
| Name | Value |
7469
|---|---|
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 |
7974

8075
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.
8176

@@ -84,11 +79,13 @@ Your application will access a SignalR Service instance. Use the following step
8479
## Create an Azure Functions project locally
8580
### Initialize a function app
8681

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.
8885
```
8986
func init --worker-runtime node --language javascript --name my-app
9087
```
91-
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).
9289

9390
### Configure application settings
9491

@@ -107,10 +104,13 @@ When running and debugging the Azure Functions runtime locally, application sett
107104
}
108105
```
109106

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.
114114

115115

116116
[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
127127
func new --template "SignalR negotiate HTTP trigger" --name negotiate
128128
```
129129

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+
132132
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`.
133133

134134
```json
@@ -160,11 +160,11 @@ When the chat app first opens in the browser, it requires valid connection crede
160160
```
161161

162162
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+
164164
1. Close the *negotiate/function.json* file.
165-
166-
167-
165+
166+
167+
168168

169169
1. Open **negotiate/index.js** to view the body of the function.
170170

@@ -214,7 +214,7 @@ The web app also requires an HTTP API to send chat messages. You'll create an HT
214214
]
215215
}
216216
```
217-
We make two changes to the original function:
217+
Two changes are made to the original file:
218218
* Changes the route to `messages` and restricts the HTTP trigger to the **POST** HTTP method.
219219
* 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`.
220220

@@ -251,7 +251,7 @@ The web app also requires an HTTP API to send chat messages. You'll create an HT
251251

252252
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.
253253

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.
255255
1. In the *content* folder, create a new file named *index.html*.
256256

257257
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
308308

309309
![Local chat client web user interface](./media/signalr-tutorial-authenticate-azure-functions/local-chat-client-ui.png)
310310

311-
1. Enter a message in the chat box and press enter.
311+
1. Enter a message in the chat box and press enter.
312312

313313
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+
315315

316316
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
317317

@@ -354,13 +354,13 @@ The *--publish-local-settings* option publishes your local settings from the *lo
354354

355355
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.
356356

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.
358358
1. Select **Settings** -> **Authentication**.
359359
1. Select **Add identity provider**.
360360
![Screenshot of the Function App Authentication page.](./media/signalr-tutorial-authenticate-azure-functions/function-app-authentication.png)
361361

362362
1. Select **Microsoft** from the **Identity provider** list.
363-
![The screenshot of "Add an identity provider blade"](media/signalr-tutorial-authenticate-azure-functions/function-app-select-identity-provider.png)
363+
![Screenshot of "Add an identity provider" page.](media/signalr-tutorial-authenticate-azure-functions/function-app-select-identity-provider.png)
364364

365365
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:
366366

@@ -392,13 +392,16 @@ Congratulations! You've deployed a real-time, serverless chat app!
392392

393393
To clean up the resources created in this tutorial, delete the resource group using the Azure portal.
394394

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+
395398
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)
396399

397400
## Next steps
398401

399402
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.
400403

401404
> [!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)
403406
404407
[Having issues? Let us know.](https://aka.ms/asrs/qsauth)

0 commit comments

Comments
 (0)