在单页应用程序中使用外部Oauth提供商登录

时间:2019-01-18 14:39:46

标签: vue.js oauth oauth-2.0 single-sign-on single-page-application

实际上,我的应用程序是使用VueJS构建的单页应用程序(SPA)。我的用例涉及三个组件:

  • 与个人后端服务器(Axios库)通信的单页应用程序(VueJS,VueRoute,VueX)
  • 个人后端服务器(NodeJS + MongoDB),包括用户管理。 (一个表用户具​​有指向另一个提供者表的链接)。这意味着一个用户可以使用多个提供程序注册许多访问。但最后,确定的是同一用户。
  • 外部OAuth提供程序(在示例中,我们称为“ MIRIA”)

我想实现的是能够使用我的外部OAuth提供商帐户登录的呼叫流程。 在我的单页应用程序中,我将有一个登录页面,建议使用电子邮件/密码凭据或“使用MIRIA登录”按钮登录。

我期望执行以下步骤:

  1. 当用户单击浏览器中的“使用MIRIA登录”按钮时,该用户将被重定向到MIRIA身份验证URL。 (将为该网址提供一个client_id和redirect_uri)

  2. 用户将在MIRIA登录门户上进行身份验证。如果验证成功,MIRIA会将用户重定向到redirect_uri url并提供授权码。据我了解,该网址将在我的个人后端服务器上处理。 (或来自Javascript?)当请求到达此URL上的后端服务器时,个人后端服务器将向access_token端点上的Oauth提供程序服务器发出POST请求。他将获得access_token的响应。

  3. 当后端获取access_token时,他需要检查此电子邮件是否已存在本地帐户。如果是,则后端服务器会将用户重定向到他在VueJS应用程序上的默认仪表板页面。如果未找到本地用户,则后端服务器会将用户重定向到VueJS应用程序的/ sign-up页面,并将预先填写从提供商处检索的某些字段,如电子邮件,全名..。然后,当用户单击注册按钮时,将创建一个本地帐户,并带有指向一个提供程序的链接,然后用户可以使用其电子邮件/密码凭证或使用外部提供程序进行登录。

您对此过程有何看法?我在正确的道路上吗?

0 个答案:

没有答案