Skip to content

Commit

Permalink
Merge pull request #170 from Azure-Samples/dayodeji/second-entra-rebrand
Browse files Browse the repository at this point in the history
Entra Rebrand 2
  • Loading branch information
DidunAyodeji authored Jun 14, 2024
2 parents cc9e5ff + 5f7b88c commit 89beb80
Show file tree
Hide file tree
Showing 11 changed files with 126 additions and 126 deletions.
8 changes: 4 additions & 4 deletions .github/ISSUE_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
<!-- mark with an `x` -->

```console
- [ ] 1-1) Sign-in with Azure AD
- [ ] 1-2) Sign-in with Azure AD B2C
- [ ] 1-1) Sign-in with Microsoft Entra ID
- [ ] 1-2) Sign-in with Azure Active Directory B2C
- [ ] 2-1) Acquire a Token and call Microsoft Graph
- [ ] 3-1) Protect and call a web API on Azure AD
- [ ] 3-2) Protect and call a web API on Azure AD B2C
- [ ] 3-1) Protect and call a web API on Microsoft Entra ID
- [ ] 3-2) Protect and call a web API on Azure Active Directory B2C
- [ ] 4-1) Call a web API that calls Microsoft Graph on-behalf-of user
- [ ] 4-2) Call a web API that calls another web API on-behalf-of user
- [ ] 5) Deploy to Azure Storage and App Service
Expand Down
2 changes: 1 addition & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,4 @@ ex: verify that the following are valid:
* ...

## Other Information
<!-- Add any other helpful information that may be needed here. -->
<!-- Add any other helpful information that may be needed here. -->
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -Force
```

1. Run the script to create your Azure AD application and configure the code of the sample application accordingly.
1. Run the script to create your Microsoft Entra application and configure the code of the sample application accordingly.

```PowerShell
cd .\AppCreationScripts\
Expand All @@ -35,23 +35,23 @@

### Presentation of the scripts

This sample comes with two PowerShell scripts, which automate the creation of the Azure Active Directory applications, and the configuration of the code for this sample. Once you run them, you will only need to build the solution and you are good to test.
This sample comes with two PowerShell scripts, which automate the creation of the Microsoft Entra applications, and the configuration of the code for this sample. Once you run them, you will only need to build the solution and you are good to test.

These scripts are:

- `Configure.ps1` which:
- creates Azure AD applications and their related objects (permissions, dependencies, secrets, app roles),
- creates Microsoft Entra applications and their related objects (permissions, dependencies, secrets, app roles),
- changes the configuration files in the sample projects.
- creates a summary file named `createdApps.html` in the folder from which you ran the script, and containing, for each Azure AD application it created:
- creates a summary file named `createdApps.html` in the folder from which you ran the script, and containing, for each Microsoft Entra application it created:
- the identifier of the application
- the AppId of the application
- the url of its registration in the [Azure portal](https://portal.azure.com).
- the url of its registration in the [Microsoft Entra admin center](https://entra.microsoft.com).

- `Cleanup.ps1` which cleans-up the Azure AD objects created by `Configure.ps1`. Note that this script does not revert the changes done in the configuration files, though. You will need to undo the change from source control (from Visual Studio, or from the command line using, for instance, `git reset`).
- `Cleanup.ps1` which cleans-up the Microsoft Entra objects created by `Configure.ps1`. Note that this script does not revert the changes done in the configuration files, though. You will need to undo the change from source control (from Visual Studio, or from the command line using, for instance, `git reset`).

### Usage pattern for tests and DevOps scenarios

The `Configure.ps1` will stop if it tries to create an Azure AD application which already exists in the tenant. For this, if you are using the script to try/test the sample, or in DevOps scenarios, you might want to run `Cleanup.ps1` just before `Configure.ps1`. This is what is shown in the steps below.
The `Configure.ps1` will stop if it tries to create a Microsoft Entra application which already exists in the tenant. For this, if you are using the script to try/test the sample, or in DevOps scenarios, you might want to run `Cleanup.ps1` just before `Configure.ps1`. This is what is shown in the steps below.

## How to use the app creation scripts?

Expand Down Expand Up @@ -118,8 +118,8 @@ Note that the script will choose the tenant in which to create the applications,
if you want to create the apps in a particular tenant, you can use the following option:
- Open the [Azure portal](https://portal.azure.com)
- Select the Azure Active directory you are interested in (in the combo-box below your name on the top right of the browser window)
- Open the [Microsoft Entra admin center](https://entra.microsoft.com)
- Select the Microsoft Entra ID you are interested in (in the combo-box below your name on the top right of the browser window)
- Find the "Active Directory" object in this tenant
- Go to **Properties** and copy the content of the **Directory Id** property
- Then use the full syntax to run the scripts:
Expand Down
56 changes: 28 additions & 28 deletions 1-Authentication/1-sign-in/README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
page_type: sample
name: Vanilla JavaScript single-page application using MSAL.js to authenticate users with Azure Active Directory
description: Vanilla JavaScript single-page application using MSAL.js to authenticate users with Azure Active Directory
name: Vanilla JavaScript single-page application using MSAL.js to authenticate users with Microsoft Entra ID
description: Vanilla JavaScript single-page application using MSAL.js to authenticate users with Microsoft Entra ID
languages:
- javascript
products:
- azure-active-directory
- microsoft-entra-id
- msal-js
- msal-browser
urlFragment: ms-identity-javascript-tutorial
extensions:
- services: ms-identity
- platform: JavaScript
- endpoint: AAD v2.0
- endpoint: Microsoft identity platform
- level: 100
- client: Vanilla JavaScript SPA
---

# Vanilla JavaScript single-page application using MSAL.js to authenticate users with Azure Active Directory
# Vanilla JavaScript single-page application using MSAL.js to authenticate users with Microsoft Entra ID

* [Overview](#overview)
* [Scenario](#scenario)
Expand All @@ -33,11 +33,11 @@ extensions:

## Overview

This sample demonstrates a Vanilla JavaScript single-page application (SPA) that lets users sign-in to [Azure Active Directory](https://docs.microsoft.com/azure/active-directory/fundamentals/active-directory-whatis) (Azure AD) using the [Microsoft Authentication Library for JavaScript](https://github.com/AzureAD/microsoft-authentication-library-for-js) (MSAL.js). In doing so, it also illustrates various authentication concepts, such as [ID Tokens](https://docs.microsoft.com/azure/active-directory/develop/id-tokens), [OIDC scopes](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes), [single-sign on](https://docs.microsoft.com/azure/active-directory/develop/msal-js-sso), **account selection**, **silent requests** and more.
This sample demonstrates a Vanilla JavaScript single-page application (SPA) that lets users sign-in to [Microsoft Entra ID](https://docs.microsoft.com/azure/active-directory/fundamentals/active-directory-whatis) (Microsoft Entra ID) using the [Microsoft Authentication Library for JavaScript](https://github.com/AzureAD/microsoft-authentication-library-for-js) (MSAL.js). In doing so, it also illustrates various authentication concepts, such as [ID Tokens](https://docs.microsoft.com/azure/active-directory/develop/id-tokens), [OIDC scopes](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes), [single-sign on](https://docs.microsoft.com/azure/active-directory/develop/msal-js-sso), **account selection**, **silent requests** and more.

## Scenario

1. The client application uses **MSAL.js** to sign-in a user and obtain an **ID Token** from **Azure AD**.
1. The client application uses **MSAL.js** to sign-in a user and obtain an **ID Token** from **Microsoft Entra ID**.
2. The **ID Token** proves that the user has successfully signed-in with their organization's tenant.

![Overview](./ReadmeFiles/topology_signin.png)
Expand All @@ -59,10 +59,10 @@ This sample demonstrates a Vanilla JavaScript single-page application (SPA) that
* [Visual Studio Code](https://code.visualstudio.com/download) is recommended for running and editing this sample.
* [VS Code Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) extension is recommended for interacting with Azure through VS Code Interface.
* A modern web browser.
* An **Azure AD** tenant. For more information, see: [How to get an Azure AD tenant](https://docs.microsoft.com/azure/active-directory/develop/test-setup-environment#get-a-test-tenant)
* A user account in your **Azure AD** tenant.
* An **Microsoft Entra ID** tenant. For more information, see: [How to get a Microsoft Entra tenant](https://docs.microsoft.com/azure/active-directory/develop/test-setup-environment#get-a-test-tenant)
* A user account in your **Microsoft Entra ID** tenant.

>This sample will not work with a **personal Microsoft account**. If you're signed in to the [Azure portal](https://portal.azure.com) with a personal Microsoft account and have not created a user account in your directory before, you will need to create one before proceeding.
>This sample will not work with a **personal Microsoft account**. If you're signed in to the [Microsoft Entra admin center](https://entra.microsoft.com) with a personal Microsoft account and have not created a user account in your directory before, you will need to create one before proceeding.
## Setup the sample

Expand Down Expand Up @@ -91,7 +91,7 @@ There is one project in this sample. To register it, you can:

* follow the steps below for manually register your apps
* or use PowerShell scripts that:
* **automatically** creates the Azure AD applications and related objects (passwords, permissions, dependencies) for you.
* **automatically** creates the Microsoft Entra applications and related objects (passwords, permissions, dependencies) for you.
* modify the projects' configuration files.

<details>
Expand All @@ -106,7 +106,7 @@ There is one project in this sample. To register it, you can:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -Force
```
1. Run the script to create your Azure AD application and configure the code of the sample application accordingly.
1. Run the script to create your Microsoft Entra application and configure the code of the sample application accordingly.
1. For interactive process -in PowerShell, run:
```PowerShell
Expand All @@ -118,16 +118,16 @@ There is one project in this sample. To register it, you can:
</details>
#### Choose the Azure AD tenant where you want to create your applications
#### Choose the Microsoft Entra tenant where you want to create your applications
To manually register the apps, as a first step you'll need to:
1. Sign in to the [Azure portal](https://portal.azure.com).
1. If your account is present in more than one Azure AD tenant, select your profile at the top right corner in the menu on top of the page, and then **switch directory** to change your portal session to the desired Azure AD tenant.
1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com).
1. If your account is present in more than one Microsoft Entra tenant, select your profile at the top right corner in the menu on top of the page, and then **switch directory** to change your portal session to the desired Microsoft Entra tenant.
#### Register the client app (ms-identity-javascript-c1s1)
1. Navigate to the [Azure portal](https://portal.azure.com) and select the **Azure Active Directory** service.
1. Navigate to the [Microsoft Entra admin center](https://entra.microsoft.com) and select the **Microsoft Entra ID** service.
1. Select the **App Registrations** blade on the left, then select **New registration**.
1. In the **Register an application page** that appears, enter your application's registration information:
1. In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example `ms-identity-javascript-c1s1`.
Expand Down Expand Up @@ -157,8 +157,8 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi
> In the steps below, "ClientID" is the same as "Application ID" or "AppId".
1. Open the `App\authConfig.js` file.
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ms-identity-javascript-c1s1` app copied from the Azure portal.
1. Find the key `Enter_the_Tenant_Info_Here` and replace the existing value with your Azure AD tenant/directory ID.
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ms-identity-javascript-c1s1` app copied from the Microsoft Entra admin center.
1. Find the key `Enter_the_Tenant_Info_Here` and replace the existing value with your Microsoft Entra tenant/directory ID.
### Step 4: Running the sample
Expand Down Expand Up @@ -271,7 +271,7 @@ const msalConfig = {
For more information about audiences and account types, please see: [Validation differences by supported account types (signInAudience)](https://docs.microsoft.com/azure/active-directory/develop/supported-accounts-validation)
> :warning: Be aware that making an application multi-tenant entails more than just modifying the `authority` string. For more information, please see [How to: Sign in any Azure Active Directory user using the multi-tenant application pattern](https://docs.microsoft.com/azure/active-directory/develop/howto-convert-app-to-be-multi-tenant).
> :warning: Be aware that making an application multi-tenant entails more than just modifying the `authority` string. For more information, please see [How to: Sign in any Microsoft Entra ID user using the multi-tenant application pattern](https://docs.microsoft.com/azure/active-directory/develop/howto-convert-app-to-be-multi-tenant).
### Authentication in National Clouds
Expand All @@ -281,10 +281,10 @@ National clouds (aka Sovereign clouds) are physically isolated instances of Azur
* use a specific authority, depending on the cloud in the configuration file for your application.
* in case you want to call the MS Graph, this requires a specific Graph endpoint URL, depending on the cloud.
For instance, to configure this sample for **Azure AD Germany** national cloud:
For instance, to configure this sample for **Microsoft Entra ID Germany** national cloud:
1. Open the `App\authConfig.js` file.
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of the `ms-identity-javascript-tutorial-c1s1` application copied from the Azure portal.
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of the `ms-identity-javascript-tutorial-c1s1` application copied from the Microsoft Entra admin center.
1. Find the key `Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here` and replace the existing value with `https://portal.microsoftazure.de/<your-tenant-id>`.
1. Find the key `Enter_the_Redirect_Uri_Here` and replace the existing value with the base address of the `ms-identity-javascript-tutorial-c1s1` application (by default `http://localhost:3000`).

Expand All @@ -295,7 +295,7 @@ See [National Clouds](https://docs.microsoft.com/azure/active-directory/develop/
Learn how to:

* [Vanilla JavaScript single-page application using MSAL.js to authorize users for calling Microsoft Graph](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/tree/main/2-Authorization-I/1-call-graph)
* [Vanilla JavaScript single-page application (SPA) using MSAL.js to authorize users for calling a protected web API on Azure AD](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/tree/main/3-Authorization-II/1-call-api)
* [Vanilla JavaScript single-page application (SPA) using MSAL.js to authorize users for calling a protected web API on Microsoft Entra ID](https://github.com/Azure-Samples/ms-identity-javascript-tutorial/tree/main/3-Authorization-II/1-call-api)

## Contributing

Expand All @@ -305,15 +305,15 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
## Learn More
* [Microsoft identity platform (Azure Active Directory for developers)](https://docs.microsoft.com/azure/active-directory/develop/)
* [Azure AD code samples](https://docs.microsoft.com/azure/active-directory/develop/sample-v2-code)
* [Microsoft identity platform (Microsoft Entra ID for developers)](https://docs.microsoft.com/azure/active-directory/develop/)
* [Microsoft Entra ID code samples](https://docs.microsoft.com/azure/active-directory/develop/sample-v2-code)
* [Overview of Microsoft Authentication Library (MSAL)](https://docs.microsoft.com/azure/active-directory/develop/msal-overview)
* [Register an application with the Microsoft identity platform](https://docs.microsoft.com/azure/active-directory/develop/quickstart-register-app)
* [Configure a client application to access web APIs](https://docs.microsoft.com/azure/active-directory/develop/quickstart-configure-app-access-web-apis)
* [Understanding Azure AD application consent experiences](https://docs.microsoft.com/azure/active-directory/develop/application-consent-experience)
* [Understanding Microsoft Entra application consent experiences](https://docs.microsoft.com/azure/active-directory/develop/application-consent-experience)
* [Understand user and admin consent](https://docs.microsoft.com/azure/active-directory/develop/howto-convert-app-to-be-multi-tenant#understand-user-and-admin-consent)
* [Application and service principal objects in Azure Active Directory](https://docs.microsoft.com/azure/active-directory/develop/app-objects-and-service-principals)
* [Authentication Scenarios for Azure AD](https://docs.microsoft.com/azure/active-directory/develop/authentication-flows-app-scenarios)
* [Application and service principal objects in Microsoft Entra ID](https://docs.microsoft.com/azure/active-directory/develop/app-objects-and-service-principals)
* [Authentication Scenarios for Microsoft Entra ID](https://docs.microsoft.com/azure/active-directory/develop/authentication-flows-app-scenarios)
* [Building Zero Trust ready apps](https://aka.ms/ztdevsession)
* [National Clouds](https://docs.microsoft.com/azure/active-directory/develop/authentication-national-cloud#app-registration-endpoints)
* [Initialize client applications using MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-initializing-client-applications)
Expand All @@ -322,4 +322,4 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
* [Logging in MSAL.js applications](https://docs.microsoft.com/azure/active-directory/develop/msal-logging?tabs=javascript)
* [Pass custom state in authentication requests using MSAL.js](https://docs.microsoft.com/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request)
* [Prompt behavior in MSAL.js interactive requests](https://docs.microsoft.com/azure/active-directory/develop/msal-js-prompt-behavior)
* [Use MSAL.js to work with Azure AD B2C](https://docs.microsoft.com/azure/active-directory/develop/msal-b2c-overview)
* [Use MSAL.js to work with Azure Active Directory B2C](https://docs.microsoft.com/azure/active-directory/develop/msal-b2c-overview)
Loading

0 comments on commit 89beb80

Please sign in to comment.