Angular/ MongoDB/ NodeJs：从一个域自动登录到另一个域

Posted 2023-03-10

【中文标题】Angular/ MongoDB/ NodeJs：从一个域自动登录到另一个域

【英文标题】：Angular/ MongoDB/ NodeJs: Auto login from one domain to another domain

【发布时间】：2021-03-19 12:10:12

【问题描述】：

在我的应用程序中，我管理着两个域；一个是http://localhost:4500，另一个是http://localhost:4600

现在的情况是，当使用这些凭据登录到http://localhost:4500 域时，我还想进行一个实现，当单击具有登录到 http://localhost:4500 域。

对于 http://localhost:4500 域，我有一个 Angular 应用程序，我已使用 externalUrl 路由过程对其进行管理。

app-routing.module.ts

    path: "go-to-front-panel",
    canActivate: [RedirectGuard],
    component: RedirectGuard,
    data: 
      externalUrl: "http://localhost:4600"
    

redirect-guard.service.ts

export class RedirectGuard implements CanActivate 

  constructor(private router: Router)  

  canActivate( data : ActivatedRouteSnapshot): boolean 
    window.open(data.externalUrl, '_blank');
    return false;
  

登录http://localhost:4500 域时，它将以下 json 值存储到 mongodb 表中

    "_id" : ObjectId("5fcb088781f14e2f783eq262"),
    "userId" : 1,
    "token" : "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImp0aSI6IjM4Njk4NWUyLTc5MTItNDZhMy04YjY5LWMxYTdhZDQ2OWRhMSIsImlhdCI6MTYwNzQxMDMxMSwiZXhwIjoxNjA3NDEzOTExfQ.0czxMiH7yblJWxIepzHbq7C8oVde01kFnKnScC54LW4",
    "createdAt" : "2020-11-08 15:00:55",
    "deactivatedAt" : null,
    "__v" : 0

并在 sessionStorage 中存储此域的令牌值http://localhost:4500

login.component.ts

sessionStorage.setItem('token', userDetails.token);

=> Token 值是使用jwt.sign 方法生成的，如下所示。

const token = jwt.sign( userDetails , SECRET_KEY);

=> 那么我怎样才能设法从http://localhost:4500 域自动登录到http://localhost:4600 域

【参考方案1】：

我不会说这是自动登录。

但是当您点击got-to-front-panel时，您可以尝试按照以下步骤操作。

(1) 获取随机数的后端。随机数将能够识别用户。您可以将 nonce 保存在 redis 中或在 5-10 秒后过期的东西中。

(2) 将 nonce 附加到 http://localhost:4600?/nonce=some-very-long-unique-string-like-uuid

(3) http://localhost:4600 使用 nonce 联系后端进行身份验证。后端使用身份验证令牌使 nonce 和响应过期。

(4) http://localhost:4600 获取认证令牌并保存到localstorage

此行为类似于您在 google/facebook 中进行身份验证并使用唯一身份验证代码重定向到您想要的 url。

另一种方法有点类似。

(1)用户登录http://localhost:4700，获取认证token

(2) 用户重定向到 http://localhost:4800/redirect-url/?token=sometoken

(3) 在 http://localhost:4800 通过将令牌保存在本地存储中或使用您自己的身份验证机制完成身份验证

(4) 重定向回 http://localhost:4700

(5) viola，在两个域上都保存了登录信息。

【参考方案2】：

由于不同的 localhost 端口被视为不同的域，因此无法访问其他资源，例如 cookie 或 localStorage。

如果在生产期间将这两个应用程序部署在同一域的子目录中（company.com/app1 和 company.com/app2），则可以访问另一个应用程序的资源，并且自动登录将毫无问题地工作。

（这是我的确切情况，我有 4 个不同的 Angular 应用程序使用相同的登录数据。由于它们在同一个域中并且基于它们之间建立的业务信任，当用户登录到一个应用程序时，其他应用程序打开时会使用相同的 localStorage 数据自动登录，到期后任何人都将更新令牌，其他人将使用相同的新令牌）

否则，您可以使用postMessage api 实现此目的。

即，您可以在 4600 的应用程序中拥有一个（隐藏的）iframe，当它打开时，它可能会在 iframe 中加载 4500，并使用 4500 中编写的适当处理程序，4600 可以使用 postMessage api 发出请求，而 4500 可以发送其中存在的登录数据。这可以在不使用 iframe 的情况下通过交换数据来实现 在弹出窗口与其父级之间

window.parent.postMessage()

请注意，我无法分享示例代码或应用的链接，因为它们是专有的且不公开。