Skip to content

after.md

Latest commit

 

History

History
177 lines (107 loc) · 9.92 KB

after.md

File metadata and controls

177 lines (107 loc) · 9.92 KB
title Tutorial - Add authentication to a web app on Azure App Service | Azure
description In this tutorial, you learn how to enable authentication and authorization for a web app running on Azure App Service. Limit access to the web app to users in your organization​.
author cephalin
ms.author cephalin
ms.service azure-app-service
ms.topic include
ms.date 11/29/2024
ms.custom
azureday1
sfi-image-nochange

1. Prerequisites

[!INCLUDE quickstarts-free-trial-note]

2. Create and publish a web app on App Service

For this tutorial, you need a web app deployed to App Service. You can use an existing web app, or you can follow one of the quickstarts to create and publish a new web app to App Service:

Whether you use an existing web app or create a new one, take note of the following:

  • Web app name.
  • Resource group that the web app is deployed to.

You need these names throughout this tutorial.

3. Configure authentication and authorization

Now that you have a web app running on App Service, enable authentication and authorization. You use Microsoft Entra as the identity provider. For more information, see Configure Microsoft Entra authentication for your App Service application.

Workforce configuration

  1. In the Azure portal menu, select Resource groups, or search for and select Resource groups from any page.

  2. In Resource groups, find and select your resource group. In Overview, select your app's management page.

    :::image type="content" alt-text="Screenshot that shows selecting your app's management page." source="../../media/scenario-secure-app-authentication-app-service/select-app-service.png":::

  3. On your app's left menu, select Authentication, and then select Add identity provider.

  4. In the Add an identity provider page, select Microsoft as the Identity provider to sign in Microsoft and Microsoft Entra identities.

  5. For Tenant type, select Workforce configuration (current tenant) for employees and business guests.

  6. For App registration > App registration type, select Create new app registration to create a new app registration in Microsoft Entra.

  7. Enter a display Name for your application. Users of your application might see the display name when they use the app, for example during sign-in.

  8. For Client secret expiration, select Recommended: 180 days.

  9. For App registration > Supported account types, select Current tenant-single tenant so only users in your organization can sign in to the web app.

  10. In the Additional checks section, select:

    • Allow requests only from this application itself for Client application requirement
    • Allow requests from any identity for Identity requirement
    • Allow requests only from the issuer tenant for Tenant requirement

  11. In the App Service authentication settings section, set:

    • Require authentication for Authentication
    • HTTP 302 Found redirect: recommended for websites for Unauthenticated requests
    • Token store box

  12. At the bottom of the Add an identity provider page, select Add to enable authentication for your web app.

    :::image type="content" alt-text="Screenshot that shows configuring authentication." source="../../media/scenario-secure-app-authentication-app-service/configure-authentication.png":::

    You now have an app that's secured by the App Service authentication and authorization.

    [!NOTE] To allow accounts from other tenants, change the 'Issuer URL' to 'https://login.microsoftonline.com/common/v2.0' by editing your 'Identity Provider' from the 'Authentication' blade.

External configuration

  1. In the Azure portal menu, select Resource groups, or search for and select Resource groups from any page.

  2. In Resource groups, find and select your resource group. In Overview, select your app's management page.

    :::image type="content" alt-text="Screenshot that shows selecting your app's management page." source="../../media/scenario-secure-app-authentication-app-service/select-app-service.png":::

  3. On your app's left menu, select Authentication, and then select Add identity provider.

  4. In the Add an identity provider page, select Microsoft as the Identity provider to sign in Microsoft and Microsoft Entra identities.

  5. For Tenant type, select External configuration for external users.

  6. Select Create new app registration to create a new app registration.

  7. Select an existing tenant to use from the drop-down, or select Create new to create a new external tenant.

    :::image type="content" alt-text="Screenshot that shows the Select a tenant dropdown." source="../../media/scenario-secure-app-authentication-app-service/configure-authentication-external-select.png":::

  8. (Optional) In the Create a tenant page, add the Tenant Name* and Domain Name. Select a Location and select Review and create and then Create.

    :::image type="content" alt-text="Screenshot the Create a tenant page." source="../../media/scenario-secure-app-authentication-app-service/configure-authentication-external-create-tenant.png":::

  9. Select Configure to configure external authentication.

  10. The browser opens Configure customer authentication. In Setup sign-in, select Create new to create a sign-in experience for your external users.

  11. Enter a Name for the user flow.

  12. For this quickstart, select Email and password which allows new users to sign up and sign in using an email address as the sign-in name and a password as their first factor credential.

  13. Select Create to create the user flow.

    :::image type="content" alt-text="Screenshot that shows creating a user flow." source="../../media/scenario-secure-app-authentication-app-service/configure-authentication-external-user-flow.png":::

  14. Select Next to customize branding.

  15. Add your company logo, select a background color, and select a sign-in layout.

    :::image type="content" alt-text="Screenshot that shows the customized branding tab." source="../../media/scenario-secure-app-authentication-app-service/configure-authentication-branding.png":::

  16. Select Next. If the tenant you selected already has a branding configuration you will need to confirm that you want to override it.

  17. Select Configure in the Review tab to confirm external tenant update.

  18. The browser returns to the Add an identity provider page.

  19. In the Additional checks section, select:

    • Allow requests only from this application itself for Client application requirement
    • Allow requests from any identity for Identity requirement
    • Allow requests only from the issuer tenant for Tenant requirement

  20. In the App Service authentication settings section, set:

    • Require authentication for Authentication
    • HTTP 302 Found redirect: recommended for websites for Unauthenticated requests
    • Token store box

  21. At the bottom of the Add an identity provider page, select Add to enable authentication for your web app.

    :::image type="content" alt-text="Screenshot that shows the Additional checks and authentication settings sections." source="../../media/scenario-secure-app-authentication-app-service/configure-authentication-external-enable.png":::

4. Verify limited access to the web app

When you enabled the App Service authentication/authorization module in the previous section, an app registration was created in your workforce or external tenant. The app registration has the display name you created in a previous step.

  1. To check the settings, sign in to the Microsoft Entra admin center as at least an Application Developer.

  2. If you chose external configuration, use the Settings icon in the top menu to switch to the external tenant with your web app from the Directories + subscriptions menu.

  3. Browse to Identity > Applications > App registrations and select Applications > App registrations from the menu.

  4. Select the app registration that was created.

  5. In the overview, verify that Supported account types is set to My organization only.

  6. To verify that access to your app is limited to users in your organization, go to your web app Overview and select the Default domain link.

    :::image type="content" alt-text="Screenshot that shows verifying access." source="../../media/scenario-secure-app-authentication-app-service/verify-access.png":::

  7. You should be directed to a secured sign-in page, verifying that unauthenticated users aren't allowed access to the site.

  8. Sign in as a user in your organization to gain access to the site.

  9. To verify that users outside the organization don't have access, open another incognito or private browser window and try to sign in by using a personal Microsoft account. The sign-in should fail or be denied.

5. Clean up resources

[!INCLUDE clean up resources]

Next steps

In this tutorial, you learned how to:

[!div class="checklist"]

  • Configure authentication for the web app.
  • Limit access to the web app to users in your organization.