Question

很抱歉要进行大量修改。我正在重新开始，因为我没有正确地陈述我的问题。

我正在尝试在HTML5中编写客户端应用程序。我不希望它被托管在网站上。我甚至不确定这是否可行，我对这种类型的应用程序还不熟悉。

无论如何，我想访问Google服务，这需要验证OAuth等身份验证。因为它是javascript，听起来像OAuth2是我需要的。

我正在尝试在弹出窗口中打开google身份验证（我有这部分），让用户允许访问，然后将流程传回我的应用程序，然后可以查询Google服务。问题是1.它会要求用户在我使用response_type=code时将令牌复制/粘贴到应用中，但如果我使用response_type=token则要求我重定向回有效的URL，因为这样没有托管在网络服务器上，没有。

那么我如何使用OAuth，让用户无缝授予访问权限？

Answer 1

在身份验证完成后，您应该为Google定义一些重定向网址以重定向到。如果您无法在任何网站上托管您的网页，您可以很好地将其托管在本地主机上。

关于从弹出窗口获取访问令牌到主父窗口，您可以在父窗口中设置计时器，该窗口不断检查弹出窗口的文档位置。一旦文档位置与重定向URL匹配，您就可以解析将在URL本身中的访问令牌。

昨天我写了一个关于完全相同问题的教程（使用本地主机），这里是链接： http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html

希望你会发现它很有用。

Answer 2

为了避免潜在的click jacking，Google身份验证会强制您进行整页登录。我认为你无法控制它。

评论后

编辑，这是从执行此操作的Google OAuth2 page中提取的代码：

<body>
    <a href="javascript:poptastic('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=21302922996.apps.googleusercontent.com&redirect_uri=https://www.example.com/back&response_type=token');">Try
    out that example URL now</a>
<script>
    function poptastic(url) {
      var newWindow = window.open(url, 'name', 'height=600,width=450');
      if (window.focus) {
        newWindow.focus();
      }
    }

</script>
</body>

Answer 3

我相信你可以在Javascript中使用谷歌api（gapi）为Oauth。以下是文档：Authentication using the Google APIs Client Library for JavaScript

您不需要用户复制/粘贴任何代码，也不需要提供重定向uri

您需要做的就是：转到Google Developers Console中的项目并生成以下内容： 1.生成新的客户端ID并选择“已安装的应用程序”和“其他”选项。 2.生成公共API密钥

上述文档中的示例代码：

// Set the required information
var clientId = 'YOUR CLIENT ID';
var apiKey = 'YOUR API KEY';
var scopes = 'https://www.googleapis.com/auth/plus.me';

// call the checkAuth method to begin authorization
function handleClientLoad() {
  gapi.client.setApiKey(apiKey); // api key goes here
  window.setTimeout(checkAuth,1);
}

// checkAuth calls the gapi authorize method with required parameters
function checkAuth() {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); // scope and client id go here
}

// check that there is no error and makeApi call
function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    makeApiCall();
  }
}

// API call can be made like this:
function makeApiCall() {
  gapi.client.load('plus', 'v1', function() {
    var request = gapi.client.plus.people.get({
      'userId': 'me'
    });
    request.execute(function(resp) {
      var heading = document.createElement('h4');
      var image = document.createElement('img');
      image.src = resp.image.url;
      heading.appendChild(image);
      heading.appendChild(document.createTextNode(resp.displayName));

      document.getElementById('content').appendChild(heading);
    });
  });
}

Answer 4

我已经为这个任务写了一个迷你JS库，接受它并看看它是否适合你。

https://github.com/timdream/wordcloud/blob/6d483cd91378e35b54e54efbc6f46ad2dd634113/go2.js

我最近正在开发另一个依赖于相同脚本的项目，因此我将此项目隔离到an independent library project ...检查进度如何（如果有）。

如何通过弹出窗口中的OAuth 2.0与Google进行身份验证？

4 个答案: