Phonebox中的Dropbox Javascript Datastores API示例为Windows8应用程序提供了错误forbidframing [英] Dropbox Javascript Datastores API example in Phonegap provides error forbidframing for Windows8 app

问题描述

我试图创建一个支持Android和Windows8的Dropbox Javascript Datastores API的Phonegap应用程序，它使用了这里提供的示例： https://github.com/dropbox/cordova-datastores-example

当我构建并运行Android应用程序时，它在Android平板电脑上完美运行。但是当我运行为Windows8创建的应用程序时，会显示一个错误：应用程序无法导航到...因为这个错误：FORBIDFRAMING 。然后没有什么发生。

我找不到使用框架的替代方法。我想知道，如果有一个方法来运行Windows8应用程序成功的这个例子，并在哪里我会更改示例来替换框架。 （或者，如果有另一种方式来验证用户登录，以便我不必使用框架。）

谢谢。

解决方案

前提

这是一个解决方案，可能会被移植到一个合适的Pull Request针对dropbox-js：

准备工作：

• 下载dropbox-js从这里，并将其放入项目的 js 文件夹。


• 确保列在解决方案资源管理器如果没有，请右键点击该文件夹，然后通过添加 - >现有项目...添加。


• 添加 dropbox.js 到您的 default.html 。


• 创建一个新文件。我将它命名为 helpers.js 并将其添加到您的 default.html 。


• 打开您的 package.appxmanifest 文件，并声明自定义协议。 （声明 - >从下拉菜单中选择协议 - >为其命名（例如myapp））


• 转到收存箱应用控制台并注册新应用。


• 向注册的应用添加重定向URI： myapp ：// dropbox 。请注意 myapp 引用自定义协议。

步骤1：

将以下内容添加到 helpers.js ：
http://pastebin.com/qpZbv7YG

步骤2：添加对协议的支持处理程序

当我们将自定义协议添加到我们的应用程序中并将重定向uri添加到dropbox时，我们需要处理
来自dropbox的调用。您的 default.js

  app.addEventListener （args）{
 if（args.detail.kind === activation.ActivationKind.protocol）{
 //应用程序已通过自定义协议调用
 
 var requestUri = args.detail.uri.rawUri 
，params = Dropbox.Util.Oauth.queryParamsFromUrl（requestUri）
 
 AppHelpers.dropbox.setParams（params）
} else if（args .detail.kind === activation.ActivationKind.launch）{
 / *你应该有这个alread in place * / 
} 
}）
  

步骤＃3：将自定义AuthDriver添加到dropbox-js

打开dropbox.js并找到以下行：

  Dropbox.AuthDriver.Cordova =（function（_super）{
 
 <$ c> 
 $ c> Dropbox.AuthDriver.WinRT =（function（_super）{
 __extends（WinRT，_super）; 
 
 function WinRT（options）{
 WinRT .__ super __。constructor。 call（this，options）; 
} 
 
 WinRT.prototype.url = function（）{
 return'myapp：// dropbox'; 
}; 
 
 WinRT.prototype.doAuthorize = function（authUrl，stateParam，client，callback）{
 var authHost，browser，onEvent，promptPageLoaded，removed，
 _this = this; 
 var uri = new Windows.Foundation.Uri（authUrl）; 
 
 Windows.System.Launcher.launchUriAsync（uri）
}; 
 
 return WinRT; 
}）（Dropbox.AuthDriver.BrowserBase）; 
  
请注意，我们再次提及我们的自定义协议。
 
 
 
步骤＃4：使用dropbox 
 
 
 
在helpers.js中会找到一个名为 sync ，用于
 
 
 
 
 
检查用户是否已经通过身份验证。如果不是这样，我们会将他重定向到Dropbox。
 
 
下载用户的联系人数据并将其登录到控制台。
 
 
 
 
 
你基本上只需要使用 MyHelpers.dropbox.getClient（）并与生成的客户端进行交互。它将返回 dropbox客户端的正确实例
 
 
 
最后字词
 
 
 
希望有所帮助！ 
您可以在这里找到客户端的可用方法： http://coffeedoc.info/github/dropbox/dropbox-js/master/classes/Dropbox/Client.html#readFile-Instance  
 
I have attempted to create a Phonegap app supporting both Android and Windows8 for the Dropbox Javascript Datastores API that makes use of the example provided here: https://github.com/dropbox/cordova-datastores-example

When I build and run the Android app, it runs perfectly on the Android tablet. But when I run the app created for Windows8, an error is displayed: The app couldn't navigate to ... because of this error: FORBIDFRAMING. And then nothing happens afterwards. 

I haven't been able to find an alternative to using a frame. I would like to know, if there is a way to run the Windows8 app successfully of this example, and where I would change the example to replace the frame. (Or, if there is another way to auth a user sign in so that I don't have to use the frame.)

Thanks.
解决方案
Premise

This is a hacky solution which will probably be ported to a proper Pull Request against dropbox-js:

Preparation:


Download the dropbox-js client from here and put it into project's js folder.
Ensure that it is listed in your "Solution Explorer". If it isn't, right click on the folder and add it via "Add -> Existing Item...".
Add dropbox.js to your default.html.
Create a new file. I called it helpers.js and add it to your default.html.
Open your package.appxmanifest file and declare a custom protocol. (Declarations -> Select protocol from the drop down -> Give it a name (e.g. myapp))
Go to the dropbox app console and register a new application.
Add a Redirect URI to the registered app: myapp://dropbox. Note that myapp references the custom protocol.


Step #1: Add helpers

Add the following content to the helpers.js:
http://pastebin.com/qpZbv7YG

Step #2: Add support for the protocol handler

As we added the custom protocol to our app and the redirect uri to dropbox, we need to handle
the call from dropbox.  your default.js
app.addEventListener("activated", function (args) {
  if (args.detail.kind === activation.ActivationKind.protocol) {
    // the application has been called via the custom protocol

    var requestUri = args.detail.uri.rawUri
      , params     = Dropbox.Util.Oauth.queryParamsFromUrl(requestUri)

    AppHelpers.dropbox.setParams(params)
  } else if (args.detail.kind === activation.ActivationKind.launch) {
    /* you should have this alread in place */
  }
})


Step #3: Add a custom AuthDriver to dropbox-js

Open dropbox.js and find the line: 
  Dropbox.AuthDriver.Cordova = (function (_super) {
Paste the following code just above that line:
Dropbox.AuthDriver.WinRT = (function (_super) {
  __extends(WinRT, _super);

  function WinRT(options) {
    WinRT.__super__.constructor.call(this, options);
  }

  WinRT.prototype.url = function () {
    return 'myapp://dropbox';
  };

  WinRT.prototype.doAuthorize = function (authUrl, stateParam, client, callback) {
    var authHost, browser, onEvent, promptPageLoaded, removed,
      _this = this;
    var uri = new Windows.Foundation.Uri(authUrl);

    Windows.System.Launcher.launchUriAsync(uri)
  };

  return WinRT;
})(Dropbox.AuthDriver.BrowserBase);
Please note that there is again a reference to our custom protocol.

Step #4: Use dropbox

In the helpers.js you will find a function called sync which I use to 


check if the user is already authenticated. If that is not yet the case, we will redirect him to dropbox.
download the user's contact data and log it into the console.


You basically just have to use MyHelpers.dropbox.getClient() and interact with the resulting client. It will return a proper instance of the dropbox client

Final words

Hope that helps!
You can find available methods of the client here: http://coffeedoc.info/github/dropbox/dropbox-js/master/classes/Dropbox/Client.html#readFile-instance

                        
这篇关于Phonebox中的Dropbox Javascript Datastores API示例为Windows8应用程序提供了错误forbidframing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！