Web Mobile Application Facebook OAuth - php

Question

I am trying to go through this sample https://github.com/blackberry/BB10-WebWorks-Samples/blob/master/Twitter-OAuth-1/README.md
Although, I keep getting the following error:
Error in getAuthorization: ReferenceError:Can't find variable: facebookOptions
Here is my code for my javascript OAuth.js
function initApp() {
try {
// facebook oauth setup
facebookOptions = {
clientId: '############',
clientSecret: '######################',
// we use a php script on a server because facebook doesn't allow for local:/// callbacks
// at this time. the php simply redirects us back to 'local:///index.html'
redirectUri: 'http://###########.com/redirect.php'
};
// here we check for query strings in window.location when the app loads. This is because facebook is calling back
// to our callbackUrl. When the app initializes, and there is a query string, it checks if the user
// authorized the app or not
var query = window.location.search;
authCode = null;
authCode = query.split('code=');
authCode = authCode[1] || null;
// we've got an auth code, let's exchange that for an access token
if (authCode !== null) {
getAccessToken();
}
} catch (e) {
alert('Error in initApp: ' + e);
}
}
// first, we get the user to authorize with the service and allow our app access
function getAuthorization() {
try {
showMessage('Contacting Facebook...');
window.location.replace('https://www.facebook.com/dialog/oauth?client_id=' + facebookOptions.clientId + '&redirect_uri=' + facebookOptions.redirectUri + '&scope=publish_stream,read_stream');
} catch (e) {
alert('Error in getAuthorization: ' + e);
}
}
// exchange our 'access code' for an 'access_token'
function getAccessToken() {
try {
var url = 'https://graph.facebook.com/oauth/access_token?client_id=' + facebookOptions.clientId + '&redirect_uri=' + facebookOptions.redirectUri + '&client_secret=' + facebookOptions.clientSecret + '&code=' + authCode;
$.ajax({
type: 'GET',
url: url,
success: function(data) {
var response = data;
// parse 'access_token' from the response
response = response.split('&');
accessToken = response[0].split('=');
accessToken = accessToken[1];
// get authenticated users' info for future use
getUserInfo();
},
error: function(data) {
alert('Error getting access_token: ' + data.responseText);
return false;
}
});
} catch (e) {
alert('Error in getAccessToken: ' + e);
}
}
// get users info (we're grabbing their full name for this sample)
function getUserInfo() {
try {
var url = 'https://graph.facebook.com/me?access_token=' + accessToken;
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(data) {
// data.name = users full name
showMessage('Hello ' + data.name + '!');
$('#buttonSetup').hide();
$('#afterAuth').show();
},
error: function(data) {
alert('Error getting users info: ' + data.responseText);
return false;
}
});
} catch (e) {
alert('Error in getUserInfo: ' + e);
}
}
// update the users status
function postToService() {
try {
var status = $('#inputBox').val();
if (status === '' || status === 'enter your status...') {
showMessage('You didn\'t enter anything to post :(');
return false;
} else {
showMessage('Updating status...');
var url = 'https://graph.facebook.com/me/feed?message=' + status + '&access_token=' + accessToken;
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
success: function(data) {
showMessage('Status updated!!');
$('#inputBox').val('enter your status...');
// display the updated news feed to the user
setTimeout(function() {
getFeed();
}, 200);
},
error: function(data) {
alert('Error updating status: ' + data.responseText);
return false;
}
});
}
} catch (e) {
alert('Error in postToService: ' + e);
}
}
// get users news feed
function getFeed() {
try {
showMessage('Getting news feed...');
var url = 'https://graph.facebook.com/me/feed?access_token=' + accessToken;
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(data) {
showMessage('Your news feed...');
var feed = data.data;
// clear the content div, and prepare to add new data to it
$('#content p').remove();
// show the last 4 items from the users news feed
// note: there are several objects that could be posted in a news feed. for simplicity
// we're only showing objects with a 'story' attribute
for (var i = 0; $('#content p').size() < 4; i++) {
if (typeof feed[i].story !== 'undefined') {
$('#content').append('<p>' + feed[i].story + '</p>');
}
}
// display the feed, after it's been parsed
$('#content').fadeIn();
},
error: function(data) {
alert('Error loading news feed: ' + data.responseText);
return false;
}
});
} catch (e) {
alert('Error in getFeed: ' + e);
}
}
// helper function for displaying a message to the user
function showMessage(msg) {
try {
if (!$('#message').is(':visible')) {
$('#message').show();
}
setTimeout(function() {
$('#message').html(msg);
}, 500);
setTimeout(function() {
$('#message').fadeOut(500, function() {
$('#message').html('');
});
}, 8000);
} catch (e) {
alert('Error in showMessage: ' + e);
}
}
the php redirect file on my web server is this:
<?php
$queryString = $_SERVER['QUERY_STRING'];
header("location: local:///index.html" . $queryString);
?>
I am not sure whether the problem is with the authorization in oauth.js or in the local redirect php file.

Answer 1

I have just updates all the OAuth samples to work in the newest SDK.
Get the updated sample from: https://github.com/blackberry/BB10-WebWorks-Samples
The problem is that the initApp function wasn't being executed. This is because the webworksready event wasn't being fired. Now that the samples have been update to reflect the new way of including the webworks.js file, this should no longer be an issue.