reactjs - How to avoid MSAL Popup for Account Selection in Outlook Add-in with React - Stack Overflow

admin管理员组

文章数量:1122846

I'm working on an Outlook Add-in developed using React, and I've integrated MSAL React for authentication. However, I'm encountering an issue where a popup appears prompting the user to select their account when logging in.

Since the solution is already running inside Outlook, I want to avoid this popup and have the user seamlessly authenticated without needing to select their account. How can I achieve this?

Here’s the code I’m using for MSAL:`

import { PublicClientApplication } from '@azure/msal-browser';
public async getGraphToken(mode: string): Promise<string> {
        return new Promise(async (resolve, reject) => {
            try {
                // Initialize MSAL PublicClientApplication
                pca = new PublicClientApplication({
                    auth: {
                        clientId: Constants.AppRegistrationClientId,
                        authority: `/${Constants.TenantId}/oauth2/v2.0/authorize`,
                        redirectUri: `${window.location.origin}/login/login.html`
                    },
                    cache: {
                        cacheLocation: 'localStorage'
                    }
                });
                await pca.initialize();
               
                 const accounts = pca.getAllAccounts();
                if (accounts.length === 0) {
                    throw new Error("No account found. Please sign in.");
                }
                const account = accounts[0];
                let request;
                if (mode === "graph") {
                    request = {
                        scopes: ['user.read', 'Mail.Send', 'Sites.ReadWrite.All'],
                        account: account
                    };
                }
                else if (mode === "sp") {
                    request = {
                        scopes: [`${Constants.TenantUrl}/.default`],
                        account: account
                    }
                }
                else if (mode === "functionApp") {
                    request = {
                        scopes: Constants.FunctionAppScopes,
                        account: account
                    };
                }
                const response = await pca.acquireTokenSilent(request);
                resolve(response.accessToken);

            } catch (error) {
                console.error("Error acquiring token silently", error);
                try {
                    const interactiveResponse = await pca.acquireTokenPopup({
                        scopes: ['user.read', 'Sites.Read.All'],
                    });
                    resolve(interactiveResponse.accessToken);
                } catch (interactiveError) {
                    reject(interactiveError);
                }
            }
        });
    }`

本文标签： reactjsHow to avoid MSAL Popup for Account Selection in Outlook Addin with ReactStack Overflow