AADSTS900561 MSAL 浏览器中的错误：端点仅接受 POST 和 OPTIONS 请求，而不接受 GET – 无法检索令牌

Question

我正在尝试使用 MSAL-Browser 在 React 中获取令牌。使用以下代码，在到达“await this.publicClientApplication.loginPopup”时遇到以下错误：“AADSTS900561：端点仅接受 POST、OPTIONS 请求。收到 GET 请求。”不幸的是，我找不到有关此特定问题的更多信息。

我的问题是我无法收到请求令牌的响应。要请求令牌，我需要“代码”等。有谁知道可能导致此问题的原因是什么？

我还尝试设置 HTTP 服务器来处理来自 MSAL 的响应。但是，一旦我登录，URL“http://localhost:65192/#code=long_code_text_here&client_info=long_client_id_here&session_state=some_session_state_here&”就被发送到HTTP服务器，并且带有“#”字符，没有收到任何内容。这甚至使我无法处理“代码”。如代码中所示，我已将“response_mode”设置为“query”以使用“?”而不是“#”，但对于 MSAL-Browser，或者特别是对于 loginPopup 和 loginRedirect，“response_mode =fragment”似乎是静态的。有什么想法吗？

编辑：我无权访问 Azure AD，但我已经有一个在我的计算机上本地运行的 Python 解决方案来获取令牌。

import React, { Component } from 'react';
import './App.css';
import SelectionManager from "./SelectionManager";
import {config} from "./Config";
import {PublicClientApplication} from "@azure/msal-browser";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isAuthenticated: false,
            user: {},
        };
        this.login = this.login.bind(this);
        // Initialize the MSAL application object
        this.publicClientApplication = new PublicClientApplication({
            auth: {
                clientId: config.clientId,
                redirectUri: config.redirectUri,
                authority: config.authority,
                response_type: config.response_type,
                response_mode: "query"
            },
            cache: {
                cacheLocation: "sessionStorage",
                storeAuthStateInCookie: false
            }
        });

        this.publicClientApplication.initialize();
        console.log("initialized");
    }

    async login() {
        console.log("logging in");
        try {
            console.log("try to open popup");

            const response = await this.publicClientApplication.loginPopup({
                scopes: config.scopes,
                prompt: "select_account"
            });

            console.log("popup may have been opened");
            this.setState({ isAuthenticated: true });
        }
        catch (err) {
            this.setState({
                isAuthenticated: false,
                user: {},
                error: err
            });
        }
    }

    render() {
        return (
            <div className="App">
                {this.state.isAuthenticated ? <p>
                <SelectionManager/>
                </p>:
                    <p>
                        <button onClick={() => this.login()}> Login</button>
                    </p>
                }
            </div>
        );
    }
}

export default App;

Answer 1

您已将

response_mode

设置为“查询”。这是使用

response_type

“代码”的正确设置。但是，

loginPopup

方法不支持“查询”响应模式。

使用

acquireTokenPopup

方法而不是

loginPopup

方法。

acquireTokenPopup

方法支持“查询”和“片段”响应模式。

这是我尝试过的代码：

    // src/AuthButton.js
  
    import  React, { useEffect, useState } from  "react";
    import { PublicClientApplication } from  "@azure/msal-browser";
    import  msalConfig  from  "./msalConfig";
    
    const  AuthButton  = () => {
    const [publicClientApplication, setPublicClientApplication] =  useState(null);
    useEffect(() => {
    const  initializeMsal  =  async () => {
    const  pca  =  new  PublicClientApplication(msalConfig);
    await  pca.initialize();
    setPublicClientApplication(pca); 
    }; 
    initializeMsal();   
    }, []);
    

    const  handleLogin  =  async () => {
    try {
    const  loginRequest  = {
    scopes: ["openid", "profile", "user.read"],
    };
    const  loginResponse  =  await  publicClientApplication.acquireTokenPopup(loginRequest);
    console.log("Access token:", loginResponse.accessToken); 
    } 
    catch (error) {
    console.error("Authentication error:", error);
    }   
    };
    
    return (  
    <div>
    <button  onClick={handleLogin}>Login</button>
    </div>
    );
    };

    export  default  AuthButton;

结果