I need to access MySQL database which is located in remote server. I need to fetch data and display it in Windows 8 App (HTML/Javascript). Is there any API or JS framework available which can access remote database.
I don't want to store database in windows 8 app, I just need to retrieve it from remote.
Create web service and consume it in your application.
Not sure why the previous post is getting downvoted, but here's a deeper explanation:
As per the design models put forward by Microsoft in its examples and the need for highly-responsive applications, The preferred method for getting data into Windows 8 apps is via web services. This allows you to do things like use the async/await keywords so that your application can stay responsive while getting data. There's very little reason to use a database over the web service.
You should check here for a data usage example with the HTML/Javascript app:
http://msdn.microsoft.com/en-us/library/windows/apps/hh974582.aspx
you can use WCF Service this best way.
I used MySQL connector look this example:
https://blogs.oracle.com/MySqlOnWindows/entry/how_to_using_connector_net
i have not tested on a remote database so far, but works on localhost
Well I recently did some tweaking with Windows store apps and Php and this is what I've come up with it's not much but it can give you a start up.
You can use MySQL with Php and then echo out the data. This is from where JavaScript / HTML windows store can fetch the data by using JQuery.
$.ajax({
type: "GET" //POST GET your choice
url: " " //paste the php script that retrieves the data from the database
success: function (output){
$('#myDiv').append(data);
}
});
Please do keep in mind this is just an unauthorized way of accessing data from MySQL through PHP.
The HTML can be for default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script src="/Scripts/jquery-2.0.3.js"></script>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- test references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/Scripts/myScript.js"></script>
</head>
<body>
<div id="myDiv">
</div>
</body>
</html>
Related
I got a basic static website that I want to implement Goatcounter on. I put the following tracking script on the index page.
<script data-goatcounter="https://MY_SITE.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
But when trying to load the file locally, (not on a sever, just as a file) Firefox and Chromium both fail to load it, with the error:
GET file://gc.zgo.at/count.js net::ERR_INVALID_URL
Maybe the issue lies in running it locally?
Edit: I've disabled all ad/tracking blockers in my browser for testing.
The protocol in the script was missing.
The wrong way:
<script data-goatcounter="https://MY_SITE.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
The right way:
<script data-goatcounter="https://MY_SITE.goatcounter.com/count" async src="https://gc.zgo.at/count.js"></script>
I am currently implementing Adyen Web Drop-in integration but ran into a problem testing it on staging.
From the Adyen developer console I can see the API request and response for the session endpoint which returns the sessionData payload as expected.
We then pass sessionData into a page which renders the form correctly.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.js"
integrity="sha384-LoKEanRPljHoEsT5o+grBn8hgVzoPevwGvRd+gOp/2Xgc4Jx2FQkx29092SKDdeY"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.css"
integrity="sha384-DB96UxMFf+ytuAxtum6/9TOoG/y+vUDFbqolCb7OcQvBA+qSrGaRrl81nMADo/+9"
crossorigin="anonymous">
</head>
<body>
<div id="dropin-container"></div>
<script type="text/javascript">
(async () => {
let checkout = await AdyenCheckout(${partnerJsonParameters?string});
checkout.create('dropin').mount('#dropin-container');
})();
</script>
</body>
</html>
Upon filling in the form with a test credit card number and clicking Pay I see two requests in the browser network pane, CORS pre-flight which is fine, and then the second request fails with
{"status":403,"errorCode":"010","message":"Not allowed [This error message is only provided on TEST, this error will be a 500 Internal Error on LIVE.]","errorType":"security"}
I have found two articles on this error, https://www.adyen.help/hc/en-us/articles/360014216000-Why-do-I-receive-a-403-or-010-Not-Allowed-error- and https://docs.adyen.com/development-resources/error-codes#010-not-allowed but the roles seem fine.
I have verified that both the session from server side and checkout config are configured with "test" environment.. any pointers on what else I can try?
After a bit of back and forward with Matthew here's the solution.
We have seen this error happening before on the test environment, and
the best way to resolve is to use another API user. Would it be
possible to create a new API user as described here, or use another of
the existing ones? Using the API Key and Client Key from the new user
should resolve the issue.
Is it possible to download, modify, and upload the JSON representation of a Google doc via an API?
I'm trying to write a server side app to do this. By Google doc, I mean files underlying the rich-text editing features as per https://docs.google.com.
As far as I've understood, the RealTime API should allow me to download the json representation of a doc with a GET request, and upload a new JSON file with a PUT request. From the documentation it sounds ideal. However, responses from GET requests contain null in the data field. I understand that this is because my OAuth2.0 app is not the same app that created the document. I'm not sure if/how I could fix this if I want the files to be treated the same as any other Google doc (as defined above).
The Drive API allows me to download a file with a GET request, however, the supported mime-types do not include JSON. I am aware that I could try and convert them (e.g. via a library like the excellent pandoc) but this require lossy and unpredictable processing to try to guess at what Google's document representation might be via e.g. parsing MS Word documents (ew).
Is there a way to directly import & export docs in Google's own JSON representation?
You may want to try using the Realtime API in an unauthenticated mode, called in-memory mode which allows you to get started with the API without any configuration or login.
To build An Unauthenticated App, you may visit and try the steps given in Google Realtime API Quickstart. You can simply copy the following code into a new file and then open it in a browser.
<!DOCTYPE html>
<html>
<head>
<title>Google Realtime Quickstart</title>
<!-- Load Styles -->
<link href="https://www.gstatic.com/realtime/quickstart-styles.css" rel="stylesheet" type="text/css"/>
<!-- Load the Realtime API JavaScript library -->
<script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
<main>
<h1>Realtime Collaboration Quickstart</h1>
<p>Welcome to the quickstart in-memory app!</p>
<textarea id="text_area_1"></textarea>
<textarea id="text_area_2"></textarea>
<p>This document only exists in memory, so it doesn't have real-time collaboration enabled. However, you can persist it to your own disk using the model.toJson() function and load it using the model.loadFromJson() function. This enables your users without Google accounts to use your application.</p>
<textarea id="json_textarea"></textarea>
<button id="json_button" class="visible">GetJson</button>
</main>
<script>
// Load the Realtime API, no auth needed.
window.gapi.load('auth:client,drive-realtime,drive-share', start);
function start() {
var doc = gapi.drive.realtime.newInMemoryDocument();
var model = doc.getModel();
var collaborativeString = model.createString();
collaborativeString.setText('Welcome to the Quickstart App!');
model.getRoot().set('demo_string', collaborativeString);
wireTextBoxes(collaborativeString);
document.getElementById('json_button').addEventListener('click', function(){
document.getElementById('json_textarea').value = model.toJson();
});
}
// Connects the text boxes to the collaborative string.
function wireTextBoxes(collaborativeString) {
var textArea1 = document.getElementById('text_area_1');
var textArea2 = document.getElementById('text_area_2');
gapi.drive.realtime.databinding.bindString(collaborativeString, textArea1);
gapi.drive.realtime.databinding.bindString(collaborativeString, textArea2);
}
</script>
</body>
</html>
Hope that helps!
I'm new to this area and I'm developing a HTML5 mobile app that calls a restful webservices api and exchange JSON objects.
I want to authenticate the client once and give a a key/token that can be used afterwards until a pre-defined expiration date. I have 4 questions:
How can I secure the serverside webservices api? any tools whatsoever?
Can I use the local storage to store the key/token?
What are the phonegap security tools I can use for the client side?
How can I use OAUTH in this case?
How can I secure the serverside webservices api? any tools whatsoever?
OAuth may be overkill for your need, verify that you really need to use such a powerful (and complex) standard.
Two examples of PHP server side software that you may use:
Solberg-OAuth
SimpleSAMLphp
Can I use the local storage to store the key/token?
Yes! Be aware that you MUST use the OAuth 2.0 implicit grant flow in order to obtain the token at the client side.
What are the phonegap security tools I can use for the client side?
ChildBrowser is a plugin to open a separate browserwindow for the authentication process.
I've written a javascript library JSO that can do OAuth 2.0 for you. Other libraries exists as well.
https://github.com/andreassolberg/jso
How can I use OAUTH in this case?
Using JSO with Phonegap and ChildBrowser
Using JSO to perform OAuth 2.0 authorization in WebApps running on mobile devices in hybrid environment is an important deployment scenario for JSO.
Here is a detailed instruction on setting up JSO with Phonegap for iOS and configure OAuth 2.0 with Google. You may use it with Facebook or other OAuth providers as well.
Preparations
Install XCode from App Store, and iOS development kit
Install Phonegap 2.0, Cordova 2.0
Setup App
To create a new App
./create /Users/andreas/Sites/cordovatest no.erlang.test "CordovaJSOTest"
Install ChildBrowser
The original ChildBrowser plugin is available here.
https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser
However, it is not compatible with Cordova 2.0. Instead, you may use this fork of ChildBrowser which should be working with Cordova 2.0:
https://github.com/Shereef/ChildBrowserOnCordova200
What you need to do is to copy these files:
https://github.com/Shereef/ChildBrowserOnCordova200/tree/master/ChildBrowserOnCordova200/Plugins
in to your WebApp project area, by using drag and drop into the Plugins folder in XCode.
Now you need to edit the file found in Resources/Cordova.plist found in your WebApp project area.
In this file you need to add one array entry with '*' into ExternalHosts, and two entries into Plugins:
ChildBrowser -> ChildBrowser.js
ChildBrowserCommand -> ChildBrowserCommand
as seen on the screenshot.
(source: erlang.no)
Setting up your WebApp with ChildBrowser
I'd suggest to test and verify that you get ChildBrowser working before moving on to the OAuth stuff.
In your index.html file try this, and verify using the Simulator.
<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>
Setting up JSO
Download the latest version of JSO:
https://github.com/andreassolberg/jso
The documentation on JSO is available there as well.
The callback URL needs to point somewhere, and one approach would be to put a callback HTML page somewhere, it does not really matter where, although a host you trust. And put a pretty blank page there:
<!doctype html>
<html>
<head>
<title>OAuth Callback endpoint</title>
<meta charset="utf-8" />
</head>
<body>
Processing OAuth response...
</body>
</html>
Now, setup your application index page. Here is a working example:
<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>
How can I secure the serverside webservices api? any tools whatsoever?
Depends on which language the web service is written, php has zend framework for creating web services / nusoap etc. So all of the languages do provide info on how to secure the webservice.
Can I use the local storage to store the key/token?
Yes you can use local storage look at the phonegap documentation
What are the phonegap security tools I can use for the client side?
I dont think so there are any but you can search for some plugins or create your own plugin. Depends on what kind of security do you want to implement.
How can I use OAUTH in this case?
Here is a library for OAuth and this seems to be helpful. You can create a phone gap plugin to interact with the library or use a javascript oauth library(its with sample also).
I finished Ryan Bates #348 video for creating a JSON API using the rails-api gem. I have it working as in the example. However, in his example he has the page that calls the API in the same project. My goal is to separate out the client app from the API app.
I created a second rails app that simply includes the page that does a JSON request for the API data and a post when submitting the form. I have the client app running on localhost:3000 and the API running on localhost:4000.
Below is the client side code. It successfully submits a new deal record, but the
GET doesnt load the list of deals. When looking in the logs it appears it is requesting it as HTML. When the page was apart of the same API project, the same code was making the call as JSON in the logs.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
function addDeal(deal) {
$('#deals').append('<li>' + deal.name + '</ul>');
}
$('#new_deal').submit(function(e) {
$.post('http://localhost:4000/deals', $(this).serialize(), addDeal);
this.reset();
e.preventDefault();
});
$.getJSON('http://localhost:4000/deals', function(deals) {
$.each(deals, function() { addDeal(this); });
});
});
</script>
<div id="container">
<h1>My Deals</h1>
<form id="new_deal">
<input type="text" name="deal[name]" id="deal_name">
<input type="submit" value="Add">
</form>
<ul id="deals"></ul>
</div>
Because of Cross Origin Policy you have following options:
Use jsonp (don't do this since you have your server :) check below )
Manage Cross Origin Resource Sharing on server, recently I wrote answer here how to achieve this
You could use rails ActiveResource::Base to conect to your api, but it may be slow, and you would repeating yourself unless there is some presentation logic you need on backend. BTW, check Nibbler gem it may be somewhat better... it really depends what you need to do in backend.
Anyhow. I would avoid approach 1, its kinda overhead especially if you want to POST, PUT or DELETE, and you can allows use option 2 if you have pure javascript app running as UI. But even if you are building JS agnostic app you always need a bit of backend processing so option 3 is probably something you'd prefer.