如何使用 OAuth 2.0 实现 Web 小部件

Question

我想创建一个 Web 小部件来显示来自我的网站的信息。

该小部件将使用 JavaScript 包含在客户的网站 HTML 中，并且应该仅可用于我的客户 -- 在我的网站上注册的网站。

小部件中的信息应特定于当前正在访问客户网站的用户。

因此，我需要对客户端（网站所有者）和资源所有者（网站访问者）进行身份验证。这似乎很好地映射到 OAuth 2.0，但我找不到这种实现的完整示例或解释。

任何资源或指向此类信息的指针将不胜感激。

更新：我偶然发现了this article，它提供了使用 OAuth 的方法的概要。但是，对于我来说，它还不够详细，无法真正理解如何将其与 OAuth 2 一起使用。

Answer 1

有许多大型组织已经这样做了，我很遗憾看到这个问题没有其他答案，因为它是如此重要的网络模式。

我假设你不会从头开始推出自己的 OAuth 2.0 提供程序，如果你这样做了 - 做得好，否则你应该使用像 Doorkeeper 这样的工具来为你做这件事。

现在，在 OAuth 2.0 中，您拥有以下实体：

1. 在您的网站上注册的用户
2. 在您的网站上注册的应用程序（订阅您的 oauth2）
3. 用户权限，这是用户“允许”的应用程序列表
4. 开发人员（正在使用您的身份验证 API/小部件并构建应用程序）

首先要注意的是您必须拥有与每个应用程序关联的域名。因此，如果开发人员在您的网站上注册 API 令牌/机密，他创建的应用程序将映射到一个唯一域。

现在，我认为应用程序通过您的网站对用户进行身份验证的流程已经很清楚了。话虽如此，您不需要做太多工作。

当应用程序将用户发送到您的网站（以便登录）时，您会在用户的计算机上放置一个会话 cookie。让我们称之为“Cookie-X”。

现在用户已通过您的网站的身份验证并返回到应用程序。在那里，我们想显示一个自定义小部件，其中包含与该用户有关的信息。

开发人员需要将一些代码复制粘贴到此应用中。

流程是这样的：

1. 该代码将包含一个指向您网站的 URL，其中包含他在您的网站上注册他的应用程序时获得的应用程序 ID（非机密）。

2. 当该代码运行时，它将使用他的 appId ping 您的网站。您需要使用您的数据库检查该 AppID，并另外检查引荐来源网址是否来自与在您的网站中为该 AppID 注册的域名相同的域。 编辑： 或者或另外，代码可以检查 document.domain 并将其包含在对您网站的 ping 中，允许您验证请求来自已使用给定 AppID 注册的域.

3. 如果正确，您回复一些 JS 代码。

4. 您的 JS 代码会查找您的网站在用户登录时设置的会话 cookie。如果找到该 cookie，它会通过会话 ping 回您的网站，并且您的网站会使用自定义视图内容进行响应。

编辑：正如评论中正确提到的，cookie 应该是 HttpOnly 以防止常见的 XSS 攻击。

附加说明

这是一种安全方法的原因：

1. AppId 和域名是一个足够好的组合来验证其他人没有获取此信息。即使 appId 在应用程序 html 源代码中可见，域名也必须被任何试图使用其他人的 AppID 的人欺骗。

2. 假设某人获取了一个不是他的 AppID，并在请求您的小部件时编写代码来欺骗引用者的域名，他仍然无法看到任何信息。由于您正在显示用户特定信息，因此只有当您的网站可以找到它放置在用户浏览器上的会话 cookie 时，小部件才会呈现，而该会话 cookie 不能真正被欺骗。有诸如会话劫持等方法。但我认为这超出了这个问题的范围。

其他方法 只需查看 Facebook 的社交插件，您就可以知道还有其他选择。

例如，可能会使用 iframe。如果你要求开发者在他的应用程序中添加一个 iframe，你甚至可以减少上面提到的一些步骤。但是您必须同时添加 JS（在 iframe 之外）以获取正确的域等。当然，从可访问性和界面的角度来看，我不太了解 iframe。