Merge pull request #252690 from MicrosoftDocs/main

Publish to live, Monday 4 AM PST, 9/25

Author: ttorble

articles/active-directory/develop/howto-add-app-roles-in-apps.md

@@ -9,7 +9,7 @@ ms.service: active-directory
 ms.subservice: develop
 ms.workload: identity
 ms.topic: how-to
-ms.date: 09/27/2022
+ms.date: 09/25/2023
 ms.author: cwerner
 ms.reviewer: kkrishna, jmprieur
 ms.custom: aaddev
@@ -73,30 +73,9 @@ If you have not already done so, you'll need to assign yourself as the applicati
 >
 > Ensure that both the API application and the application you want to add permissions to both have an owner, otherwise the API will not be listed when requesting API permissions.
 
-## Assign users and groups to roles
-
-Once you've added app roles in your application, you can assign users and groups to the roles. Assignment of users and groups to roles can be done through the portal's UI, or programmatically using [Microsoft Graph](/graph/api/user-post-approleassignments). When the users assigned to the various app roles sign in to the application, their tokens will have their assigned roles in the `roles` claim.
-
-To assign users and groups to roles by using the Microsoft Entra admin center:
-
-1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com) as at least a [Cloud Application Administrator](../roles/permissions-reference.md#cloud-application-administrator). 
-1. If you have access to multiple tenants, use the **Directories + subscriptions** filter :::image type="icon" source="./media/common/portal-directory-subscription-filter.png" border="false"::: in the top menu to switch to the tenant that contains the app registration to which you want to add an app role.
-1. Browse to **Identity** > **Applications** > **Enterprise applications**.
-1. Select **All applications** to view a list of all your applications. If your application doesn't appear in the list, use the filters at the top of the **All applications** list to restrict the list, or scroll down the list to locate your application.
-1. Select the application in which you want to assign users or security group to roles.
-1. Under **Manage**, select **Users and groups**.
-1. Select **Add user** to open the **Add Assignment** pane.
-1. Select the **Users and groups** selector from the **Add Assignment** pane. A list of users and security groups is displayed. You can search for a certain user or group and select multiple users and groups that appear in the list.
-1. Once you've selected users and groups, select the **Select** button to proceed.
-1. Select **Select a role** in the **Add assignment** pane. All the roles that you've defined for the application are displayed.
-1. Choose a role and select the **Select** button.
-1. Select the **Assign** button to finish the assignment of users and groups to the app.
-
-Confirm that the users and groups you added appear in the **Users and groups** list.
-
 ## Assign app roles to applications
 
-Once you've added app roles in your application, you can assign an app role to a client app by using the Microsoft Entra admin center or programmatically by using [Microsoft Graph](/graph/api/user-post-approleassignments).
+Once you've added app roles in your application, you can assign an app role to a client app by using the Microsoft Entra admin center or programmatically by using [Microsoft Graph](/graph/api/user-post-approleassignments). This is not to be confused with [assigning roles to users](../roles/manage-roles-portal.md).
 
 When you assign app roles to an application, you create _application permissions_. Application permissions are typically used by daemon apps or back-end services that need to authenticate and make authorized API call as themselves, without the interaction of a user.
 
@@ -108,8 +87,7 @@ To assign app roles to an application by using the Microsoft Entra admin center:
 1. Select the application to which you want to assign an app role.
 1. Select **API permissions** > **Add a permission**.
 1. Select the **My APIs** tab, and then select the app for which you defined app roles.
-1. Select **Application permissions**.
-1. Select the role(s) you want to assign.
+1. Under **Permission**, select the role(s) you want to assign.
 1. Select the **Add permissions** button complete addition of the role(s).
 
 The newly added roles should appear in your app registration's **API permissions** pane.
@@ -147,6 +125,27 @@ Developers can use app roles to control whether a user can sign in to an app or
 
 App roles are preferred by developers when they want to describe and control the parameters of authorization in their app themselves. For example, an app using groups for authorization will break in the next tenant as both the group ID and name could be different. An app using app roles remains safe. In fact, assigning groups to app roles is popular with SaaS apps for the same reasons as it allows the SaaS app to be provisioned in multiple tenants.
 
+## Assign users and groups to Microsoft Entra roles
+
+Once you've added app roles in your application, you can assign users and groups to [Microsoft Entra roles](../roles/permissions-reference.md). Assignment of users and groups to roles can be done through the portal's UI, or programmatically using [Microsoft Graph](/graph/api/user-post-approleassignments). When the users assigned to the various roles sign in to the application, their tokens will have their assigned roles in the `roles` claim.
+
+To assign users and groups to roles by using the Microsoft Entra admin center:
+
+1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com) as at least a [Cloud Application Administrator](../roles/permissions-reference.md#cloud-application-administrator). 
+1. If you have access to multiple tenants, use the **Directories + subscriptions** filter :::image type="icon" source="./media/common/portal-directory-subscription-filter.png" border="false"::: in the top menu to switch to the tenant that contains the app registration to which you want to add an app role.
+1. Browse to **Identity** > **Applications** > **Enterprise applications**.
+1. Select **All applications** to view a list of all your applications. If your application doesn't appear in the list, use the filters at the top of the **All applications** list to restrict the list, or scroll down the list to locate your application.
+1. Select the application in which you want to assign users or security group to roles.
+1. Under **Manage**, select **Users and groups**.
+1. Select **Add user** to open the **Add Assignment** pane.
+1. Select the **Users and groups** selector from the **Add Assignment** pane. A list of users and security groups is displayed. You can search for a certain user or group and select multiple users and groups that appear in the list.
+1. Once you've selected users and groups, select the **Select** button to proceed.
+1. Select **Select a role** in the **Add assignment** pane. All the roles that you've defined for the application are displayed.
+1. Choose a role and select the **Select** button.
+1. Select the **Assign** button to finish the assignment of users and groups to the app.
+
+Confirm that the users and groups you added appear in the **Users and groups** list.
+
 ## Next steps
 
 Learn more about app roles with the following resources.

articles/active-directory/develop/quickstart-single-page-app-angular-sign-in.md

@@ -8,7 +8,7 @@ ms.service: active-directory
 ms.subservice: develop
 ms.topic: quickstart
 
-ms.date: 09/13/2023
+ms.date: 09/25/2023
 ms.author: henrymbugua
 ms.reviewer: j-mantu
 ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js
@@ -19,8 +19,6 @@ ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-tra
 
 This quickstart uses a sample Angular single-page app (SPA) to show you how to sign in users by using the [authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow) with Proof Key for Code Exchange (PKCE) and call the Microsoft Graph API. The sample uses the [Microsoft Authentication Library for JavaScript](/javascript/api/@azure/msal-react) to handle authentication.
 
-In this article you'll register a SPA in the Microsoft Entra admin center, and download a sample Angular SPA. Next, you'll run the sample application, sign in with your personal Microsoft account or a work/school account, and sign out.
-
 ## Prerequisites
 
 * An Azure account with an active subscription. If you don't already have one, [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
@@ -56,8 +54,7 @@ To obtain the sample application, you can either clone it from GitHub or downloa
     ```console
     git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
     ```
-
-- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-javascript/archive/refs/heads/main.zip)
+- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-javascript/archive/refs/heads/main.zip). Extract it to a file path where the length of the name is fewer than 260 characters.
 
 ## Configure the project
 

articles/active-directory/develop/quickstart-single-page-app-javascript-sign-in.md

@@ -9,7 +9,7 @@ ms.service: active-directory
 ms.subservice: develop
 ms.topic: quickstart
 ms.workload: identity
-ms.date: 09/13/2023
+ms.date: 09/25/2023
 ms.author: henrymbugua
 ms.reviewer: OwenRichards1
 ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js
@@ -20,8 +20,6 @@ ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-tra
 
 This quickstart uses a sample JavaScript (JS) single-page app (SPA) to show you how to sign in users by using the [authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow) with Proof Key for Code Exchange (PKCE) and call the Microsoft Graph API. The sample uses the [Microsoft Authentication Library for JavaScript](/javascript/api/@azure/msal-react) to handle authentication.
 
-In this article you'll register a SPA in the Microsoft Entra admin center, and download a sample JS SPA. Next, you'll run the sample application, sign in with your personal Microsoft account or a work or school account, and sign out.
-
 ## Prerequisites
 
 * An Azure account with an active subscription. If you don't already have one, [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
@@ -57,85 +55,14 @@ To obtain the sample application, you can either clone it from GitHub or downloa
     ```console
     git clone https://github.com/Azure-Samples/ms-identity-javascript-tutorial
     ```
-
-- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/archive/refs/heads/main.zip).
+- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/archive/refs/heads/main.zip). Extract it to a file path where the length of the name is fewer than 260 characters.
 
 ## Configure the project
 
 1. In your IDE, open the project folder, *ms-identity-javascript-tutorial/angular-spa*, containing the sample.
 1. Open *1-Authentication/1-sign-in/App/authConfig.js* and replace the file contents with the following snippet:
 
-    ```javascript
-        /**
-     * Configuration object to be passed to MSAL instance on creation. 
-     * For a full list of MSAL.js configuration parameters, visit:
-     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
-     */
-    
-    const msalConfig = {
-        auth: {
-            clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
-            authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
-            redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href e.g. http://localhost:3000/
-            navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
-        },
-        cache: {
-            cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
-            storeAuthStateInCookie: false, // set this to true if you have to support IE
-        },
-        system: {
-            loggerOptions: {
-                loggerCallback: (level, message, containsPii) => {
-                    if (containsPii) {
-                        return;
-                    }
-                    switch (level) {
-                        case msal.LogLevel.Error:
-                            console.error(message);
-                            return;
-                        case msal.LogLevel.Info:
-                            console.info(message);
-                            return;
-                        case msal.LogLevel.Verbose:
-                            console.debug(message);
-                            return;
-                        case msal.LogLevel.Warning:
-                            console.warn(message);
-                            return;
-                    }
-                },
-            },
-        },
-    };
-    
-    /**
-     * Scopes you add here will be prompted for user consent during sign-in.
-     * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
-     * For more information about OIDC scopes, visit: 
-     * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
-     */
-    const loginRequest = {
-      scopes: ["openid", "profile"],
-    };
-    
-    /**
-     * An optional silentRequest object can be used to achieve silent SSO
-     * between applications by providing a "login_hint" property.
-     */
-    
-    // const silentRequest = {
-    //   scopes: ["openid", "profile"],
-    //   loginHint: "[email protected]"
-    // };
-    
-    // exporting config object for jest
-    if (typeof exports !== 'undefined') {
-      module.exports = {
-          msalConfig: msalConfig,
-          loginRequest: loginRequest,
-      };
-    }
-    ```
+    :::code language="csharp" source="~/ms-identity-docs-code-javascript/js-spa/App/authConfig.js":::
 
     * `TenantId` - The identifier of the tenant where the application is registered. Replace the text in quotes with the **Directory (tenant) ID** that was recorded earlier from the overview page of the registered application.
     * `ClientId` - The identifier of the application, also referred to as the client. Replace the text in quotes with the **Directory (tenant) ID** value that was recorded earlier from the overview page of the registered application.
@@ -151,7 +78,7 @@ Run the project with a web server by using Node.js:
     npm install
     npm start
     ```
-1. Copy the https URL that appears in the terminal, for example, `https://localhost:3000`, and paste it into a browser. We recommend using a private or incognito browser session.
+1. Copy the `https` URL that appears in the terminal, for example, `https://localhost:3000`, and paste it into a browser. We recommend using a private or incognito browser session.
 1. Follow the steps and enter the necessary details to sign in with your Microsoft account. You'll be requested an email address so a one time passcode can be sent to you. Enter the code when prompted.
 1. The application will request permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select **Accept**.
 1. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.

articles/active-directory/develop/quickstart-single-page-app-react-sign-in.md

@@ -9,7 +9,7 @@ ms.service: active-directory
 ms.subservice: develop
 ms.topic: quickstart
 ms.workload: identity
-ms.date: 09/13/2023
+ms.date: 09/25/2023
 ms.author: henrymbugua
 ms.reviewer: j-mantu
 ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js
@@ -20,8 +20,6 @@ ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-tra
 
 This quickstart uses a sample React single-page app (SPA) to show you how to sign in users by using the [authorization code flow](/azure/active-directory/develop/v2-oauth2-auth-code-flow) with Proof Key for Code Exchange (PKCE). The sample uses the [Microsoft Authentication Library for JavaScript](/javascript/api/@azure/msal-react) to handle authentication.
 
-In this article you'll register a SPA in the Microsoft Entra admin center, and download a sample React SPA. Next, you'll run the sample application, sign in with your personal Microsoft account or a work or school account, and sign out.
-
 ## Prerequisites
 
 * An Azure account with an active subscription. If you don't already have one, [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
@@ -36,7 +34,6 @@ In this article you'll register a SPA in the Microsoft Entra admin center, and d
 1. Select **New registration**.
 1. When the **Register an application** page appears, enter a name for your application, such as *identity-client-app*.
 1. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**.
-1. The application's overview pane is displayed when registration is complete. Record the **Directory (tenant) ID** and the **Application (client) ID** to be used in your application source code.
 1. Select **Register**.
 1. The application's Overview pane displays upon successful registration. Record the **Application (client) ID** and **Directory (tenant) ID** to be used in your application source code.
 
@@ -58,9 +55,7 @@ To obtain the sample application, you can either clone it from GitHub or downloa
     ```console
     git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
     ```
-- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-javascript/tree/main)
-
-If you choose to download the `.zip` file, extract the sample app file to a folder where the total length of the path is 260 or fewer characters.
+- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-javascript/tree/main). Extract it to a file path where the length of the name is fewer than 260 characters.
 
 ## Configure the project
 

articles/active-directory/develop/quickstart-web-app-aspnet-core-sign-in.md

@@ -52,12 +52,12 @@ In this article you register a web application in the Microsoft Entra admin cent
 ## Clone or download the sample application
 
 To obtain the sample application, you can either clone it from GitHub or download it as a *.zip* file.
-- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-dotnet/archive/refs/heads/main.zip). Extract it to a file path where the length of the name is fewer than 260 characters.
 - To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:
 
     ```console
     git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
     ```
+- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-dotnet/archive/refs/heads/main.zip). Extract it to a file path where the length of the name is fewer than 260 characters.
 
 ## Create and upload a self-signed certificate
 

articles/active-directory/develop/single-page-app-tutorial-02-prepare-spa.md

@@ -76,7 +76,7 @@ Identity related **npm** packages must be installed in the project to enable use
 1. Ensure that the correct directory is selected (*reactspalocal*) then enter the following into the terminal to install the relevant `msal` and `bootstrap` packages.
 
     ```powershell
-    npm install @azure/msal-browser @azure/msal-react
+    npm install @azure/msal-browser @azure/msal-react @azure/msal-common
     npm install react-bootstrap bootstrap
     ```
 ---