# Create AAD Applications ## ### Create AAD Application for UI Create an AAD Application for the UI: 1. Go to the new [Azure portal - App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/) pane. 2. Click **+ New Registration** 1. If prompted choose **Register in this Directory** 3. Enter a "ShareThrift" for your application. 4. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**. 5. Redirect URI 1. Choose **Single-page application (SPA)** from the option list 2. For the URI add the public URL from your CDN Endpoint, e.g ) 6. Select **Register**. Configure AAD Application for the UI * In the AAD Application just created, navigate to Manage > **Authentication** in the navigation menu on the left. * In Platform Configurations, look for the **Single Page Application** * in the section, **Redirect URIs** * Click **Add URI** and add: **** * Logout URL add: * (add the public URL from your CDN Endpoint, e.g ) + /logged-out * Implicit Grant (leave checkboxes unchecked) * Live SDK Support: Yes * Default Client Type: No * Choose **Save** at the top of the screen. * Copy the **Application (client id)** from the Overview panel of this Application to a text document, well use it shortly ### Create AAD Application for the API Create an AAD Application for the API: 1. Go to the new [Azure portal - App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/) pane. 2. Click **+ New Registration** 1. If prompted choose **Register in this Directory** 3. Enter a "**ShareThrift**" for your application. 4. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**. 5. Redirect URI (leave blank) 6. Select **Register**. Expose an AAD Api / Add Client Application * Under **Manage** > Select **Expose An Api** * Application ID URI : Select **Set** and * choose a value like api://sharethrift\.com * click Save * Scopes defined by this API : click **+ Add a scope,** the add a scope pane showed. * Scope Name: **access\_as\_user** * Who can consent: **Admins and users** * Admin consent display name: **Access ShareThrift API** * Admin consent description: **Allows the app to access the ShareThrift API as the signed-in user.** * User consent display name: **Access ShareThrift API** * User consent description: **Allow the application to access the ShareThrift API on your behalf.** * State: **Enabled** * Click **Add Scope** (the pane will disappear) * Authorized Client Applications * Click **Add a client application** * Paste in the **Application (client id)** value from the AAD Application for the UI * Check the the **api://sharethrift\.com/access\_as\_user** scope you just created. * Click Save ### Create Custom Roles for UI and API {% hint style="info" %} Repeat the following for BOTH the UI and the API Applications, be sure to change the ID to a new GUID for each value each time. {% endhint %} * Under **Manage** > Select **Manifest** * **Locate the area of the document with** * `"appRoles": [],` * And replace it with: * (Be sure to update the <\> with new, unique GUID values) ```javascript "appRoles": [ { "allowedMemberTypes": [ "User" ], "displayName": "Moderator", "id": "<>", "isEnabled": true, "description": "Moderators Have the ability reject items requested to be shared due to violations of policy.", "value": "Moderator" }, { "allowedMemberTypes": [ "User" ], "displayName": "Partner Technical Administrator", "id": "<>", "isEnabled": true, "description": "Partner Technical Administrators are technical staff who have the ability to change SAML config and add/remove users.", "value": "PartnerTechAdmin" }, { "allowedMemberTypes": [ "User" ], "displayName": "Partner Billing Administrator", "id": "<>", "isEnabled": true, "description": "Partner Billing Administrators are staff with ability to see and work with financial data.", "value": "PartnerBillingAdmin" }, { "allowedMemberTypes": [ "User" ], "displayName": "Partner Staff", "id": "<>", "isEnabled": true, "description": "Partner Staff are staff with ability manage with listings.", "value": "PartnerStaff" }, { "allowedMemberTypes": [ "User" ], "displayName": "Public User", "id": "<>", "isEnabled": true, "description": "Public Users are general users.", "value": "PublicUser" } ], ``` ### Add a user to the roles Add A user to the role for both applications * Navigate to Active Directory in the Azure Portal * Under **Manage** > Select **Enterprise Applications** * Select **ShareThrift** from the list of applications * Under **Manage** > Select **Users and groups** * Choose **Add Users** * For users - select **yourself** * Select Role: select **Moderator** * Click **Assign** #### Resources: * Microsoft * [MSAL Wiki](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki) * [MSAL Readme Docs (newest)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser/docs) * [Add app roles in your application](https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-add-app-roles-in-azure-ad-apps) * DON"T USE IMPLICIT GRANT - [Read Why](https://developer.microsoft.com/en-us/microsoft-365/blogs/msal-js-2-0-supports-authorization-code-flow-is-now-generally-available/) * [Great tutorial ](https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-dotnetcore-webapi-roles-groups/tree/master/chapter1) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ecfmg.gitbook.io/azure-serverless-quickstart/application-design/adding-authentication/aad-application.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.