如何使用 Auth0 在自定义域的多个子域中登录一次?

How to login once across multiple subdomains on a custom domain using Auth0?

我们正在开发一套独立的 SPA 应用程序,其中每个应用程序都位于具有共同父域的单独子域中。

app1.domain.com
app2.domain.com

我们希望避免客户必须分别登录每个应用程序。因此,我们希望能够在一个应用程序中登录一次,并在访问其他应用程序时保持登录状态。同样,退出其中一个也会退出其他。

根据我对 Auth0 文档的研究,这似乎可以通过自定义域实现。所以改变了我们的计划,添加了自定义域 auth.domain.com 并创建了一个可以登录的测试 SPA 应用程序。然后我创建了两个子域并将它们都指向该应用程序。

登录 app1.domain.com 成功。 auth0.{clientid}.is.authenticated cookie 已创建。但是,cookie 的域是 app1.domain.com,而不是我希望的 .domain.com

然后我尝试访问 app2.domain.com 并确认 cookie 确实不存在并且我没有登录。

有什么方法可以配置 Auth0 以保持用户在所有子域中登录?

(我在 Auth0 论坛上发帖 here 但没有得到回复)

我在 auth0-spa-js 上打开了一个 pull request 包来添加一个选项来指定 cookie 域。它在 1.21.0 及更高版本中被接受并合并。

在您的客户端配置中,添加一个 cookieDomain 选项。

const auth0 = await createAuth0Client({
  domain: '<AUTH0_DOMAIN>',
  client_id: '<AUTH0_CLIENT_ID>',
  redirect_uri: '<MY_CALLBACK_URL>',
  audience: '<MY_AUDIENCE>',
  cookieDomain: '.example.com',
})

注意: 顶级 cookie 域始终以句点 ..

开头

在同一顶级域下的每个 app/subdomain 上使用此配置,您会注意到 auth0.{clientid}.is.authenticated cookie 将存在于两者上。在一个上登录将导致您在访问任何其他人时登录。

Vue、React 等的大多数其他 auth0 插件都使用 auth0-spa-js 包,因此客户端配置应该几乎相同。