使用 AUTH0 V9 API 的托管登录页面不起作用

Posted 2023-03-08

【中文标题】使用 AUTH0 V9 API 的托管登录页面不起作用

【英文标题】：hosted login page with AUTH0 V9 API not working

【发布时间】：2020-12-22 06:41:22

【问题描述】：

我正在使用 AUTH0 V9 API 在我的网站上托管登录页面，并使用 API 通过 AUTH0 登录用户。我使用https://auth0.com/docs/libraries/auth0js 文档作为参考。我通过以下命令安装了 auth0-js npm 包

npm install auth0-js

然后通过以下代码初始化AUTH0

<script type="text/javascript">
 var webAuth = new auth0.WebAuth(
  domain:       'YOUR_DOMAIN',
  clientID:     'YOUR_CLIENT_ID'
  redirectUri: "http://localhost:3000/login",
  responseType: "code",
  responseMode: "form_post",
  scope: "openid profile email",
 );
</script>

然后我使用 login() 方法如下

webAuth.login(
 realm: 'tests',
 username: 'testuser',
 password: 'testpass',
);

但是上面的登录代码不起作用。它会将我重定向到其他 URL，而不是我在初始化 AUTH0 对象时提供的“http://localhost:3000/login”。

此方法还引用了“自定义域”。我是否需要购买 AUTH0 订阅来管理 V9 API 或者我做错了什么，这就是我收到错误重定向的原因。请帮忙。

========

我发现一些奇怪的事情是相同的代码在我的个人帐户中工作，但在我客户的企业帐户中却没有。

【问题讨论】：

忘了说我用的是nextJS

您还需要在 Auth0 网站上配置您的应用。

是的，我已经这样做了。我创建了一个“Web 应用程序”类型的应用程序，并将回调广告 CORS URL 添加为“localhost:3000”。我也没有收到 CORS 错误。问题是它没有重定向到我给出的“RedirectURI”。它重定向到其他一些 URL

你设置了回调地址和源地址吗？问题可能就在那里

这是我的配置：允许的回调 URL：localhost:3000/callback；允许的网络来源：localhost:3000；允许的来源 (CORS)：localhost:3000。希望这会有所帮助

【参考方案1】：

上面提到的相同代码适用于我的个人帐户，但不适用于我客户的企业帐户，问题是客户在租户设置中设置了自定义错误页面。无论谁使用自定义登录，请检查两件事。

您的回调 URL 正是您在通过 AUTH0 V9 的自定义登录代码中提到的内容。 租户设置中的自定义错误页面已关闭。 “租户设置 -> 常规页面 -> 错误”。