reactjs - 通过 Azure Function 和 auth0 进行存储帐户应用程序身份验证

Question

我刚刚开始使用 Azure 服务作为学生助理 - 我想要实现的是连接一个Azure 存储帐户，该帐户为服务>React 应用程序，带有 Function App，它不仅提供 API 功能，还提供auth0 作为从 React 应用程序访问的身份验证提供程序。

到目前为止，我拥有的是一个正在运行并已部署的 React 应用程序，一个包含 auth0 的已发布 API - 我已使用 a config file by following the Microsoft docs 以这种方式设置它。这样当用户访问它时，他们会收到 auth0 登录屏幕的提示。然而，这只有在发布时才有效，在本地没有任何作用。

现在我尝试使用 auth0-react 库中的 Auth0Provider 从本地 React 应用程序访问已发布的 API 链接:

<Auth0Provider
        domain="domain"
        clientId="clientid"
        redirectUri="https://api.azurewebsites.net/.auth/login/auth0/callback">
    <Login />
</Auth0Provider>

登录包含:

const { loginWithRedirect, user, logout } = useAuth0()

    return (
        <>
            <Button onClick={() => loginWithRedirect()}>Log In</Button>
            <Button onClick={() => logout()}>Log Out</Button>
        </>
    )

然而，在登录时，尽管输入被重定向到 https://api.azurewebsites.net/.auth/login/auth0/callback 的回调，但系统会提示 auth0 屏幕。而不是我在 auth0 仪表板上的应用程序设置中提供的那个，例如http://localhost:8000/.auth/login/auth0/callback。这给我带来了 500 HTTP 错误。我想要的是登录并能够获取 the Client Principal like presented in the Microsoft docs 。因此，通过这种方式，我想我希望用户授权由在幕后工作的 Azure 和 auth0 来管理。

经过那段令人费解的旅程后，我的问题是如何将用户重定向到 localhost:8000(这是否可行？)以及登录流程是否现实？如果是的话，如果有人能给我一些关于如何实现这一目标的想法，那就太好了。

Answer 1

Auth0 允许我们快速对 React 应用程序进行身份验证并访问用户个人资料信息。

回调 URL 是应用程序中的 URL，Auth0 在用户通过身份验证后重定向用户。您的应用程序的回调 URL 必须添加到应用程序设置中的允许的回调 URL 字段中。如果未设置此字段，用户将无法登录应用程序并会收到错误消息。

根据您的情况，您应该将允许的回调 URL 设置为 http://localhost:8000。

您可以查看这个example了解更多信息。

由于您通过调用loginWithRedirect 来启动登录。成功验证后，用户将被重定向回 Auth0Provider 中提供的 redirectUri。这就是为什么您被重定向到回调:

https://api.azurewebsites.net/.auth/login/auth0/callback。

您必须更改它才能获得您想要的结果。检查这个Auth0 document了解更多信息，其中解释了 Auth0Provider 的每个组件。