5

我有一个使用google javascript API的 HTML5 应用程序。我最近发现这个应用程序需要在 iframe 沙盒环境中运行。我知道这看起来像是试图解决沙盒环境的目标。但是 iframe 仍然允许使用某些功能（请参阅下面的约束），这让我认为有一些希望。

我在身份验证过程中遇到了问题：加载时，google javascript api 在原始页面上附加了一个 iFrame（在我的情况下这已经是一个 iframe），并使用 postMessage 机制在窗口之间进行通信。我想将 google api 用于 OAuth2.0 身份验证过程以及查询 API。

这是一个复制案例；我正在使用 google 提供的authSample.html页面的简化版本。 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>original auth page</title>
</head>
<body>
    <button id="authorize-button">Authorize</button>
    <div id="content">Not authentified</div>
    <script type="text/javascript">
        var clientId = '<use yours>';
        var apiKey = '<use yours>';
        var scopes = 'https://www.googleapis.com/auth/analytics.readonly';
        var authorizeButton = document.getElementById('authorize-button');
        var resultDiv = document.getElementById('content');
        function handleClientLoad() {
            gapi.client.setApiKey(apiKey);
            authorizeButton.onclick = handleAuthClick;
        }

        function handleAuthResult(authResult) {
            if (authResult && !authResult.error) {
                makeApiCall();
            } else {
                resultDiv.innerHTML = "handleAuthResult Failed";
            }
        }

        function handleAuthClick(event) {
            gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult);
            return false;
        }

        function makeApiCall() {
            gapi.client.load('analytics', 'v3', function () {
                resultDiv.innerHTML = "api call successful";
            });
        }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</body>
</html>

最终用户将使用的包含页面如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>iframed page</title>
</head>
<body>
    <iframe id="8D681BA3DED5" width="400px" height="400px" 
            frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups" marginheight="0" marginwidth="0" 
            name="MyTest" src="https://localhost:4000/AuthSample.html"></iframe>
</body>
</html>

显然，在用服务器 authSample.html url 替换 iframe 的实际 src 后，您必须执行此页面。

如果你在不同的浏览器上运行它，你会注意到失败的不同行为。我试图利用允许弹出窗口的事实，但似乎浏览器实现了不同的事实，即打开的窗口也应该在沙盒环境中打开。

我想避免为身份验证编写自己的 Web 服务。此外，我相信用户使用通常的谷歌网页（带有 url accounts.google.com）输入他们的凭据会更安全。如果您有一个想法，可能适用于最近的浏览器，请随时提交。

谢谢

4

2 回答 2

1
于 2015-05-28T16:01:46.687 回答
-2

自己验证用户身份并不难，不必依赖 api 作为拐杖。通过几个 php mysqli_connect 调用并通过 phpmyadmin 或其他方式访问数据库，您可以直接验证客户端。从那里，您将轻松查询数据库以查找用户及其相关信息。

使用与表单中相同的 POST/GET 方法，您将能够在表单中创建一个 php 变量action="<?php echo $_SERVER["PHP_SELF"];?>"

然后在你的 php 源代码中，

$userid = mysqli_real_escape_string($con,$_POST['FORMID'])

其中 $con 是您通过 mysqli_connect 的连接字符串

于 2014-08-05T20:11:58.933 回答