从 React 到 Flask API 的 Azure AD 不记名令牌

Question

我已经设置了我的项目，即我在 React 中创建了一个前端，在 Flask 中创建了一个后端。

在我的前端，我使用带有以下代码的 post 方法调用我的后端：

function POST(path, data) {
    return fetch(`${fetchUrl}${path}`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + RequestAccessToken(),

            },
            body: JSON.stringify(data)
        }
    )
}

其中RequestTokenAccess() ：

const { instance, accounts, inProgress } = useMsal();
const [accessToken, setAccessToken] = useState(null);

const name = accounts[0] && accounts[0].name;

function RequestAccessToken() {
        const request = {
                ...loginRequest,
                account: accounts[0]
        };

        instance.acquireTokenSilent(request).then((response) => {
                setAccessToken(response.accessToken);
        }).catch((e) => {
                instance.acquireTokenPopup(request).then((response) => {
                        setAccessToken(response.accessToken);
                });
        });
}

然后只需执行以下操作即可实际调用后端：

const [data, setData] = useState()

function fetchData(e) {
    e?.preventDefault();
    POST('/my_app', { data: data }).then(
        async (response) => {
            const json = await response.json()
            setData(json.return_data)

        }
    )
}

所以对于前端来说，一切正常。 我可以获得一个授权给我的 MS 登录，这样我就可以实际设置前端，我还可以从RequestAccessToken函数中获取一个令牌，该令牌作为后端调用的标头提供。 所以一切似乎都设置在前端部分。 但是，后端调用也需要安全是我的猜测，但我不确定它是如何工作的。

基本上我的app.py文件看起来像：

from flask import Flask, request, jsonify
from my_app_func import MyAppFunc

app = Flask(__name__)


@app.post("/api/my_app")
def my_app():        
    data = request.json.get("data")

    return_data = MyAppFunction(data)

    return return_data

所以基本上，为了安全的后端调用，我需要什么？ 我在通话后将令牌作为不记名令牌。 但下一步是什么？ 我实际上用它做什么？

Answer 1

您必须在门户网站 azure 上注册另一个应用程序，并授予 api 权限并在门户网站 azure 的另一个应用程序中进行配置。 尝试在那个空间做点什么。

Answer 2

我也有同样的问题，但找不到答案。 以下是对我有用的：
如果您想从烧瓶中验证用户，您可以将令牌与您的请求一起从 react 发送。
然后在烧瓶中，通过向 microsoft graph api 发出请求来验证用户。
这是一个如何执行此操作的示例：
https://github.com/Azure-Samples/ms-identity-python-flask-webapp-call-graph
另一个问题是为什么可以直接将 RequestAccessToken() 连接为字符串？ 不是只调用setAccessToken吗？ 我问是因为在我的反应应用程序中，我不知道如何导出令牌以便其他功能可以使用它。 我最终使用了 MSAL.js v2，而不是用于反应的那个。