如何实现Web部件使用OAuth 2.0 [英] How to implement a web widget with OAuth 2.0

问题描述

我想创建一个Web部件，将从我的网站显示的信息。

I want to create a web widget that will display information from my site.

小部件将使用JavaScript包括在客户的网站的HTML，并且只应为我的客户可以使用 - 登记在我的网站，网站

The widget will be included in the client's website HTML using JavaScript, and should only be usable for my clients -- web sites that were registered at my site.

在窗口小部件的信息应具体到谁正在访问客户网站的用户。

The information in the widget should be specific to the user who is currently visiting the client's site.

所以，我需要验证在客户端（网站所有者）和资源所有者（网站访问者）。这似乎很好地映射到的OAuth 2.0，但我无法找到这样的实现一个完整的例子或解释。

So, I need to authenticate both the client (website owner) and the resource owner (website visitor). This seems to map nicely to OAuth 2.0, but I couldn't find a complete example or explanation for such an implementation.

任何资源或指针这类信息将AP preciated。

Any resources or pointers to such information will be appreciated.

更新：我在这篇文章< /一>，这对于使用OAuth的做法提供了一个轮廓。然而，这还不够细致，我真正理解如何使用这个使用OAuth 2。

Update: I've stumbled upon this article, which provides an outline for an approach that uses OAuth. However, it is not detailed enough for me to really understand how to use this with OAuth 2.

推荐答案

有这这样做了许多大型组织，我很伤心地看到没有其他答案这个问题，因为它是如此重要的Web模式。

There are many large organizations that have done this, and I'm sad to see no other answers for this question since it's such an important web pattern.

我要presume，你是不是滚动从头开始自己的OAuth 2.0提供者，如果你 - 好做，否则你应该使用的东西kickass喜欢的看门来为你做这个。

I'm going to presume that you are not rolling your own OAuth 2.0 provider from scratch, if you are - well done otherwise you should be using something kickass like Doorkeeper to do this for you.

现在，在OAuth的2.0有以下实体：

Now, in OAuth 2.0 you have the following entities:

1. 在注册用户在你的网站
2. 应用程序注册在您的网站（谁订阅您oauth2）
3. 在用户权限它是应用程序用户已允许列表
4. 在开发者（谁在消耗你的身份验证API /小部件和构建应用程序）

要注意的第一件事就是您必须域与每个应用程序相关联的名字。因此，如果一个开发商寄存器在您的网站的API令牌/秘诀，他创建了应用程序映射到唯一域。

The first thing to note is you must have a domain name associated with each Application. So if a developer registers for a API token / secret on your website, the Application he creates is mapped to a unique domain.

现在，我presume的流应用程序来验证用户通过您的网站已经很明显了。话虽这么说，你并不需要做太多的这个工作。

Now, I presume that the flow for an application to authenticate users via your website is already clear. That being said, you don't need to do much for this to work.

当应用程序向用户发送到您的网站（以登录）放置在用户的计算机上的会话cookie。让我们称之为曲奇-X。

When an Application sends the user to your website (in order to sign in) you place a session cookie on the user's computer. Lets call this "Cookie-X".

现在用户通过您的网站进行身份验证，并返回给应用程序。在那里，我们要显示一个自定义窗口小部件有关的信息给该用户。

Now the user is authenticated by your website and goes back to the Application. There we want to show a custom widget with information pertaining to that user.

开发人员将需要复制粘贴一些code到这个程序。

The developer will be need to copy paste some code into this app.

流程是这样的：

1. 在code将包含一个URL到你的网站有自己的应用程序ID（不是秘密的）他登记在网站上提出申请的时候得到的。

1. The code will contain a url to your website with his Application ID (not secret) which he got when registering his application on your website.

在这code运行时，它将ping你的网站与他的appid。你需要检查的AppID与您的数据库，另外检查引荐网址是来自同一个域作为其注册在您的网站的的AppID。 修改替换或补充，在code可以检查 document.domain的，并将其纳入了平到你的网站，让您验证请求来自已注册与给定的AppID域

When that code runs, it will ping your website with his appId. You need to check that AppID with your database, and additionally check that the referrer url is from the same domain as that which is registered in your website for that AppID. Alternatively or additionally, the code can check for document.domain and include it in the ping to your website, allowing you to verify that the request has come from the domain that has registered with the given AppID.

如果这是正确的，你回信了一些JS code。

If that is correct, you reply back with some JS code.

您JS code相对于会话cookie你的网站已经设置当用户签署，如果发现该cookie，它坪回你的网站与会话和你的网站自定义响应查看内容。

Your JS code looks for the session cookie your website had set when the user had signed in. If that cookie is found, it pings back to your website with the session and your website responds with the custom view content.

编辑：作为在评论理所当然提到，该cookie应仅Http，以防止常见的XSS攻击

as rightfully mentioned in a comment, the cookie should be HttpOnly to safeguard against common XSS attacks.

其他注意事项

究其原因，这是一个安全的方法：

The reasons this is a secure approach:

1. 本的AppId和域名是一个很好的组合，足以验证，其他人都没有获取这些信息。即使你的APPID是在应用HTML源代码可见，域名必须由任何人企图用别人的的AppID被欺骗。

1. The AppId and domain name are a good enough combination to verify that other people are not fetching this information. Even thou the appId is visible in the applications html source, the domain name would have to be spoofed by anyone attempting to use someone else's AppID.

presuming有人需要一个AppID这是不是他的，并写入code恶搞引荐的域名，他仍然无法看到任何信息。既然你是显示用户的具体信息，窗口小部件只会渲染，如果你的网站上可以找到的会话cookie是在用户的浏览器，不能真正被欺骗。有办法周围像会话劫持等，但我认为这是超出了这个问题的范围。

Presuming someone takes an AppID which is not his, and writes code to spoof the domain name of the referrer when requesting for your widget, he still won't be able to see any information. Since you are showing user specific information, the widget will only render if your website can find the session cookie it placed on the users browser which can't really be spoofed. There are ways around like session-hijacking, etc. But I think that's beyond the scope of this question.

其他方法 只要看看Facebook的社交插件，你可以告诉大家，还有其他选择。

Other Methods Just by looking at Facebook's Social Plugins, you can tell that there are other options.

例如，一种可能是使用的iframe。如果你问开发商一个iFrame添加到自己的应用程序，你甚至可以减少一些上面提到的步骤。但是，你必须添加JS与它一起（在iframe外）抓住正确的域等，并ofcourse从可及性和界面的角度来看，我不太发现内部框架的。

For example, one might be to use an Iframe. If you ask the developer to add an Iframe to his application, you can even reduce a few of the steps mentioned above. But you will have to add JS along with it (outside the iframe) to grab the correct domain, etc. And ofcourse from an accessibility and interface standpoint I'm not very found of Iframes.

这篇关于如何实现Web部件使用OAuth 2.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！