时间戳

首页 > 解决方案 > 无法进行身份验证：React 应用程序中的 Azure 身份验证

reactjs - 无法进行身份验证：React 应用程序中的 Azure 身份验证

问题描述

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

设置 Azure 并运行它后，我收到此错误：ClientConfigurationError: url_parse_error: URL could not be parsed into appropriate segments。给定错误：给定 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://docs.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"
};

标签： reactjsazureauthentication

解决方案

请尝试通过将值更改authority为：

https://login.microsoftonline.com/common

如果您想针对特定租户对用户进行身份验证，请指定tenant idorfully qualified tenant name而不是common. 就像是：

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

- OR -

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

有关更多详细信息，请参阅here（第二个要点，其中讨论了msalConfig部分的值）。

推荐阅读