[Outlook](NAA) Sample showing how to pass user identity to network resource #924
Conversation
| - Set **Supported account types** to **Accounts in this organizational directory only**. | ||
| - Select **Register**. | ||
|
|
||
| 1. In the app's registration screen, select the **Expose an API** blade to the left to open the page where you can publish the permission as an API for which client applications can obtain access tokens for. The first thing that we need to do is to declare the unique resource URI that the clients will be using to obtain access tokens for this API. To declare an resource URI(Application ID URI), follow the following steps: |
There was a problem hiding this comment.
This was under a submenu for me.
| Open the sample project in Visual Studio Code to configure the code. In the steps below, "ClientID" is the same as "Application ID" or "AppId". | ||
|
|
||
| 1. Open the API/server-helpers/authConfig.js file. | ||
| 1. Find the key `Enter_API_Application_Id_Here` and replace the existing value with the application ID (clientId) of Contoso-Web-API-Server app copied from the Microsoft Entra admin center. |
There was a problem hiding this comment.
When did I go to the Microsoft Entra admin center and register something?
|
|
||
| All APIs must publish a minimum of one scope, also called Delegated Permission, for the client apps to obtain an access token for a user successfully. To publish a scope, follow these steps: | ||
|
|
||
| 1. Select **Add a scope** button open the **Add a scope** screen and Enter the values as indicated below: |
There was a problem hiding this comment.
This list and the next one have different numbering styles. Let's pick one to be consistent.
Also, consider making the "Repeat" step, Step 2. It'll make it more obvious that's an action, instead of informatino text.
Samples/auth/Outlook-Add-in-SSO-NAA-Identity/API/controllers/todolist.js
Outdated
Show resolved
Hide resolved
Samples/auth/Outlook-Add-in-SSO-NAA-Identity/API/server-helpers/validation-helper.js
Outdated
Show resolved
Hide resolved
Samples/auth/Outlook-Add-in-SSO-NAA-Identity/API/routes/index.js
Outdated
Show resolved
Hide resolved
Samples/auth/Outlook-Add-in-SSO-NAA-Identity/SPA/src/fallback/fallbackauthdialog.ts
Outdated
Show resolved
Hide resolved
Samples/auth/Outlook-Add-in-SSO-NAA-Identity/SPA/src/taskpane/taskpane.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Linda Cannon <[email protected]> Co-authored-by: Alex Jerabek <[email protected]>
Co-authored-by: Linda Cannon <[email protected]>
Co-authored-by: Linda Cannon <[email protected]>
Co-authored-by: Linda Cannon <[email protected]>
| 1. In the **Redirect URI** section, enter the following redirect URIs: | ||
| 1. `http://localhost:3000` | ||
| 1. `http://localhost:3000/redirect` | ||
| 1. `brk-multihub://localhost:3000` |
There was a problem hiding this comment.
How do you enter multiple redirects into this field?
There was a problem hiding this comment.
Okay, so the confusing part to me is that you enter one of these in the setup screen (as shown above), then add two additional URIs through a different interface (as in the screenshot below). The readme makes it seem like you can complete this in one fell swoop.
| 1. The Outlook add-in (SPA client) uses the MSAL.js library to obtain an access token from Microsoft Entra ID. The MSAL.js library returns an ID token, access token, and refresh token. | ||
| 1. The access token is passed in a web request to a protected web API service. The web request validates the access token and confirms the user has permissions to perform the action in the API. The access token contains any identity claims the web API needs. | ||
|
|
||
|  |
There was a problem hiding this comment.
|  | |
|  |
| 1. In the **Redirect URI** section, enter the following redirect URIs: | ||
| 1. `http://localhost:3000` | ||
| 1. `http://localhost:3000/redirect` | ||
| 1. `brk-multihub://localhost:3000` |
There was a problem hiding this comment.
Okay, so the confusing part to me is that you enter one of these in the setup screen (as shown above), then add two additional URIs through a different interface (as in the screenshot below). The readme makes it seem like you can complete this in one fell swoop.
|
|
||
| Your scopes should appear as shown in the following screenshot. | ||
|
|
||
|  |
There was a problem hiding this comment.
This screenshot should be under step 4, since the reader has already moved on from this pane in the app registrations.
|
|
||
| ```console | ||
| cd API | ||
| npm install |
There was a problem hiding this comment.
FYI, these install commands are already generating high vulnerability warnings.
| npm start | ||
| ``` | ||
|
|
||
| The following instructions assume you are sideloading in Outlook for Windows. To sideload on other platforms, see [Sideload Outlook add-ins for testing](https://learn.microsoft.com/office/dev/add-ins/outlook/sideload-outlook-add-ins-for-testing) |
There was a problem hiding this comment.
The following instructions don't talk about sideloading - they assume you've already sideloaded.
| - Set **Name** to `Contoso-Web-API-Server`. | ||
| - Set **Supported account types** to **Accounts in this organizational directory only**. | ||
| - Select **Register**. | ||
|
|
There was a problem hiding this comment.
The second time we register an application here, we are told to note the Application (client) ID. For this first application, we are told to grab the ID from the Microsoft Entra admin center when needed. I'd recommend avoiding sending people to the other admin center (unless that's what I'm messing up).
|
|
||
| 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. | ||
| 1. In the app's registration screen, select the **Authentication** blade on the left pane. | ||
| 1. If you don't have a platform added, select **Add a platform** and choose the **Single-page application** option. |
There was a problem hiding this comment.
Why would you have a platform added at this point in the sample?
| 1. In the task pane, enter a new task in the text box, and select **Add**. You can enter multiple tasks. | ||
| 1. Select **Get todo list** to get the task list. |
There was a problem hiding this comment.
Getting this error after signing in. FWIW, on the first write attempt, I didn't check "Consent on behalf of the organization" and haven't been reprompted to do so.
What's in this Pull Request?
Shows how to properly handle the identity token and claims in an Outlook task pane add-in (SPA). Replaces the old Exchange token pattern of sending id token to the server API. Instead you use the access token which contains the identity claims for the server to manage a todo database.