reactjs - 无法验证 : Azure authentication in React app

Question

我正在尝试按照本教程从 React 应用程序设置 Azure 身份验证: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react

设置 Azure 并运行它后，出现以下错误:ClientConfigurationError: url_parse_error: URL 无法解析为适当的段。给定错误:给定 url 字符串:common/

下面是配置文件“authConfig.js”。我不知道我做错了什么，因为我是第一次这样做，而且我不理解错误消息，除了我尝试过的更改之外，我也没有在文档中找到任何相关内容权限字符串。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */
export const msalConfig = {
    auth: {
        clientId: "912fcdde-6306-4397-96ec-d7e24418d206",
        // authority: "bde20525-a858-4726-a4c7-48bd8239499f",
        // authority: "emtechdemo07052021.onmicrosoft.com",
        authority: "common",
        redirectUri: "http://localhost:3000"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {   
        loggerOptions: {    
            loggerCallback: (level, message, containsPii) => {  
                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;     
                }   
            }   
        }   
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com"
};

Answer 1

请尝试将authority的值更改为:

https://login.microsoftonline.com/common

如果您想针对特定租户对用户进行身份验证，请指定租户 ID 或完全限定的租户名称，而不是common。像这样的东西:

https://login.microsoftonline.com/bde20525-a858-4726-a4c7-48bd8239499f

- OR -

https://login.microsoftonline.com/emtechdemo07052021.onmicrosoft.com

更多详情请参见here (第二个要点讨论了 msalConfig 部分的值)。