如何在Javascript中实现安全的OAuth2消费？
我正在使用PHP来devise一个使用OAuth2.0的API。 我的最终目标是在JavaScript（使用AngularJS）中直接访问此API构build前端应用程序。 我知道，传统上没有办法来保证JavaScript中的交易，所以直接访问API是不可行的。 前端需要与服务器代码进行通信，然后直接与API进行通信。 但是，在研究OAuth2时，看起来好像User-Agent Flow旨在帮助解决这种情况。
我需要帮助的是在javascript中实现OAuth2用户代理stream程（特别是AngularJS，如果可能的话，因为这是我用于我的前端）。 我一直无法find任何这样做的例子或教程。 我真的不知道从哪里开始，并且不希望通读整个OAuth2规范，至less没有看到我将要做的一个例子。 所以任何例子，教程，链接等将不胜感激。
隐式授权stream程 （您称为用户代理stream程 ）正是要走的路线：
隐式授权是针对在浏览器中使用诸如JavaScript之类的脚本语言实现的客户端而优化的简化的授权码stream。
为了理解stream程，Google为客户端应用程序提供的文档是一个非常好的开始。 请注意，他们build议您采取额外的令牌validation步骤，以避免混淆副代表问题 。
下面是使用Soundcloud API和jQuery的stream程的一个简短的示例实现：
<script type="text/javascript" charset="utf-8"> $(function () { var extractToken = function(hash) { var match = hash.match(/access_token=([\w-]+)/); return !!match && match[1]; }; var CLIENT_ID = YOUR_CLIENT_ID; var AUTHORIZATION_ENDPOINT = "https://soundcloud.com/connect"; var RESOURCE_ENDPOINT = "https://api.soundcloud.com/me"; var token = extractToken(document.location.hash); if (token) { $('div.authenticated').show(); $('span.token').text(token); $.ajax({ url: RESOURCE_ENDPOINT , beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "OAuth " + token); xhr.setRequestHeader('Accept', "application/json"); } , success: function (response) { var container = $('span.user'); if (response) { container.text(response.username); } else { container.text("An error occurred."); } } }); } else { $('div.authenticate').show(); var authUrl = AUTHORIZATION_ENDPOINT + "?response_type=token" + "&client_id=" + clientId + "&redirect_uri=" + window.location; $("a.connect").attr("href", authUrl); } }); </script> <style> .hidden { display: none; } </style> <div class="authenticate hidden"> <a class="connect" href="">Connect</a> </div> <div class="authenticated hidden"> <p> You are using token <span class="token">[no token]</span>. </p> <p> Your SoundCloud username is <span class="user">[no username]</span>. </p> </div> 要使用AngularJS发送XMLHttpRequests （jQuery中的ajax()函数），请参阅$http服务的文档。
如果要保持状态，则在将用户发送到授权端点时，请检查state参数。
有一个Authorization Code Grant方法从OAuth服务器获取令牌的示例。 我用jQuery（ $ ）来做一些操作。
首先，将用户redirect到授权页面。
var authServerUri = "http://your-aouth2-server.com/authorize", authParams = { response_type: "code", client_id: this.model.get("clientId"), redirect_uri: this.model.get("redirectUri"), scope: this.model.get("scope"), state: this.model.get("state") }; // Redirect to Authorization page. var replacementUri = authServerUri + "?" + $.param(authParams); window.location.replace(replacementUri);
当一个授权通过获取令牌时：
var searchQueryString = window.location.search; if ( searchQueryString.charAt(0) === "?") { searchQueryString = searchQueryString.substring(1); } var searchParameters = $.deparam.fragment(searchQueryString); if ( "code" in searchParameters) { // TODO: construct a call like in previous step using $.ajax() to get token. }
您可以使用jQuery或纯XMLHttpRequest以相同的方式实现Resource Owner Password Credentials Grant ，并且不要进行任何redirect – 因为在每次redirect时，您的应用程序都将失去状态。
对于我来说，我使用HTML5本地存储来坚持我的应用程序的状态，以便不可能造成安全威胁的数据。
