|
| 1 | +--- |
| 2 | +title: Add Active Directory authentication |
| 3 | +description: Add Microsoft Identity authentication to your Express.js web app on Azure App service using easy authentication. |
| 4 | +ms.topic: how-to |
| 5 | +ms.date: 04/28/2021 |
| 6 | +ms.custom: devx-track-js |
| 7 | +#intent: Create Express.js web app with easy auth configured. |
| 8 | +--- |
| 9 | + |
| 10 | +# Add easy authentication to your Express.js web app |
| 11 | + |
| 12 | +Add Microsoft authentication to your web app with an app registration and an Azure app service. The Azure app service provides an easy authentication ("easy auth") to your web app, doing most of the work for a simple authentication use case for you. |
| 13 | + |
| 14 | +* [Sample code](https://github.com/azure-samples/js-e2e-web-app-easy-auth.git) |
| 15 | + |
| 16 | +## Easy auth for Azure web apps |
| 17 | + |
| 18 | +[Easy auth](/azure/app-service/overview-authentication-authorization.md#feature-architecture-on-windows-non-container-deployment) allows your app to provide login to your users using their existing Microsoft account. |
| 19 | + |
| 20 | +The account doesn't have to have a particular domain name. The account can include accounts such as: |
| 21 | + |
| 22 | +* `@microsoft.com` |
| 23 | +* `@outlook.com` |
| 24 | +* `@yahoo.com` |
| 25 | +* `@gmail.com` |
| 26 | + |
| 27 | +Any email domain works as long as the user has an existing Microsoft Identity account with that email address. |
| 28 | + |
| 29 | +Users are held and authenticated by tenant. An Azure tenant represents a single organization. A tenant is a dedicated and trusted instance of [Azure Active Directory](/azure/active-directory/fundamentals/active-directory-whatis.md) that's automatically created when your organization signs up for a Microsoft cloud service subscription, such as Microsoft Azure, Microsoft Intune, or Microsoft 365. |
| 30 | + |
| 31 | +All users, regardless of tenant, can be authorized by the Microsoft Identity provider, if the user and the app are both configured that way. |
| 32 | + |
| 33 | +The following steps provide: |
| 34 | +* Identity provided by a secure identity provider |
| 35 | +* No code changes to your app required |
| 36 | +* No authentication callback routing changes required |
| 37 | +* A quick way to secure your app |
| 38 | +* Very little Active Directory setup required |
| 39 | + |
| 40 | +## Prepare your development environment |
| 41 | + |
| 42 | +Make sure the following are installed on your local developer workstation: |
| 43 | + |
| 44 | +- An Azure account with **an active subscription which you own**. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F). Ownership is required to provide the correct Azure Active Directory permissions to complete these steps. |
| 45 | +- Microsoft Identity account - this is an [email account](https://signup.live.com) added to Microsoft Identity but doesn't have to be the same account you use to create resources. |
| 46 | +- [Node.js 14 and npm](https://nodejs.org/en/download) - installed to your local machine. |
| 47 | +- [Visual Studio Code](https://code.visualstudio.com/) - installed to your local machine. |
| 48 | +- Visual Studio Code extensions: |
| 49 | + - [Azure App Service extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) for Visual Studio Code. |
| 50 | + |
| 51 | +## Download sample Express.js app |
| 52 | + |
| 53 | +Create and run an Express.js app by cloning an Azure sample repository. |
| 54 | + |
| 55 | +1. At a terminal command prompt, go to the location where you want to create the app folder. |
| 56 | + |
| 57 | +1. Use the following base command with git to clone the repository, change into the repository folder named `myexpressapp`, then install the npm dependencies. |
| 58 | + |
| 59 | + ```bash |
| 60 | + git clone https://github.com/azure-samples/js-e2e-web-app-easy-auth.git myexpressapp && \ |
| 61 | + cd myexpressapp && \ |
| 62 | + npm install |
| 63 | + ``` |
| 64 | + |
| 65 | +1. Run the app with the following command: |
| 66 | + |
| 67 | + ```bash |
| 68 | + npm start |
| 69 | + ``` |
| 70 | + |
| 71 | +1. Browse to your locally running app, `http://localhost:8080`. |
| 72 | +1. In the same bash terminal, stop the running app with **Control + c**. |
| 73 | + |
| 74 | +## Create an Azure app service |
| 75 | + |
| 76 | +1. In VS Code, select **Azure** from the activity bar, then select **+** in the **Azure: App Service** side bar. |
| 77 | +1. Complete the prompts: |
| 78 | + |
| 79 | + |Prompt|Enter| |
| 80 | + |--|--| |
| 81 | + |Enter a globally unique name for the new web app.|The name is used as a subdomain for the web app's URI. | |
| 82 | + |Select a runtime stack.|Select the **most recent version of Node.js**, such as 14 LTS.| |
| 83 | + |Select a pricing tier|Select the **free** tier.| |
| 84 | + |
| 85 | +1. Wait for the web app creation to complete. |
| 86 | +1. Select **Deploy** to deploy the sample Express.js app, when the notification pop-up displays. |
| 87 | +1. When the notification pop-up displays a link to the **output window**, select the link to watch the [zip deployment](/azure/app-service/deploy-zip.md). |
| 88 | +1. Select **Browse website** from the notification. |
| 89 | + The web app may take a minute or two to return from the server for the first (cold) start. |
| 90 | +
|
| 91 | +1. When you receive the following response in the browser, the sample app is deployed and is responding correctly. |
| 92 | + Authentication isn't configured yet. That is the next step. |
| 93 | + |
| 94 | + :::image type="content" source="../../media/app-service-easy-authentication/easy-auth-expressjs-website.png" alt-text="Select **Browse website** from the notification. When you receive the following response in the browser, the sample app is deployed and is responding correctly. Authentication isn't configured yet. That is the next step."::: |
| 95 | + |
| 96 | +## Configure easy auth for your app service |
| 97 | + |
| 98 | +1. In VS Code, select **Azure** from the activity bar, then right-click your new web app from the **Azure: App Service** side bar. |
| 99 | +1. Select **Open in portal** to configure easy auth. |
| 100 | +1. Select **Authentication** under the app's settings then select **Add identity provider**. |
| 101 | +
|
| 102 | + :::image type="content" source="../../media/app-service-easy-authentication/app-service-add-identity-provider.png" alt-text="Select Authentication under the app's settings then select Add identity provider"::: |
| 103 | +
|
| 104 | +1. In the next form, configure the following identity provider settings: |
| 105 | +
|
| 106 | + |Setting|Value| |
| 107 | + |--|--| |
| 108 | + |Identity provider|Microsoft| |
| 109 | + |App registration type|Create new app registration| |
| 110 | + |Name|Keep the default name, which is the same as your app service.| |
| 111 | + |Supported account types|Select **Any Azure AD directory and personal Microsoft accounts**. This allows anyone within the Microsoft Identity provider to access your web app. Learn more about [these choices](/azure/active-directory/develop/single-and-multi-tenant-apps).| |
| 112 | + |Authentication|Require authentication - this means your app isn't publicly available.| |
| 113 | + |Unauthenticated requests|Keep the default value of 302 not found.| |
| 114 | + | Redirect to|Keep the default value.| |
| 115 | + |Token store|Keep the default value.| |
| 116 | +
|
| 117 | + :::image type="content" source="../../media/app-service-easy-authentication/app-service-add-microsoft-identity-provider.png" alt-text="Configure Authentication for the Microsoft provider with a new app registration for any Azure AD Directory and personal account."::: |
| 118 | +
|
| 119 | +1. Select **Next** to view the permissions but do not make any changes. |
| 120 | +1. Select **Add** to finish the process. |
| 121 | +
|
| 122 | + When the process completes, you are in your app's identity provider list in the portal. |
| 123 | +
|
| 124 | +1. Your app is now private. A user must sign in with a Microsoft Identity account. |
| 125 | +
|
| 126 | + The specific steps of the sign-in process depends on the user's tenant configuration. |
| 127 | +
|
| 128 | +## Sign in with a different user account |
| 129 | +
|
| 130 | +Sign in with a **different user account** to simulate a new user to your web app and authorization. |
| 131 | +
|
| 132 | +1. In VS Code, select **Azure** from the activity bar, then right-click your new web app from the **Azure: App Service** side bar. |
| 133 | +1. Select **Browse website** to open your web app in a browser. |
| 134 | +
|
| 135 | + If you can see your Azure website without logging in, your current browser session already has that account signed in. Open a private or incognito browser window with the same URL. Now you are asked to authenticate. |
| 136 | +
|
| 137 | +1. Accept the permissions requested in the browser's consent pop-up window. |
| 138 | +
|
| 139 | + This means you are allowing the Azure app to view and read your user account information. It was the second tab of the authentication setup, named **Permissions**. |
| 140 | +
|
| 141 | + If you are required to continue with 2-factor authentication, such as using a phone to finish the process, complete those steps. |
| 142 | +1. After logging in, you should see the same website. |
| 143 | +
|
| 144 | +## Clean up resources |
| 145 | +
|
| 146 | +In this procedure, you created an Azure app service and an Azure Active Directory app registration in just a few minutes. |
| 147 | +
|
| 148 | +### Delete your Azure app registration |
| 149 | +
|
| 150 | +1. In the Azure portal, select [Azure Active Directory](https://ms.portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/Overview). |
| 151 | +1. Select **App registrations** then search for your app name. |
| 152 | +1. Select the app's **Properties**, then select **Delete**. |
| 153 | +
|
| 154 | +## Delete your Azure web app |
| 155 | +
|
| 156 | +1. In VS Code, select **Azure** from the activity bar, then right-click your new web app from the **Azure: App Service** side bar. |
| 157 | +1. Right-click on your app then select **Delete...**. |
| 158 | +
|
| 159 | +## Next steps |
| 160 | +
|
| 161 | +* [Install and debug a local project](../with-visual-studio-code/install-run-debug-nodejs.md) |
0 commit comments