You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To start your quickstart application, use either of the following options.
37
+
### Step 1: Register your application
38
38
39
-
### Option 1 (Express): Register and auto configure your app and then download your code sample
40
-
41
-
1. Go to the [Azure portal - App registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade/quickStartType/AngularSpaQuickstartPage/sourceType/docs) quickstart experience.
42
-
1. Enter a name for your application.
43
-
1. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**.
44
-
1. Select **Register**.
45
-
1. Go to the quickstart pane and follow the instructions to download and automatically configure your new application.
46
-
47
-
### Option 2 (Manual): Register and manually configure your application and code sample
1. Sign in to the [Azure portal](https://portal.azure.com/).
54
-
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 in which you want to register the application.
55
-
1. Search for and select **Azure Active Directory**.
56
-
Under **Manage**, select **App registrations** > **New registration**.
39
+
1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com) as at least an [Application Developer](../roles/permissions-reference.md#application-developer).
40
+
1. If access to multiple tenants is available, 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 in which you want to register the application.
41
+
1. Browse to **Identity** > **Applications** > **Application registrations**.
42
+
1. Select **New registration**.
57
43
1. When the **Register an application** page appears, enter a name for your application.
58
44
1. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**.
59
45
1. Select **Register**. On the app **Overview** page, note the **Application (client) ID** value for later use.
1. Under **Platform Configurations** expand **Single-page application**.
65
51
1. Confirm that under **Grant types** Your Redirect URI is eligible for the Authorization Code Flow with PKCE.
66
52
67
-
#### Step 2: Download the project
68
-
53
+
### Step 2: Download the project
69
54
70
55
To run the project with a web server by using Node.js, [download the core project files](https://github.com/Azure-Samples/ms-identity-javascript-react-spa/archive/main.zip).
71
56
72
-
####Step 3: Configure your JavaScript app
57
+
### Step 3: Configure your JavaScript app
73
58
74
59
In the *src* folder, open the *authConfig.js* file and update the `clientID`, `authority`, and `redirectUri` values in the `msalConfig` object.
75
60
@@ -95,17 +80,17 @@ Modify the values in the `msalConfig` section as described here:
95
80
96
81
- `Enter_the_Application_Id_Here` is the **Application (client) ID** for the application you registered.
97
82
98
-
To find the value of **Application (client) ID**, go to the app registration's **Overview** page in the Azure portal.
83
+
To find the value of **Application (client) ID**, go to the app registration's **Overview** page.
99
84
- `Enter_the_Cloud_Instance_Id_Here` is the instance of the Azure cloud. For the main or global Azure cloud, enter `https://login.microsoftonline.com`. For **national** clouds (for example, China), see [National clouds](authentication-national-cloud.md).
100
85
-`Enter_the_Tenant_info_here` is set to one of the following:
101
86
- If your application supports *accounts inthis organizational directory*, replace this value with the **Tenant ID** or **Tenant name**. For example, `contoso.microsoft.com`.
102
87
103
-
To find the value of the **Directory (tenant) ID**, go to the app registration's **Overview** page in the Azure portal.
88
+
To find the value of the **Directory (tenant) ID**, go to the app registration's **Overview** page.
104
89
- If your application supports *accounts in any organizational directory*, replace this value with `organizations`.
105
90
- If your application supports *accounts in any organizational directory and personal Microsoft accounts*, replace this value with `common`. **For this quickstart**, use `common`.
106
91
- To restrict support to *personal Microsoft accounts only*, replace this value with `consumers`.
107
92
108
-
To find the value of **Supported account types**, go to the app registration's **Overview** pagein the Azure portal.
93
+
To find the value of **Supported account types**, go to the app registration's **Overview** page.
109
94
-`Enter_the_Redirect_Uri_Here` is `http://localhost:3000/`.
110
95
111
96
The `authority` value in your *authConfig.js* should be similar to the following if you're using the main (global) Azure cloud:
@@ -125,7 +110,7 @@ Scroll down in the same file and update the `graphMeEndpoint`.
125
110
};
126
111
```
127
112
128
-
#### Step 4: Run the project
113
+
### Step 4: Run the project
129
114
130
115
Run the project with a web server by using Node.js:
0 commit comments