我想创建一个 Web 小部件来显示来自我的站点的信息。
该小部件将使用 JavaScript 包含在客户网站的 HTML 中,并且只能用于我的客户——在我的网站上注册的网站。
小部件中的信息应特定于当前访问客户站点的用户。
因此,我需要对客户端(网站所有者)和资源所有者(网站访问者)进行身份验证。这似乎很好地映射到 OAuth 2.0,但我找不到此类实现的完整示例或解释。
任何资源或指向此类信息的指针将不胜感激。
更新:我偶然发现了 this article ,其中概述了使用 OAuth 的方法。但是,它不够详细,我无法真正了解如何将其与 OAuth 2 结合使用。
最佳答案
有许多大型组织已经这样做了,我很遗憾没有看到这个问题的其他答案,因为它是一个如此重要的网络模式。
我将假设您不会从头开始滚动您自己的 OAuth 2.0 提供程序,如果您是 - 做得好,否则您应该使用像 Doorkeeper 这样的东西。为你做这件事。
现在,在 OAuth 2.0 中,您有以下实体:
首先要注意的是你必须有 与每个应用程序关联的域名。因此,如果开发人员在您的网站上注册 API token / secret ,他创建的应用程序将映射到 唯一领域。
现在,我认为应用程序通过您的网站对用户进行身份验证的流程已经很清楚了。话虽如此,您不需要做太多工作即可。
当应用程序将用户发送到您的网站(以便登录)时,您会在用户的计算机上放置一个 session cookie。让我们称之为“Cookie-X”。
现在用户通过您的网站进行身份验证并返回到应用程序。我们想在那里显示一个自定义小部件,其中包含与该用户有关的信息。
开发人员需要将一些代码复制粘贴到此应用程序中。
流程是这样的:
document.domain
并将其包含在对您网站的 ping 中,这样您就可以验证请求是否来自使用给定 AppID 注册的域。 编辑:正如评论中正确提到的,cookie 应该是 HttpOnly 以防止常见的 XSS 攻击。
附加说明
这是一种安全方法的原因:
其他方法
只需查看 Facebook 的社交插件,您就会知道还有其他选择。
例如,一种可能是使用 Iframe。如果您要求开发人员将 Iframe 添加到他的应用程序中,您甚至可以减少上面提到的几个步骤。但是您将不得不添加 JS(在 iframe 之外)以获取正确的域等。当然,从可访问性和界面的 Angular 来看,我不太了解 iframe。
关于javascript - 如何使用 OAuth 2.0 实现 Web 小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13219308/