reactjs - Auth0 对令牌请求返回 401。Auth0 日志显示登录成功

Question

我正在将教程中的 auth0 集成到我自己的应用程序中，并且遇到了一些身份验证问题，这些问题反映在 auth0 日志中。

这发生在点击我的反应登录按钮时：

登录.js

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import '../components/App.css'


const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button class="btn btn-primary" onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;

但是，在 Auth0 应用程序日志中，我看到我已成功通过身份验证，并且我还得到了一个Failed Exchange,Successful Login和一个Warning During Login.

固定日志：Warning During Login

这是日志的文本Warning During Login：

您正在使用仅用于开发和测试的 Auth0 开发密钥。此连接 (google-oauth2) 应使用您自己的开发密钥进行配置，以使同意页面能够显示您的徽标而不是 Auth0，并为此连接启用 SSO。不建议将 AUTH0 开发密钥用于生产环境。要了解有关开发密钥的更多信息，请参阅 https://auth0.com/docs/connections/social/devkeys。

已按照 Auth0 网站上的这些说明解决此问题。本质上：

1. 创建 google 项目和 OAuth 凭据
2. 在我的 Auth0 连接的应用程序中添加凭据

破碎的：Login Successful

日志显示登录成功。但是在我的应用程序中，我单击了登录按钮，但没有出现预期的 auth0 模式。

{
  "date": "2020-10-14T09:14:06.549Z",
  "type": "s",
  "connection_id": "",
  "client_id": "<MyClientId>",
  "client_name": "<MyClientName>",
  "ip": "<MyIP>",
  "user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
  "details": {
    "prompts": [],
    "completedAt": 1602666846548,
    "elapsedTime": null,
    "session_id": "m0AeJer-FhZ0rb9UFPWgvDkvN7MW36h_"
  },
  "hostname": "<MyHost>",
  "user_id": "<MyUserID>",
  "user_name": "<MyUserName>",
  "auth0_client": {
    "name": "auth0-react",
    "version": "1.1.0"
  },
  "log_id": "90020201014091409270008789595401783120816526823843168290",
  "_id": "90020201014091409270008789595401783120816526823843168290",
  "isMobile": false,
  "description": "Successful login"
}

并查看 safari 中的响应标头，令牌请求401已

URL: https://<testdomain>.auth0.com/oauth/token
Status: 401
Source: Network
Address: <testaddress>
Initiator: 
auth0-spa-js.production.esm.js:15

固定日志：Failed Exchange

在确保我正确连接到 goole 后，我发现问题仍然存在。查看日志，我在Failed Exchange.

{
  "date": "2020-10-14T09:14:07.304Z",
  "type": "feacft",
  "description": "Unauthorized",
  "connection_id": "",
  "client_id": "<MyClientId>",
  "client_name": null,
  "ip": "<TheIP>",
  "user_agent": "Safari 13.1.2 / Mac OS X 10.15.6",
  "details": {
    "code": "*************Rw7"
  },
  "hostname": "<MyHostName>",
  "user_id": "",
  "user_name": "",
  "log_id": "90020201014091410270002070951766882711015226887425228818",
  "_id": "90020201014091410270002070951766882711015226887425228818",
  "isMobile": false
}

这个Failed Exchange问题为我解决了这个问题。将您的 Auth0 应用程序属性设置更改为：

应用程序类型：常规 Web 应用程序令牌端点身份验证方法：无

然而，这又发现了一个新问题……

损坏的日志：Failed Silent Auth

标签： reactjshttp-status-code-404auth0

Answer 1

我在这里做了很多修复，所以我会在答案中记录它们。

登录时的警告

通过确保已正确设置我的凭据提供程序来解决此问题。在这种情况下谷歌。有关如何将 google 添加为凭据提供程序的说明，请参见此处。

交换失败

通过转到 auth0 仪表板应用程序设置并将设置修改Application Type为Regular Web Application并将设置修改Token Endpoint Authentication Method为None.

登录成功（但不是真的）

一旦我修复了Failed Exchange上述问题，它就消失了。

静默身份验证失败

这从未“修复”过，错误仍然出现在日志中。然而，关于这个问题的评论促使我重新审视我的Allowed Web Origins和Allowed Origins (CORS)我的 auth0 到以下内容：

https://<mydomain>.eu.auth0.com, http://localhost:3000

这是链中的最后一个问题，我现在可以按预期使用登录和注销。