Skip to content

Commit c7eb596

Browse files
committed
update config files and readme
1 parent c3400e4 commit c7eb596

2 files changed

Lines changed: 13 additions & 11 deletions

File tree

2-Authorization/0-call-api-vanillajs/README.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ or download and extract the repository *.zip* file.
9494
npm install
9595
```
9696

97-
### Step 3: Register the sample application(s) in your tenant
97+
### Step 3: Register the sample applications in your tenant
9898

9999
There are two projects in this sample. Each needs to be separately registered in your external tenant. To register these projects, you can:
100100

@@ -157,7 +157,7 @@ Please refer to:
157157
##### Publish Delegated Permissions
158158
159159
1. All APIs must publish a minimum of one [scope](https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-auth-code-flow#request-an-authorization-code), also called [Delegated Permission](https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#permission-types), for the client apps to obtain an access token for a *user* successfully. To publish a scope, follow these steps:
160-
1. Select **Add a scope** button open the **Add a scope** screen and Enter the values as indicated below:
160+
1. Select **Add a scope** button open the **Add a scope** screen and enter the values as indicated below:
161161
1. For **Scope name**, use `ToDoList.Read`.
162162
1. For **Admin consent display name** type in *ToDoList.Read*.
163163
1. For **Admin consent description** type in *e.g. Allows the app to read the signed-in user's files.*.
@@ -179,6 +179,7 @@ Please refer to:
179179
1. For **Allowed member types**, choose **Application** to ensure other applications can be granted this permission.
180180
1. For **Value**, enter **ToDoList.Read.All**.
181181
1. For **Description**, enter *e.g. Allows the app to read the signed-in user's files.*.
182+
1. Check the box for **Do you want to enable this app role?**
182183
1. Select **Apply** to save your changes.
183184
1. Repeat the steps above for another app permission named **ToDoList.ReadWrite.All**
184185
@@ -198,9 +199,9 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi
198199
> In the steps below, "ClientID" is the same as "Application ID" or "AppId".
199200
200201
1. Open the `API\ToDoListAPI\appsettings.json` file.
201-
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ciam-msal-dotnet-api` app copied from the Microsoft Entra admin center.
202-
1. Find the key `Enter_the_Tenant_Id_Here` and replace the existing value with your external tenant/directory ID.
203202
1. Find the placeholder `Enter_the_Tenant_Subdomain_Here` and replace it with the Directory (tenant) subdomain. For instance, if your tenant primary domain is `contoso.onmicrosoft.com`, use `contoso`. If you don't have your tenant domain name, learn how to [read your tenant details](https://review.learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-create-customer-tenant-portal#get-the-customer-tenant-details).
203+
1. Find the key `Enter_the_Tenant_Id_Here` and replace the existing value with your external tenant/directory ID.
204+
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ciam-msal-dotnet-api` app copied from the Microsoft Entra admin center.
204205
205206
#### Register the client app (ciam-msal-javascript-spa)
206207
@@ -212,21 +213,19 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi
212213
1. Select **Register** to create the application.
213214
1. In the **Overview** blade, find and note the **Application (client) ID**. You use this value in your app's configuration file(s) later in your code.
214215
1. In the app's registration screen, select the **Authentication** blade to the left.
215-
1. If you don't have a platform added, select **Add a platform** and select the **Single-page application** option.
216-
1. In the **Redirect URI** section enter the following redirect URIs:
216+
1. Select **Authentication** and then **Add a URI**. Select the **Single-page application** option.
217+
1. In the **Redirect URI** section enter the following redirect URI:
217218
1. `http://localhost:3000`
218-
1. `http://localhost:3000/redirect`
219-
1. Select **Configure**
219+
1. Repeat for `http://localhost:3000/redirect`
220220
1. Select **Save** to save your changes.
221221
1. Since this app signs-in users, we will now proceed to select **delegated permissions**, which is is required by apps signing-in users.
222222
1. In the app's registration screen, select the **API permissions** blade in the left to open the page where we add access to the APIs that your application needs:
223223
1. Select the **Add a permission** button and then:
224224
1. Ensure that the **Microsoft APIs** tab is selected.
225225
1. In the *Commonly used Microsoft APIs* section, select **Microsoft Graph**
226226
1. In the **Delegated permissions** section, select **openid**, **offline_access** in the list. Use the search box if necessary.
227-
1. Select the **Add permissions** button at the bottom.
228227
1. Select the **Add a permission** button and then:
229-
1. Ensure that the **My APIs** tab is selected.
228+
1. Ensure that the **APIs my organization uses** tab is selected.
230229
1. In the list of APIs, select the API `ciam-msal-dotnet-api`.
231230
1. In the **Delegated permissions** section, select **ToDoList.Read**, **ToDoList.ReadWrite** in the list. Use the search box if necessary.
232231
1. Select the **Add permissions** button at the bottom.
@@ -240,7 +239,9 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi
240239
241240
1. Open the `SPA\public\authConfig.js` file.
242241
1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ciam-msal-javascript-spa` app copied from the Microsoft Entra admin center.
243-
1. Find the placeholder `Enter_the_Tenant_Subdomain_Here` and replace it with the Directory (tenant) subdomain. For instance, if your tenant primary domain is `contoso.onmicrosoft.com`, use `contoso`. If you don't have your tenant domain name, learn how to [read your tenant details](https://review.learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-create-customer-tenant-portal#get-the-customer-tenant-details).`Enter_the_Web_Api_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ciam-msal-dotnet-api` app copied from the Microsoft Entra admin center.
242+
1. Find the placeholder `Enter_the_Tenant_Subdomain_Here` and replace it with the Directory (tenant) subdomain. For instance, if your tenant primary domain is `contoso.onmicrosoft.com`, use `contoso`. If you don't have your tenant domain name, learn how to [read your tenant details](https://review.learn.microsoft.com/azure/active-directory/external-identities/customers/how-to-create-customer-tenant-portal#get-the-customer-tenant-details).
243+
1. Find the placeholder `Enter_The_Tenant_Id_Here` and replace the existing value with your external tenant/directory ID.
244+
1. `Enter_the_Web_Api_Application_Id_Here` and replace the existing value with the application ID (clientId) of `ciam-msal-dotnet-api` app copied from the Microsoft Entra admin center.
244245
245246
### Step 4: Running the sample
246247

2-Authorization/0-call-api-vanillajs/SPA/public/authConfig.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const msalConfig = {
99
authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant name
1010
redirectUri: '/', // You must register this URI on Microsoft Entra admin center/App Registration. Defaults to window.location.href e.g. http://localhost:3000/,
1111
postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
12+
authority: 'https://login.microsoftonline.com/Enter_Your_Tenant_Id_Here',
1213
},
1314
cache: {
1415
cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.

0 commit comments

Comments
 (0)