个人中心
gpt4 book ai didi

HTML5+jQuery+phonegap 移动应用安全

转载 作者：搜寻专家 更新时间：2023-10-31 02:25:45 25 4
gpt4 key购买 nike

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

我想对客户端进行一次身份验证并提供一个 key / token ，之后可以使用该 key / token 直到预定义的到期日期。我有 4 个问题:

  1. 如何保护服务器端网络服务 API？有什么工具吗？
  2. 我可以使用本地存储来存储 key / token 吗？
  3. 我可以在客户端使用哪些 phonegap 安全工具？
  4. 在这种情况下如何使用 OAUTH？

最佳答案

如何保护服务器端 web 服务 api？有什么工具吗？

OAuth 可能无法满足您的需求，请确认您确实需要使用如此强大(且复杂)的标准。

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

我可以使用本地存储来存储 key / token 吗？

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

我可以在客户端使用哪些 phonegap 安全工具？

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

我已经编写了一个可以为您执行 OAuth 2.0 的 javascript 库 JSO。也存在其他库。

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

将 JSO 与 Phonegap 和 ChildBrowser 结合使用

在混合环境下运行在移动设备上的WebApps使用JSO进行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 兼容。相反，您可以使用 ChildBrowser 的这个分支，它应该与 Cordova 2.0 一起工作:

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

通过使用拖放到 XCode 中的 Plugins 文件夹，进入您的 WebApp 项目区域。

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

在此文件中，您需要将一个带有“*”的数组条目添加到 ExternalHosts 中，并在 Plugins 中添加两个条目:

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

如屏幕截图所示。


(来源:erlang.no)

使用 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>

关于HTML5+jQuery+phonegap 移动应用安全，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12171227/

25 4 0
文章推荐： html - 用 Java 中的 HTML 实体替换字符
文章推荐： html - PageSpeed 工具的奇怪修复
文章推荐： jQuery 在 Firefox 中不工作
文章推荐： html - 仅用于 HTML 的 Sass
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com