Merge pull request #239430 from MicrosoftDocs/main

5/26 AM Publish

Author: huypub

articles/active-directory/develop/howto-restore-app.md

@@ -59,7 +59,7 @@ This is because organization-specific settings are stored on a separate object,
 2. Select **Restore app registration**.
 
 ## Permanently delete an application
-You can manually permanently delete an application from your organization. A permanently deleted application can't be restored by you, another administrator, or by Microsoft customer support.
+You can manually permanently delete an application from your organization. A permanently deleted application can't be restored by you, another administrator, or by Microsoft customer support. However, this does not permanently delete the corresponding service principal. A service principal cannot be restored without having an active corresponding application, so the service principal can be manually deleted, which is also permanent. If no action is taken the service principal will be permanently deleted 30 days after deleting the application.
 
 ### To permanently delete an application
 

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-configure-authentication.md

@@ -4,14 +4,11 @@ description: Learn how to configure authentication for a vanilla JavaScript sing
 services: active-directory
 author: OwenRichards1
 manager: CelesteDG
-
 ms.author: owenrichards
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
-ms.custom: developer
+ms.date: 05/25/2023
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure Active Directory (AD) for customers tenant.
 ---
@@ -28,9 +25,7 @@ In the previous article, you created a vanilla JavaScript (JS) single-page appli
 
 The application uses the [Implicit Grant Flow](../../develop/v2-oauth2-implicit-grant-flow.md) to authenticate users. The Implicit Grant Flow is a browser-based flow that doesn't require a back-end server. The flow redirects the user to the sign-in page, where the user signs in and consents to the permissions that are being requested by the application. The purpose of *authConfig.js* is to configure the authentication flow.
 
-1. In your IDE, create a new folder and name it **public**
-1. In the *public* folder, create a new file and name it *authConfig.js*.
-1. Open *authConfig.js* and add the following code snippet:
+1. In the *public* folder, open *authConfig.js* and add the following code snippet:
 
     ```javascript
     /**
@@ -93,16 +88,15 @@ The application uses the [Implicit Grant Flow](../../develop/v2-oauth2-implicit-
     }
      ```
 
-1. Find the `Enter_the_Application_Id_Here` value and replace it with the application ID (clientId) of the app you registered in the Microsoft Entra admin center.
+1. Find the `Enter_the_Application_Id_Here` value and replace it with the **application ID (clientId)** of the app you registered in the Microsoft Entra admin center.
 1. In **Authority**, find `Enter_the_Tenant_Subdomain_Here` and replace it with the subdomain of your tenant. For example, if your tenant primary domain is *caseyjensen@onmicrosoft.com*, the value you should enter is *casyjensen*.
 1. Save the file.
 
 ## Creating the redirection file
 
-A redirection file is required to handle the response from the sign-in page. The redirection file is used to extract the access token from the URL fragment and use it to call the protected API.
+A redirection file is required to handle the response from the sign-in page. The redirection file is used to extract the access token from the URL fragment and use it to call the protected API. The redirection file is also used to handle errors that occur during the authentication process.
 
-1. In the *public* folder, create a new file and name it *authRedirect.js*.
-1. Open *authRedirect.js* and add the following code snippet:
+1. In the *public* folder, open *authRedirect.js* and add the following code snippet:
 
     ```javascript
     // Create the main myMSALObj instance
@@ -189,10 +183,9 @@ A redirection file is required to handle the response from the sign-in page. The
 
 ## Creating the authPopup.js file
 
-The application uses *authPopup.js* to handle the authentication flow when the user signs in using the pop-up window. The pop-up window is used when the user is already signed in and the application needs to get an access token for a different resource. 
+The application uses *authPopup.js* to handle the authentication flow when the user signs in using the pop-up window. The pop-up window is used when the user is already signed in and the application needs to get an access token for a different resource.
 
-1. In the *public* folder, create a new file and name it *authPopup.js*.
-1. Open *authPopup.js* and add the following code snippet:
+1. In the *public* folder, open *authPopup.js* and add the following code snippet:
 
     ```javascript
     // Create the main myMSALObj instance

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-prepare-app.md

@@ -1,28 +1,26 @@
 ---
-title: Prepare a vanilla JavaScript single-page app for authentication 
+title: Prepare a vanilla JavaScript single-page application for authentication 
 description: Learn how to prepare a vanilla JavaScript single-page app (SPA) for authentication and authorization with your Azure Active Directory (AD) for customers tenant.
 services: active-directory
 author: OwenRichards1
 manager: CelesteDG
 ms.author: owenrichards
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
-ms.custom: developer
+ms.date: 05/25/2023
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure AD for customers tenant.
 ---
 
-# Prepare a Single-page application for authentication
+# Prepare a vanilla JavaScript single-page application for authentication
 
-After registering an application and creating a user flow in a Azure Active Directory (AD) for customers tenant, a vanilla JavaScript (JS) single-page application (SPA) can be created using an integrated development environment (IDE) or a code editor. In this article, you'll create a vanilla JS SPA and a server to host the application.
+After registering an application and creating a user flow in an Azure Active Directory (AD) for customers tenant, a vanilla JavaScript (JS) single-page application (SPA) can be created using an integrated development environment (IDE) or a code editor. In this article, you'll create a vanilla JS SPA and a server to host the application.
 
 ## Prerequisites
 
-- Completion of the prerequisites and steps in [Sign in users to a vanilla JS Single-page application](how-to-single-page-app-vanillajs-prepare-tenant.md).
-- Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is used for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
+- Completion of the prerequisites and steps in [Sign in users to a vanilla JS single-page application](how-to-single-page-app-vanillajs-prepare-tenant.md).
+- Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is recommended for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
 - [Node.js](https://nodejs.org/en/download/).
 
 ## Create a new vanilla JS project and install dependencies
@@ -33,6 +31,21 @@ After registering an application and creating a user flow in a Azure Active Dire
     ```powershell
     npm init -y
     ```
+1. Create additional folders and files to achieve the following project structure:
+
+    ```
+        └── public
+            └── authConfig.js
+            └── authPopup.js
+            └── authRedirect.js
+            └── index.html
+            └── signout.html
+            └── styles.css
+            └── ui.js    
+        └── server.js
+    ```
+    
+## Install app dependencies
 
 1. In the **Terminal**, run the following command to install the required dependencies for the project:
 
@@ -87,6 +100,8 @@ After registering an application and creating a user flow in a Azure Active Dire
 
     ```
 
+In this code, the **app** variable is initialized with the **express** module and **express** is used to serve the public assets. **Msal-browser** is served as a static asset and is used to initiate the authentication flow.
+
 ## Next steps
 
 > [!div class="nextstepaction"]

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-prepare-tenant.md

@@ -1,28 +1,26 @@
 ---
-title: Prepare your tenant to use a vanilla JavaScript single-page app for authentication. 
+title: Prepare your customer tenant to authenticate a vanilla JavaScript single-page application.
 description: Learn how to configure your Azure Active Directory (AD) for customers tenant for authentication with a vanilla JavaScript single-page app (SPA).
 services: active-directory
 author: OwenRichards1
 manager: CelesteDG
 ms.author: owenrichards
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
-ms.custom: developer
+ms.date: 05/25/2023
+
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure Active Directory (AD) for customers tenant.
 ---
 
-# Sign in users to a vanilla JS single-page application - Prepare your tenant
+# Prepare your customer tenant to authenticate a vanilla JavaScript single-page application.
 
 This how-to guide demonstrates how to prepare your Azure Active Directory (Azure AD) for customers tenant for authentication. You'll register a single-page application (SPA) in the Microsoft Entra admin center, and record its identifiers. You'll then create a sign in and sign out user flow in the Microsoft Entra admin center and associate your SPA with the user flow.
 
 ## Prerequisites
 
 - Azure AD for customers tenant. If you don't already have one, <a href="https://aka.ms/ciam-free-trial?wt.mc_id=ciamcustomertenantfreetrial_linkclick_content_cnl" target="_blank">sign up for a free trial</a>.
-
 - If you have already registered a SPA in the Microsoft Entra admin center, and associated it with a user flow, you can skip the steps in this article and move to [Prepare a vanilla JavaScript single-page app for authentication](how-to-single-page-app-vanillajs-prepare-app.md).
 
 ## Register the SPA

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-sample-sign-in.md

@@ -4,25 +4,23 @@ description: Learn how to configure a sample JavaSCript single-page application
 services: active-directory
 author: OwenRichards1
 manager: CelesteDG
-
 ms.author: owenrichards
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
-ms.custom: developer
+ms.date: 05/25/2023
+
 
 #Customer intent: As a dev, devops, I want to learn about how to configure a sample vanilla JS SPA to sign in and sign out users with my Azure Active Directory (Azure AD) for customers tenant
 ---
 
 # Sign in users in a sample vanilla JavaScript single-page application
 
-This how-to guide uses a sample vanilla JavaScript single-page Application (SPA) to demonstrate how to add authentication to a SPA. This SPA enables users to sign in and sign out by using their own Azure Azure Active Directory (AD) for customers tenant. The sample uses the [Microsoft Authentication Library for JavaScript (MSAL.js)](https://github.com/AzureAD/microsoft-authentication-library-for-js) to handle authentication.
+This how-to guide uses a sample vanilla JavaScript single-page Application (SPA) to demonstrate how to add authentication to a SPA. The SPA enables users to sign in and sign out by using their own Azure Azure Active Directory (AD) for customers tenant. The sample uses the [Microsoft Authentication Library for JavaScript (MSAL.js)](https://github.com/AzureAD/microsoft-authentication-library-for-js) to handle authentication.
 
 ## Prerequisites
 
-* Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is used for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
+* Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is recommended for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
 * [Node.js](https://nodejs.org/en/download/).
 * Azure AD for customers tenant. If you don't already have one, <a href="https://aka.ms/ciam-free-trial?wt.mc_id=ciamcustomertenantfreetrial_linkclick_content_cnl" target="_blank">sign up for a free trial</a>.
 
@@ -103,4 +101,5 @@ If you choose to download the `.zip` file, extract the sample app file to a fold
 
 ## Next steps
 
-Learn how to use the Microsoft Authentication Library (MSAL) for JavaScript to sign in users and acquire tokens to call Microsoft Graph.
+> [!div class="nextstepaction"]
+> [Enable self-service password reset](./how-to-enable-password-reset-customers.md)

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-sign-in-sign-out.md

@@ -4,19 +4,17 @@ description: Learn how to configure a vanilla JavaScript single-page app (SPA) t
 services: active-directory
 author: OwenRichards1
 manager: CelesteDG
-
 ms.author: owenrichards
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
-ms.custom: developer
+ms.date: 05/25/2023
+
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure Active Directory (AD) for customers tenant.
 ---
 
-# Configure a Single-page application User Interface and Sign-In
+# Configure a single-page application user interface and sign-In
 
 When authorization has been configured, the user interface can be created to allow users to sign in and sign out when the project is run. To build the user interface (UI) for the application, [Bootstrap](https://getbootstrap.com/) is used to create a responsive UI that contains a **Sign-In** and **Sign-Out** button. Next, you'll run the project and test the sign-in and sign-out functionality.
 
@@ -26,10 +24,9 @@ When authorization has been configured, the user interface can be created to all
 
 ## Create the *index.html* file
 
-The main page of the application, *index.html*, is the first page that is loaded when the application is started. It's also the page that is loaded when the user selects the **Sign Out** button. 
+The main page of the application, *index.html*, is the first page that is loaded when the application is started. It's also the page that is loaded when the user selects the **Sign-Out** button. 
 
-1. In the *public* folder, create a new file named *index.html*. This file contains the HTML for the main page of the application.
-1. Open *index.html* and add the following code snippet:
+1. In the *public* folder, open *index.html* and add the following code snippet:
 
    ```html
     <!DOCTYPE html>
@@ -103,8 +100,7 @@ The main page of the application, *index.html*, is the first page that is loaded
 
 ## Create the *signout.html* file
 
-1. In the *public* folder, create a new file named *signout.html*. This file contains the HTML for the sign-out page of the application.
-1. Open *signout.html* and add the following code snippet:
+1. In the *public* folder, open *signout.html* and add the following code snippet:
 
     ```html
     <!DOCTYPE html>
@@ -132,8 +128,7 @@ The main page of the application, *index.html*, is the first page that is loaded
 
 ## Create the *ui.js* file
 
-1. In the *public* folder, create a new file named *ui.js*. This file contains the JavaScript code for the UI of the application.
-1. Open *ui.js* and add the following code snippet:
+1. In the *public* folder, open *ui.js* and add the following code snippet:
 
     ```javascript
     // Select DOM elements to work with
@@ -173,8 +168,7 @@ The main page of the application, *index.html*, is the first page that is loaded
 
 ## Create the styles.css file
 
-1. In the *public* folder, create a new file named *styles.css*. This file contains the CSS code for the UI of the application.
-1. Open *styles.css* and add the following code snippet:
+1. In the *public* folder, open *styles.css* and add the following code snippet:
 
     ```css
     .navbarStyle {
@@ -215,7 +209,9 @@ Now that all the required code snippets have been added, the application can be
 1. A window appears asking which account to sign out of.
 1. Upon successful sign out, a final window appears advising you to close all browser windows.
 
-## Next steps
+## See also
 
-> [!div class="nextstepaction"]
-> [Enable self-service password reset](./how-to-enable-password-reset-customers.md)
+- [Enable self-service password reset](./how-to-enable-password-reset-customers.md)
+- [Customize the default branding](how-to-customize-branding-customers.md)
+- [Configure sign-in with Google](how-to-google-federation-customers.md)
+- [Sign in users in your own ASP.NET web application by using an Azure AD for customers tenant](how-to-web-app-dotnet-sign-in-prepare-app.md)