Sample - Facebook

Table of Contents

• Building the sample
• Prerequisites
• Key points
• Sample walkthrough

This sample demonstrates redirecting HTTP requests and using Facebook Authentication, Facebook JavaScript SDK to login the user and show his photos.

Note

Supplied code is not representative for a well-designed, high-performance solution. It's written for simplicity and its purpose is to demonstrate a feature of Coherent UI.

Building the sample

The sample solution is already configured and you only have to compile and run it.

It uses a sample mini game framework that provides very basic functionality.

The output will be in the Coherent/Samples/UI/bin directory.

Prerequisites

This sample builds upon the Input in 2D sample and assumes that you understand it.

Key points

1. When the view is created iterception of URL requests via Coherent::UI::View::InterceptURLRequests is activated;
2. The ViewEventListener overrides Coherent::UI::ViewListener::OnURLRequest
3. Coherent::UI::ViewContext is initialized with cookies support

Sample walkthrough

Create a view context, enabling support for cookies.

Coherent::UI::ContextSettings ctxSettings;
ctxSettings.AllowCookies = true;
Coherent::UI::ViewContext* context
    = contextFactory->CreateViewContext(ctxSettings, &listener);

Using coui:// for cookies allows loading and saving of cookies via Coherent::UI::FileHandler.

When the view is created interception of URL requests is activated:

virtual void OnViewCreated(Coherent::UI::View* view)
{
    m_View = view;
    m_View->SetFocus();
    m_View->InterceptURLRequests(true);
}

This forces all URL requests to go through the Coherent::UI::ViewListener::OnURLRequest method allowing to allow / deny / redirect requests.

As explained by the Facebook documentation to obtain an access token for a user you have to

1. Open https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_FACEBOOK_APP_LOGIN_URL&response_type=token
2. After the user authorizes your application, the view will be redirected to https://www.facebook.com/connect/login_success.html#access_token=USER_ACCESS_TOKEN

Here is the acturl OnURLRequest handler that handles this redirection:

    virtual void OnURLRequest(Coherent::UI::URLRequest* request)
    {
        size_t length = m_FacebookAppURL.size();
        const wchar_t* url = request->GetURL();
        if (m_FacebookAppURL.compare(0, length, url, length)
            == 0)  // m_FacebookAppURL is a prefix of url
        {
            // change the url, keeping the all parameters intact
            std::wstring redirectURL = m_LocalAppURL;
            redirectURL += (url + length);
            request->SetURL(redirectURL.c_str());
            return;
        }
    }

The HTML and Javascript code for this sample is in Coherent/Samples/UI/bin/html/facebook.html.

If there is no hash part in the URL the sample shows a login button. When the button is clicked the view will be redirected to https://www.facebook.com/dialog/oauth with all the appropriate arguments, requesting client access token, signed request, refresh code to be returned and access to the user's photos.

var button = $('<button id="login">Facebook Login</button>').button().click(function () {
    var path = 'https://www.facebook.com/dialog/oauth?';
    var queryParams = {
        client_id: appID,
        redirect_uri: appURL,
        response_type: 'token,signed_request,code',
        scope: 'user_photos'
    };
    var url = path + $.param(queryParams);
    // redirect the view to the facebook authorization dialog
    window.location.href = url;
});

Then the users authorizes your application, the view will be redirected to YOUR_FACEBOOK_APP_LOGIN_URL::access_token=.... This redirection is handled by EventViewListener::OnURLRequest and the view is redirected to coui://html/facebook.html::access_token=.... The page detects that it has been loaded with the access_token and loads the Facebook JavaScript SDK asynchronously.

(function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "http://connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

When the SDK is loaded, attach handlers to the auth.LoginResponse events and initialize the SDK with the provided access token

// Init the SDK upon load
window.fbAsyncInit = function() {
    // listen for and handle auth.statusChange events
    FB.Event.subscribe('auth.statusChange', function(response) {
        if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            // request users' first name and profile picture
            FB.api('/me?fields=picture,first_name', function(me){
                $('#name').html(me.first_name);
                SetPortrait(me);
            });
        }
    })

    FB.Event.subscribe('auth.statusChange', function(response) {
        if (response.authResponse) {
            // request the first 12 photos that the user has been tagged in
            // take the URLs of the thumbnail and the real photo
            FB.api('/me/photos?fields=id,picture,source&limit=12', CreatePhotosCircle);
        }
    });

    // parse the authorization response details from the URL
    var parsed = parseAuthorization(window.location.href);
    // convert to FB authResponse
    var auth = {
        accessToken : parsed.access_token,
        signedRequest : parsed.signed_request,
        expiresIn : parsed.expires_in,
        code: parsed.code
    };
    FB.init({
        appId      :  appID,
        authResponse: auth,
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : false  // parse XFBML
    });
}

The rest of the sample creates a rotating 3D circle of the user's photos and shows a photo when its thumbnail is clicked.