outlook web addin

[dungtrandk]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

2.30.0

Wrapper Library

Not Applicable

Wrapper Library Version

none

Public or Confidential Client?

Public

Description

I am building an Outlook Web Addin in VS.

All the guides/articles that I have been following is generally saying that I need to create the msal PublicClientApplication, do the loginPopup and then get the token silently.

My problem is when i call the loginPopup, then a popup is showing but the login UI is not showing the login options (account, credentials) like many of the articles that i am following.

I have been watching this: https://www.youtube.com/watch?v=P3vkerr1nW8&t=2373s

And reading this: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md

When i navigate to office.com i am automatically signed in my windows work account. then i open the calendar and click new appointment. In the tab pane in the new appointment popup my addin button is showing. clicking this opens the addin to the right of the appointment popup. In this right pane the MessageRead.html is showing.
I have a button in MessageRead.html that starts all of the above. When i click it it starts the code snippets that i have attached this question.

in the loginpopup it shows:
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.

I tried changing the redirect uri to office.com, but then it just shows my my office.com mail.
And because the loginpopup is async then it never returns. so my code is stucked there.

And i have also added the redirect uris to the app registration in azure.

MSAL Configuration

const msalConfig = {
				auth: {
					clientId: '<my_client_id>',
					authority: 'https://login.microsoftonline.com/<my_tenant_id>',
					redirectUri: 'http://localhost:44382'
				},
				cache: {
					cacheLocation: 'localStorage',
					storeAuthStateInCookie: true
				},
			};

Relevant Code Snippets

this is how i initialize the msal object:
const myMSALObj = new msal.PublicClientApplication(msalConfig);
			await myMSALObj.initialize();

my login request object:
const loginRequest = {
				scopes: ["openid", "profile", "User.Read"]
			};

Here i try to loginpopup:
try {
				console.log('logging in...');
				const loginResponse = await myMSALObj.loginPopup(loginRequest);
				console.log('logged in');
			} catch (err) {
				console.log('login failed: ' + err);
			}

Identity Provider

Azure AD / MSA

Source

Internal (Microsoft)

[tnorling]

Please see this example for how to integrate with an office addin. You'll need to use the Office dialog API

[dungtrandk]

Hi, could you please point me to a specific file in the library to look in?
And i noticed that the files are .TS files. I am writing .JS, but i guess its similar, also with the functions available.

Thanks.

[tnorling]

• signInO365 function in office-apis-helpers.ts shows how to open the Office dialog
• login.ts shows what happens inside the Office dialog and how the response gets messaged back up to the caller

Those are the main pieces but I'd recommend pulling down the sample and playing around with it yourself to better understand it. To convert TypeScript to plain JavaScript just remove all the types.

[microsoft-github-policy-service]

@dungtrandk This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.