I'm making a facebook canvas app (a game) and I want my players to use links with url parameters that link to different areas in the game, i.e.
https://apps.facebook.com/mgatlandtestapp?level=emeraldhillzone
How do I access the level=emeraldhillzone information in my app (either client-side with javascript in an iFrame, or server-side as a node.js application)
Things I've tried so far:
This 4-year-old answer says it's possible to in the client-side code but doesn't say how (sorry if I'm missing something obvious! window.location gives the location of my heroku server, not the facebook url.)
Some of the facebook documentation made me think this would work:
Use a url in the form https://apps.facebook.com/mgatlandtestapp?app_data=yourDataHere then on the server side get the signed request sent to the server and it will contain an app_data field.
However when I did this, the signed request did not contain an app_data field.
After reading more, I think the app_data thing only works if the app is being loaded within a facebook Page Tab, not a facebook Canvas Page.
Facebook sends an initial POST to your app, which includes the url parameters. You can access the url parameters from in that POST request.
I used this url to load the page:
https://apps.facebook.com/mgatlandtest/?level=emeraldhillzone
I used this code in my node.js server app to serve the request
app.post('/*', function(request, response) {
console.log('url parameters:');
console.log(request.query);
response.redirect('/');
});
The output in the node console was:
url parameters:
{ level: 'emeraldhillzone' }
You could then use the parameters to redirect to a different page.
This was actually really simple, once I got past all the distracting misinformation. The key was searching for 'deep linking' (instead of 'url parameters'), which brought up this answer
Related
I am using AngularJS in the client side combined with ExpressJS in the server side.
When pages are loaded in the browser all works fine there: clicks on the various button and differents angular routers are okay.
The problems come when a generated url need to be put in the address bar manually.
Here are the details of this scenario:
the server generates a URL (e.g. "http://localhost:9000/details?card=5" and sends it via email
I receive the email, open the url from it
the browser opens on "/" instead of staying on "/details" internal/client route
On the details.controller.js of details.html (client side) I can see that the request for card number 5 is sent and arrives to the server (so I am almost sure that the details.html page is loaded) but angular routing must be very quick relocating the user view on "/".
I am not sure on the exact flow, but I am assuming that:
click on the link in the email
the OS or email client redirect "http://localhost:9000/details?card=5" to the browser
the browser receives "http://localhost:9000/details?card=5" and performs a GET to the server
the server receives the GET above
maybe the server is calling "/index.html" since express static is configured as:
app.use(express.static(path.join(__dirname, config.client.path), {
index: 'index.html',
}))
Maybe I am little confusing something, the project is not mine and I have not so many skills in (the very old) AngularJS.
Could someone explain to me how the server could "say" to the client to move on the angular "/detail" route (including the query param card)?
I am attempting to create a mobile phone application with a javascript / AngularJS frontend that communicats with a node js / express js backend.
I believe that I have properly enabled cors but am not completely certain that it has been done in the correct manner. None of the frontend files are hosted on a server (not even a local one). The node js server is hosted online as well as a mongo db server that it interacts with.
So far I am able to make POST's to my API that create a new user and reflect this in the database. I also have a login that POST's to an authentication function which returns a JSON Web Token (JWT). From here I should be able to put the JWT in the header of requests with the key "Authorization" to get access to the other parts of the API (eg: GET /currentUser).
Attempting to GET /currentUser when the JWT is in the header with postman returns all of the expected data. When I attempt to perform the same GET from my frontend (with JWT in header), I get the following OPTIONS response via firebug: "Reload the page to get source for: MyHostedApi/api/users"
I'm wondering if this is some kind of cors issue, incorrectly set authorization header, bad formatting of the $http.get, etc. Any help is greatly appreciated! I'd be glad to provide any parts of the source that are relevant.
This is what my GET looks like:
$http.get("MyHostedApi/api/users/currentUser")
.success(function(response) {
$scope.userData = response.data.firstName;
});
I have a simple application that I'm hosting on bluemix.
I have set up a Single Sign On service for my application and paired it with facebook. I can successfully log in using the SSO service from bluemix and then I want to check that status of my login (I am logged in or not).
function CheckStatus(){
console.log("I'm trying to check the status");
FB.getLoginStatus(function(response) {
console.log("Here is the status response:");
console.log(response.status);
});
}
I trigger this piece of code with a simple button defined before. Whenever I click the code I get the following error:
Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App's settings. It
must match the Website URL or Canvas URL, or the domain must be a
subdomain of one of the App's domains.
I had a look at a number of posts on stackoverflow about this and none of them seem to work. My understanding is that there is something wrong with the configuration of my application but I can't figure out what.
Below is my configuration:
And this is the url my application is trying to reach when I try to get my login status:
https://www.facebook.com/connect/ping?client_id=913147408730179&domain=fncsecuritydemo.mybluemix.net&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FrFG58m7xAig.js%3Fversion%3D41%23cb%3Df29b5c6b3%26domain%3Dfncsecuritydemo.mybluemix.net%26origin%3Dhttp%253A%252F%252Ffncsecuritydemo.mybluemix.net%252Ff21657f8dc%26relation%3Dparent&response_type=token%2Csigned_request%2Ccode&sdk=joey
I am out of ideas about what I should be trying next. Any help is very much apreaciated. Let me know if you need more info.
The answer for this error lies in the Valid OAuth redirect URIs that fall under the Advanced tab from settings.
While setting up the application profile on facebook I have set the Valid OAuth redirect URIs to an URL generated by bluemix.
In order to received response on my application I had to add my app url in there as well. Rookie mistake.
I'm developing a Facebook Page Tab App - using Javascript SDK - which, on load, should show the contents of the signed_request posted by Facebook to my App. This signed_request should contain the "app_data" parameter, which is passed in the URL, like this:
http_//www.facebook.com/pages/MyPage-Community/SOME_ID?sk=MY_APP_ID&app_data=this_is_my_data
The link:
MyPage-Community is a temporary Fan Page, which is published
SOME_ID is, I guess, the page ID
MY_APP_ID contains the app ID given by Facebook
app_data=this_is_my_data (what I need)
Notes:
The app itself is NOT in Development mode, so it's publicly available
I'm using localhost to test the app
I've tested with the developer account AND with a real regular account (set as App Tester, thus authorized)
Now, in the app code (javascript), I'm calling FB.getLoginStatus(...), which gives me the authResponse object that contains, among other stuff, the signedRequest property - this one, when decoded, shows me these key/value pairs:
[algorithm] => HMAC-SHA256
[code] => SOME_CODED_STRING
[issued_at] => 1403183583
[user_id] => XXXXXXXXXXXXXXX (my user id)
As you can see, the app_data property is not present as it was supposed to - as page should too, but I don't really need that one. Any ideas why this is happening? Can't find an answer anywhere. Could it be because I'm using localhost? Everything else seems to be working (although I do get an error when I try to "like" the page from within the app).
Thanks!
I think you're confusing the signed request which is POST'ed to your app and the signedRequest parameter of the response to the JS SDK's getLoginStatus method - they're not the same thing but are named similarly because they have a similar purpose
The JS SDK returns values more or less equivalent to what you receive on a Facebook canvas app, but it's not the same source of data or delivery mechanism, and won't have the same fields
To read the actual signed request with the page and app_data, you need to do it server side - instructions for which are here: https://developers.facebook.com/docs/facebook-login/using-login-with-games#checklogin (It applies to page tab apps as well as canvas app)
I am using the google auth but keep getting an origin mismatch. The project I am working has sub domains that are generated by the user. So for example there can be:
john.example.com
henry.example.com
larry.example.com
In my app settings I have one of my origins being http://*.example.com but I get an origin mismatch. Is there a way to solve this? Btw my code looks like this:
gapi.auth.authorize({
client_id : 'xxxxx.apps.googleusercontent.com',
scope : ['https://www.googleapis.com/auth/plus.me',
state: 'http://henry.example.com',
'https://www.googleapis.com/auth/userinfo.email', 'https://www.googleapis.com/auth/userinfo.profile'],
immediate : false
}, function(result) {
if (result != null) {
gapi.client.load('oath2', 'v2', function() {
console.log(gapi.client);
gapi.client.oauth2.userinfo.get().execute(function(resp) {
console.log(resp);
});
});
}
});
Hooray for useful yet unnecessary workarounds (thanks for complicating yourself into a corner Google)....
I was using Google Drive using the javascript api to open up the file picker, retrieve the file info/url and then download it using curl to my server. Once I finally realized that all my wildcard domains would have to be registered, I about had a stroke.
What I do now is the following (this is my use case, cater it to yours as you need to)
On the page that you are on, create an onclick event to open up a new window in a specific domain (https://googledrive.example.com/oauth/index.php?unique_token={some unique token}).
On the new popup I did all my google drive authentication, had a button to click which opened the file picker, then retrieved at least the metadata that I needed from the file. Then I stored the token (primary key), access_token, downloadurl and filename in my database (MySQL).
Back on step one's page, I created a setTimeout() loop that would run an ajax call every second with that same unique_token to check when it had been entered in the database. Once it finds it, I kill the loop and then retrieve the contents and do with them as I will (in this case I uploaded them through a separate upload script that uses curl to fetch the file).
This is obviously not the best method for handling this, but it's better than entering each and every subdomain into googles cloud console. I bet you can probably do this with googles server side oauth libraries they use, but my use case was a little complicated and I was cranky cause I was frustrated at the past 4 days I've spent on a silly little integration with google.
Wildcard origins are not supported, same for redirect URIs.
The fact that you can register a wildcard origin is a bug.
You can use the state parameter, but be very careful with that, make sure you don't create an open redirector (an endpoint that can redirect to any arbitrary URL).