网络移动应用Facebook OAuth

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.