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

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

该小部件将使用 JavaScript 包含在客户网站的 HTML 中，并且只能用于我的客户（在我的网站上注册的网站）。

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

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

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

Update:我偶然发现本文 http://supercollider.dk/2009/01/oauth-and-client-side-widgets-154，它提供了使用 OAuth 的方法的概要。但是，它还不够详细，无法让我真正理解如何将其与 OAuth 2 一起使用。

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

我假设您不会从头开始推出自己的 OAuth 2.0 提供程序，如果您是的话 - 做得很好，否则您应该使用类似的东西门卫 https://github.com/applicake/doorkeeper为你做这件事。

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

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

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

现在，我认为应用程序通过您的网站对用户进行身份验证的流程已经很清楚了。话虽这么说，您不需要做太多事情就可以实现这一点。

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

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

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

流程是这样的：

1. 该代码将包含您网站的 URL，以及他在您的网站上注册应用程序时获得的应用程序 ID（非秘密）。

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

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

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

Edit:正如评论中正确提到的，cookie 应该是 HttpOnly 以防范常见的 XSS 攻击。

补充笔记

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

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

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

其他方法只需查看 Facebook 的社交插件，您就会发现还有其他选择。

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