HTML5 + jQuery + phonegap移动应用安全性

时间:2012-08-29 05:07:58

标签: html5 cordova jquery-mobile oauth restful-authentication

我是这个领域的新手,我正在开发一个HTML5移动应用程序,它调用一个restful webservices api并交换JSON对象。

我想要对客户端进行一次身份验证,并提供一个可以在之后使用的密钥/令牌,直到预定义的到期日期为止。我有4个问题:

  1. 如何保护服务器端的webservices api?任何工具?
  2. 我可以使用本地存储来存储密钥/令牌吗?
  3. 我可以为客户端使用哪些phonegap安全工具?
  4. 在这种情况下如何使用OAUTH?

2 个答案:

答案 0 :(得分:11)

如何保护服务器端的webservices api?任何工具?

根据您的需要,OAuth可能过度,确认您确实需要使用如此强大(且复杂)的标准。

您可以使用的两个PHP服务器端软件示例:

我可以使用本地存储来存储密钥/令牌吗?

是的!请注意,您必须使用OAuth 2.0隐式授权流程才能在客户端获取令牌。

我可以为客户端使用哪些phonegap安全工具?

ChildBrowser是一个插件,用于为身份验证过程打开单独的浏览器窗口。

我写了一个javascript库JSO,可以为你做OAuth 2.0。其他库也存在。

在这种情况下如何使用OAUTH?

将JSO与Phonegap和ChildBrowser一起使用

使用JSO在混合环境中的移动设备上运行的WebApp中执行OAuth 2.0授权是JSO的一个重要部署方案。

以下是有关使用Phonegap for iOS设置JSO并使用Google配置OAuth 2.0的详细说明。您也可以将它与Facebook或其他OAuth提供商一起使用。

制剂

设置应用

创建新应用

./create  /Users/andreas/Sites/cordovatest no.erlang.test "CordovaJSOTest"

安装ChildBrowser

这里有原始的ChildBrowser插件。

但是, 与Cordova 2.0无法兼容。相反,你可以使用这个应该使用Cordova 2.0的ChildBrowser的分支:

您需要做的是复制这些文件:

进入您的WebApp项目区域,方法是拖放到XCode中的Plugins文件夹中。

现在,您需要编辑在WebApp项目区域中找到的Resources/Cordova.plist中找到的文件。

在此文件中,您需要将一个带有'*'的数组条目添加到ExternalHosts中,并将两个条目添加到插件中:

  • ChildBrowser - > ChildBrowser.js
  • ChildBrowserCommand - > ChildBrowserCommand

如屏幕截图所示。

http://clippings.erlang.no/ZZ6D3C032F.jpg

使用ChildBrowser设置WebApp

我建议在继续使用OAuth之前测试并验证你是否让ChildBrowser正常工作。

index.html文件中尝试此操作,然后使用模拟器进行验证。

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript">

    var deviceready = function() {
        if(window.plugins.childBrowser == null) {
            ChildBrowser.install();
        }
        window.plugins.childBrowser.showWebPage("http://google.com");
    };

    document.addEventListener('deviceready', this.deviceready, false);

</script>

设置JSO

下载最新版本的JSO:

此处也提供了有关JSO的文档。

回调URL需要指向某个地方,一种方法是将回调HTML页面放在某个地方,尽管你信任的主机,但它在哪里并不重要。并在那里放了一个漂亮的空白页面:

<!doctype html>
<html>
    <head>
        <title>OAuth Callback endpoint</title>
        <meta charset="utf-8" />
    </head>
    <body>
        Processing OAuth response...
    </body>
</html>

现在,设置您的应用程序索引页面。这是一个有效的例子:

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jso/jso.js"></script>
<script type="text/javascript">

    var deviceready = function() {

        var debug = true;

        /*
         * Setup and install the ChildBrowser plugin to Phongap/Cordova.
         */
        if(window.plugins.childBrowser == null) {
            ChildBrowser.install();
        }

        // Use ChildBrowser instead of redirecting the main page.
        jso_registerRedirectHandler(window.plugins.childBrowser.showWebPage);

        /*
         * Register a handler on the childbrowser that detects redirects and
         * lets JSO to detect incomming OAuth responses and deal with the content.
         */
        window.plugins.childBrowser.onLocationChange = function(url){
            url = decodeURIComponent(url);
            console.log("Checking location: " + url);
            jso_checkfortoken('facebook', url, function() {
                console.log("Closing child browser, because a valid response was detected.");
                window.plugins.childBrowser.close();
            });
        };

        /*
         * Configure the OAuth providers to use.
         */
        jso_configure({
            "facebook": {
                client_id: "myclientid",
                redirect_uri: "https://myhost.org/callback.html",
                authorization: "https://www.facebook.com/dialog/oauth",
                presenttoken: "qs"
            }
        }, {"debug": debug});

        // For debugging purposes you can wipe existing cached tokens...
        // jso_wipe();

        // jso_dump displays a list of cached tokens using console.log if debugging is enabled.
        jso_dump();

        // Perform the protected OAuth calls.
        $.oajax({
            url: "https://graph.facebook.com/me/home",
            jso_provider: "facebook",
            jso_scopes: ["read_stream"],
            jso_allowia: true,
            dataType: 'json',
            success: function(data) {
                console.log("Response (facebook):");
                console.log(data);
            }
        });

    };

    document.addEventListener('deviceready', this.deviceready, false);

</script>

答案 1 :(得分:1)

如何保护服务器端的webservices api?任何工具? 取决于Web服务的编写语言,php具有用于创建Web服务/ nusoap等的zend框架。因此,所有语言都提供了有关如何保护Web服务的信息。

我可以使用本地存储来存储密钥/令牌吗? 是的,您可以使用本地存储查看phonegap documentation

我可以为客户端使用哪些phonegap安全工具? 我不这么认为,但你可以搜索一些插件或创建自己的插件。取决于您希望实施什么样的安全性。

在这种情况下如何使用OAUTH? 这是OAuth的库,这似乎很有帮助。您可以创建一个电话间隙插件来与库进行交互,或使用javascript oauth library(也带有示例)。