0

我一直在尝试遵循本教程... 从 React SPA 登录用户 ,但我无法让它工作。我有一个个人 azure 帐户,并在 Azure Active Directory 中创建了一个 SPA 应用程序来获取客户端 ID。从我读过的所有内容来看,我应该使用https://login.microsoftonline.com/{tenant-id-here}作为我的权限,但是当我这样做时,我得到了错误......

ClientConfigurationError:untrusted_authority:提供的权限不是受信任的权限

我尝试在配置中添加 knownAuthorities 参数,但我认为我不应该这样做,因为我只关心单个租户。当我添加 knownAuthorities 参数时,错误变为......

ClientAuthError:openid_config_error:无法检索端点。

我的配置文件看起来像这样

export const msalConfig = {
    auth: {
        clientId: '{client id from Azure AD Application}',
        authority: 'https://login.microsoftonline.com/{tenant-id}',
        redirectUri: 'http://localhost:3000',
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false
    }
}

导致错误的登录按钮如下所示...

function handleLogin(instance) {
    instance.loginPopup(loginRequest).catch(e => {
        console.error(e);
    })
}

function SignInButton() {
    const {instance} = useMsal();

    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogin(instance)}>
            Sign in
        </Button>
    )
}

我可能会在 azure 设置中遗漏一些东西吗?还是反应应用程序本身中的其他东西?

更新:16/02/22

好吧,我现在已经开始工作了。我不小心在标签内呈现了登录按钮<a>,这一定是阻止了 Microsoft 登录弹出窗口的加载。可能试图重定向某个地方,这阻止了 MSAL 进程完成。不是最有用的错误消息。

因此,要确认,对于单租户解决方案,您只需要clientIdauthority. 而权威绝对是https://login.microsoftonline.com/{your-tenant-id}

4

1 回答 1

0

我看了一下Github,设置有点不同。尝试使用“https://login.microsoftonline.com/common”作为权限:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        authority: "https://login.microsoftonline.com/common",
        knownAuthorities: [],
        cloudDiscoveryMetadata: "",
        redirectUri: "enter_redirect_uri_here",
        postLogoutRedirectUri: "enter_postlogout_uri_here",
        navigateToLoginRequestUrl: true,
        clientCapabilities: ["CP1"]
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false,
        secureCookies: false
    },
    system: {
        loggerOptions: {
            loggerCallback: (level: LogLevel, message: string, containsPii: boolean): void => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
            piiLoggingEnabled: false
        },
        windowHashTimeout: 60000,
        iframeHashTimeout: 6000,
        loadFrameTimeout: 0,
        asyncPopups: false
    };
}

const msalInstance = new PublicClientApplication(msalConfig);

来源:https ://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md

于 2022-02-15T17:50:53.353 回答