Skip to content

Commit 8b1ecb6

Browse files
committed
update dotnet-core-api tutorials
1 parent ad982d4 commit 8b1ecb6

File tree

4 files changed

+115
-100
lines changed

4 files changed

+115
-100
lines changed

articles/app-service/app-service-web-tutorial-auth-aad.md

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
---
2-
title: 'Tutorial: AuthN/AuthO end-to-end'
3-
description: Learn how to use App Service authentication and authorization to secure your App Service apps, including access to remote APIs.
2+
title: 'Tutorial: Authenticate users E2E'
3+
description: Learn how to use App Service authentication and authorization to secure your App Service apps end-to-end, including access to remote APIs.
44
keywords: app service, azure app service, authN, authZ, secure, security, multi-tiered, azure active directory, azure ad
55
ms.devlang: dotnet
66
ms.topic: tutorial
7-
ms.date: 08/14/2019
7+
ms.date: 04/29/2020
88
ms.custom: seodec18
9-
109
---
1110

1211
# Tutorial: Authenticate and authorize users end-to-end in Azure App Service
@@ -42,8 +41,8 @@ You can follow the steps in this tutorial on macOS, Linux, Windows.
4241

4342
To complete this tutorial:
4443

45-
* [Install Git](https://git-scm.com/).
46-
* [Install .NET Core](https://www.microsoft.com/net/core/).
44+
* <a href="https://git-scm.com/" target="_blank">Install Git</a>
45+
* <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1" target="_blank">Install the latest .NET Core 3.1 SDK</a>
4746

4847
## Create local .NET Core app
4948

@@ -87,7 +86,7 @@ az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePla
8786
```
8887

8988
> [!NOTE]
90-
> Save the URLs of the Git remotes for your front-end and back-end apps, which are shown in the output from `az webapp create`.
89+
> Save the URLs of the Git remotes for your front-end app and back-end app, which are shown in the output from `az webapp create`.
9190
>
9291
9392
### Push to Azure from Git
@@ -135,47 +134,47 @@ private static readonly HttpClient _client = new HttpClient();
135134
private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";
136135
```
137136

138-
Find the `GetAll()` method and replace the code inside the curly braces with:
137+
Find the method that's decorated with `[HttpGet]` and replace the code inside the curly braces with:
139138

140139
```cs
141-
var data = _client.GetStringAsync($"{_remoteUrl}/api/Todo").Result;
140+
var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
142141
return JsonConvert.DeserializeObject<List<TodoItem>>(data);
143142
```
144143

145144
The first line makes a `GET /api/Todo` call to the back-end API app.
146145

147-
Next, find the `GetById(long id)` method and replace the code inside the curly braces with:
146+
Next, find the method that's decorated with `[HttpGet("{id}")]` and replace the code inside the curly braces with:
148147

149148
```cs
150-
var data = _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}").Result;
149+
var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
151150
return Content(data, "application/json");
152151
```
153152

154153
The first line makes a `GET /api/Todo/{id}` call to the back-end API app.
155154

156-
Next, find the `Create([FromBody] TodoItem item)` method and replace the code inside the curly braces with:
155+
Next, find the method that's decorated with `[HttpPost]` and replace the code inside the curly braces with:
157156

158157
```cs
159-
var response = _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", item).Result;
160-
var data = response.Content.ReadAsStringAsync().Result;
158+
var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
159+
var data = await response.Content.ReadAsStringAsync();
161160
return Content(data, "application/json");
162161
```
163162

164163
The first line makes a `POST /api/Todo` call to the back-end API app.
165164

166-
Next, find the `Update(long id, [FromBody] TodoItem item)` method and replace the code inside the curly braces with:
165+
Next, find the method that's decorated with `[HttpPut("{id}")]` and replace the code inside the curly braces with:
167166

168167
```cs
169-
var res = _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", item).Result;
168+
var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
170169
return new NoContentResult();
171170
```
172171

173172
The first line makes a `PUT /api/Todo/{id}` call to the back-end API app.
174173

175-
Next, find the `Delete(long id)` method and replace the code inside the curly braces with:
174+
Next, find the method that's decorated with `[HttpDelete("{id}")]` and replace the code inside the curly braces with:
176175

177176
```cs
178-
var res = _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}").Result;
177+
var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
179178
return new NoContentResult();
180179
```
181180

@@ -205,37 +204,37 @@ You use Azure Active Directory as the identity provider. For more information, s
205204

206205
### Enable authentication and authorization for back-end app
207206

208-
1. In the [Azure portal](https://portal.azure.com) menu, select **Resource groups** or search for and select *Resource groups* from any page.
207+
In the [Azure portal](https://portal.azure.com) menu, select **Resource groups** or search for and select *Resource groups* from any page.
209208

210-
1. In **Resource groups**, find and select your resource group. In **Overview**, select your back-end app's management page.
209+
In **Resource groups**, find and select your resource group. In **Overview**, select your back-end app's management page.
211210

212-
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/portal-navigate-back-end.png)
211+
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/portal-navigate-back-end.png)
213212

214-
1. In your back-end app's left menu, select **Authentication / Authorization**, then enable App Service Authentication by selecting **On**.
213+
In your back-end app's left menu, select **Authentication / Authorization**, then enable App Service Authentication by selecting **On**.
215214

216-
1. In **Action to take when request is not authenticated**, select **Log in with Azure Active Directory**.
215+
In **Action to take when request is not authenticated**, select **Log in with Azure Active Directory**.
217216

218-
1. Under **Authentication Providers**, select **Azure Active Directory**
217+
Under **Authentication Providers**, select **Azure Active Directory**.
219218

220-
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/configure-auth-back-end.png)
219+
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/configure-auth-back-end.png)
221220

222-
1. Select **Express**, then accept the default settings to create a new AD app and select **OK**.
221+
Select **Express**, then accept the default settings to create a new AD app and select **OK**.
223222

224-
1. In the **Authentication / Authorization** page, select **Save**.
223+
In the **Authentication / Authorization** page, select **Save**.
225224

226-
Once you see the notification with the message `Successfully saved the Auth Settings for <back-end-app-name> App`, refresh the page.
225+
Once you see the notification with the message `Successfully saved the Auth Settings for <back-end-app-name> App`, refresh the portal page.
227226

228-
1. Select **Azure Active Directory** again, and then select the **Azure AD App**.
227+
Select **Azure Active Directory** again, and then select the **Azure AD App**.
229228

230-
1. Copy the **Client ID** of the Azure AD application to a notepad. You need this value later.
229+
Copy the **Client ID** of the Azure AD application to a notepad. You need this value later.
231230

232-
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/get-application-id-back-end.png)
231+
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/get-application-id-back-end.png)
233232

234233
### Enable authentication and authorization for front-end app
235234

236-
Follow the same steps for the back-end app, but skip the last step. You don't need the client ID for the front-end app.
235+
Follow the same steps for the front-end app, but skip the last step. You don't need the client ID for the front-end app.
237236

238-
If you like, navigate to `http://<front-end-app-name>.azurewebsites.net`. It should now direct you to a secured sign-in page. After you sign in, you still can't access the data from the back-end app, because you still need to do three things:
237+
If you like, navigate to `http://<front-end-app-name>.azurewebsites.net`. It should now direct you to a secured sign-in page. After you sign in, *you still can't access the data from the back-end app*, because the back-end app now requires Azure Active Directory sign-in from the front-end app. You need to do three things:
239238

240239
- Grant the front end access to the back end
241240
- Configure App Service to return a usable token
@@ -248,27 +247,29 @@ If you like, navigate to `http://<front-end-app-name>.azurewebsites.net`. It sho
248247

249248
Now that you've enabled authentication and authorization to both of your apps, each of them is backed by an AD application. In this step, you give the front-end app permissions to access the back end on the user's behalf. (Technically, you give the front end's _AD application_ the permissions to access the back end's _AD application_ on the user's behalf.)
250249

251-
1. In the [Azure portal](https://portal.azure.com) menu, select **Azure Active Directory** or search for and select *Azure Active Directory* from any page.
250+
In the [Azure portal](https://portal.azure.com) menu, select **Azure Active Directory** or search for and select *Azure Active Directory* from any page.
252251

253-
1. Select **App registrations** > **Owned applications**. Select your front-end app name, then select **API permissions**.
252+
Select **App registrations** > **Owned applications** > **View all applications in this directory**. Select your front-end app name, then select **API permissions**.
254253

255-
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/add-api-access-front-end.png)
254+
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/add-api-access-front-end.png)
256255

257-
1. Select **Add a permission**, then select **My APIs** > **\<back-end-app-name>**.
256+
Select **Add a permission**, then select **APIs my organization uses** > **\<back-end-app-name>**.
258257

259-
1. In the **Request API permissions** page for the back-end app, select **Delegated permissions** and **user_impersonation**, then select **Add permissions**.
258+
In the **Request API permissions** page for the back-end app, select **Delegated permissions** and **user_impersonation**, then select **Add permissions**.
260259

261-
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/select-permission-front-end.png)
260+
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/select-permission-front-end.png)
262261

263262
### Configure App Service to return a usable access token
264263

265264
The front-end app now has the required permissions to access the back-end app as the signed-in user. In this step, you configure App Service authentication and authorization to give you a usable access token for accessing the back end. For this step, you need the back end's client ID, which you copied from [Enable authentication and authorization for back-end app](#enable-authentication-and-authorization-for-back-end-app).
266265

267-
Sign in to [Azure Resource Explorer](https://resources.azure.com). At the top of the page, click **Read/Write** to enable editing of your Azure resources.
266+
In your front-end app's left menu, select **Resource explorer** under **Development Tools**, then select **Go**.
267+
268+
The [Azure Resource Explorer](https://resources.azure.com) is now opened with your front-end app selected in the resource tree. At the top of the page, click **Read/Write** to enable editing of your Azure resources.
268269

269270
![ASP.NET Core API running in Azure App Service](./media/app-service-web-tutorial-auth-aad/resources-enable-write.png)
270271

271-
In the left browser, click **subscriptions** > **_\<your-subscription>_** > **resourceGroups** > **myAuthResourceGroup** > **providers** > **Microsoft.Web** > **sites** > **_\<front-end-app-name>_** > **config** > **authsettings**.
272+
In the left browser, drill down to **config** > **authsettings**.
272273

273274
In the **authsettings** view, click **Edit**. Set `additionalLoginParams` to the following JSON string, using the client ID you copied.
274275

@@ -306,7 +307,7 @@ public override void OnActionExecuting(ActionExecutingContext context)
306307
}
307308
```
308309

309-
This code adds the standard HTTP header `Authorization: Bearer <access-token>` to all remote API calls. In the ASP.NET Core MVC request execution pipeline, `OnActionExecuting` executes just before the respective action method (such as `GetAll()`) does, so each of your outgoing API call now presents the access token.
310+
This code adds the standard HTTP header `Authorization: Bearer <access-token>` to all remote API calls. In the ASP.NET Core MVC request execution pipeline, `OnActionExecuting` executes just before the respective action does, so each of your outgoing API call now presents the access token.
310311

311312
Save all your changes. In the local terminal window, deploy your changes to the front-end app with the following Git commands:
312313

@@ -329,15 +330,15 @@ In this step, you point the front-end Angular.js app to the back-end API. This w
329330
While the server code has access to request headers, client code can access `GET /.auth/me` to get the same access tokens (see [Retrieve tokens in app code](app-service-authentication-how-to.md#retrieve-tokens-in-app-code)).
330331

331332
> [!TIP]
332-
> This section uses the standard HTTP methods to demonstrate the secure HTTP calls. However, you can use [Active Directory Authentication Library (ADAL) for JavaScript](https://github.com/AzureAD/azure-activedirectory-library-for-js) to help simplify the Angular.js application pattern.
333+
> This section uses the standard HTTP methods to demonstrate the secure HTTP calls. However, you can use [Microsoft Authentication Library for JavaScript](https://github.com/AzureAD/microsoft-authentication-library-for-js) to help simplify the Angular.js application pattern.
333334
>
334335
335336
### Configure CORS
336337

337-
In the Cloud Shell, enable CORS to your client's URL by using the [`az resource update`](/cli/azure/resource#az-resource-update) command. Replace the _\<back-end-app-name>_ and _\<front-end-app-name>_ placeholders.
338+
In the Cloud Shell, enable CORS to your client's URL by using the [`az webapp cors add`](/cli/azure/webapp/cors#az-webapp-cors-add) command. Replace the _\<back-end-app-name>_ and _\<front-end-app-name>_ placeholders.
338339

339340
```azurecli-interactive
340-
az resource update --name web --resource-group myAuthResourceGroup --namespace Microsoft.Web --resource-type config --parent sites/<back-end-app-name> --set properties.cors.allowedOrigins="['https://<front-end-app-name>.azurewebsites.net']" --api-version 2015-06-01
341+
az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'
341342
```
342343

343344
This step is not related to authentication and authorization. However, you need it so that your browser allows the cross-domain API calls from your Angular.js app. For more information, see [Add CORS functionality](app-service-web-tutorial-rest-api.md#add-cors-functionality).
@@ -346,7 +347,7 @@ This step is not related to authentication and authorization. However, you need
346347

347348
In the local repository, open _wwwroot/index.html_.
348349

349-
In Line 51, set the `apiEndpoint` variable to the URL of your back-end app (`https://<back-end-app-name>.azurewebsites.net`). Replace _\<back-end-app-name>_ with your app name in App Service.
350+
In Line 51, set the `apiEndpoint` variable to the HTTPS URL of your back-end app (`https://<back-end-app-name>.azurewebsites.net`). Replace _\<back-end-app-name>_ with your app name in App Service.
350351

351352
In the local repository, open _wwwroot/app/scripts/todoListSvc.js_ and see that `apiEndpoint` is prepended to all the API calls. Your Angular.js app is now calling the back-end APIs.
352353

@@ -432,7 +433,7 @@ What you learned:
432433
> * Use access tokens from server code
433434
> * Use access tokens from client (browser) code
434435
435-
Advance to the next tutorial to learn how to map a custom DNS name to your web app.
436+
Advance to the next tutorial to learn how to map a custom DNS name to your app.
436437

437438
> [!div class="nextstepaction"]
438439
> [Map an existing custom DNS name to Azure App Service](app-service-web-tutorial-custom-domain.md)

articles/app-service/app-service-web-tutorial-rest-api.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Learn how Azure App Service helps you host your RESTful APIs with C
44
ms.assetid: a820e400-06af-4852-8627-12b3db4a8e70
55
ms.devlang: dotnet
66
ms.topic: tutorial
7-
ms.date: 02/11/2020
7+
ms.date: 04/28/2020
88
ms.custom: mvc, devcenter, seo-javascript-september2019, seo-javascript-october2019, seodec18
99
---
1010

@@ -27,8 +27,8 @@ You can follow the steps in this tutorial on macOS, Linux, Windows.
2727

2828
To complete this tutorial:
2929

30-
* [Install Git](https://git-scm.com/).
31-
* [Install .NET Core](https://www.microsoft.com/net/core/).
30+
* <a href="https://git-scm.com/" target="_blank">Install Git</a>
31+
* <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1" target="_blank">Install the latest .NET Core 3.1 SDK</a>
3232

3333
## Create local ASP.NET Core app
3434

@@ -93,27 +93,28 @@ In this step, you deploy your SQL Database-connected .NET Core application to Ap
9393
[!INCLUDE [app-service-plan-no-h](../../includes/app-service-web-git-push-to-azure-no-h.md)]
9494

9595
<pre>
96-
Counting objects: 98, done.
97-
Delta compression using up to 8 threads.
98-
Compressing objects: 100% (92/92), done.
99-
Writing objects: 100% (98/98), 524.98 KiB | 5.58 MiB/s, done.
100-
Total 98 (delta 8), reused 0 (delta 0)
96+
Enumerating objects: 83, done.
97+
Counting objects: 100% (83/83), done.
98+
Delta compression using up to 8 threads
99+
Compressing objects: 100% (78/78), done.
100+
Writing objects: 100% (83/83), 22.15 KiB | 3.69 MiB/s, done.
101+
Total 83 (delta 26), reused 0 (delta 0)
101102
remote: Updating branch 'master'.
102-
remote: .
103103
remote: Updating submodules.
104-
remote: Preparing deployment for commit id '0c497633b8'.
104+
remote: Preparing deployment for commit id '509236e13d'.
105105
remote: Generating deployment script.
106-
remote: Project file path: ./DotNetCoreSqlDb.csproj
106+
remote: Project file path: .\TodoApi.csproj
107+
remote: Generating deployment script for ASP.NET MSBuild16 App
107108
remote: Generated deployment script files
108109
remote: Running deployment command...
109-
remote: Handling ASP.NET Core Web Application deployment.
110+
remote: Handling ASP.NET Core Web Application deployment with MSBuild16.
110111
remote: .
111112
remote: .
112113
remote: .
113114
remote: Finished successfully.
114115
remote: Running post deployment command(s)...
116+
remote: Triggering recycle (preview mode disabled).
115117
remote: Deployment successful.
116-
remote: App container will begin restart within 10 seconds.
117118
To https://&lt;app_name&gt;.scm.azurewebsites.net/&lt;app_name&gt;.git
118119
* [new branch] master -> master
119120
</pre>
@@ -154,10 +155,10 @@ In production, your browser app would have a public URL instead of the localhost
154155

155156
### Enable CORS
156157

157-
In the Cloud Shell, enable CORS to your client's URL by using the [`az resource update`](/cli/azure/resource#az-resource-update) command. Replace the _&lt;appname>_ placeholder.
158+
In the Cloud Shell, enable CORS to your client's URL by using the [`az webapp cors add`](/cli/azure/webapp/cors#az-webapp-cors-add) command. Replace the _&lt;app-name>_ placeholder.
158159

159160
```azurecli-interactive
160-
az resource update --name web --resource-group myResourceGroup --namespace Microsoft.Web --resource-type config --parent sites/<app_name> --set properties.cors.allowedOrigins="['http://localhost:5000']" --api-version 2015-06-01
161+
az webapp cors add --resource-group myResourceGroup --name <app-name> --allowed-origins 'http://localhost:5000'
161162
```
162163

163164
You can set more than one client URL in `properties.cors.allowedOrigins` (`"['URL1','URL2',...]"`). You can also enable all client URLs with `"['*']"`.

0 commit comments

Comments
 (0)