Auth0 returns 令牌请求 401。 Auth0 日志显示登录成功

Question

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

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

Login.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 的日志文本：

You are using Auth0 development keys which are only intended for use in development and testing. This connection (google-oauth2) should be configured with your own Development Keys to enable the consent page to show your logo instead of Auth0's and to enable SSO for this connection. AUTH0 DEVELOPMENT KEYS ARE NOT RECOMMENDED FOR PRODUCTION ENVIRONMENTS. To learn more about Development Keys please refer to https://auth0.com/docs/connections/social/devkeys.

已通过关注 Auth0 网站上的 these instructions 解决此问题。本质上：

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 中的响应 headers，令牌请求有 401'd

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 应用程序 令牌端点身份验证方法：None

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

损坏的日志：Failed Silent Auth

Answer 1

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

登录时警告

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

交换失败

已通过转到 auth0 仪表板应用程序设置并将设置 Application Type 修改为 Regular Web Application 并将设置 Token Endpoint Authentication Method 修改为 None 来解决此问题。

登录成功（但不是真的）

一旦我修复了上面的 Failed Exchange，它就消失了。

静默验证失败

这从未被“修复”，错误仍然出现在日志中。然而，关于 this question 的评论促使我重新访问我的 Allowed Web Origins 和 Allowed Origins (CORS) 在我的 auth0 到下面：

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

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