Vishal Rajpal: PhoneGap and Gigya API Implementation

I was stuck regarding facebook implementation through PhoneGap. Though Phonagap provides a plug-in but you need to have facebook application installed on your device and that created a question for me. So here is it with the implementation of childBrowser PhoneGap plugin and the GIGYA API.
Initial Steps
1. Do have a registered Gigya account. you will get a API KEY and the site which you are adding needs to be a valid server as you will be hosting a small html page.
2. Create a new phonegap project.
3. Implement the childBrowser Plug-I. This post helped me as I was implementing it for the first time
http://simonmacdonald.blogspot.com/2011/09/phonegap-android-childbrowser-revamp.html

4.  Here is the code....

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Child Browser Example</title>
    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.min.js"></script>
    <script src="jquery.mobile-1.0a1.min.js"></script>
    <script type="text/javascript" charset="utf-8">

    function init(){
        document.addEventListener("deviceready", onDeviceReady, false);
        gigya.services.socialize.addEventHandlers({}, {
            onLogin:DisplayEventMessage,
            onConnectionAdded:DisplayEventMessage,
            onConnectionRemoved:DisplayEventMessage
           }
        );
    }

    function DisplayEventMessage(eventObj) {
        alert(eventObj.eventName + " event happened");
    }

    function onDeviceReady() {
        alert("PhoneGap is ready");
    }

    function locationChanged(newurl)
    {
        //alert("The JS got this url = " + newurl);
        console.log(newurl);
       var access=newurl.split("#");
       var token=access[1].split("=");
       //alert(token[0]);
       if(token[0]=="access_token")
       {
//Status URL...Through which status on facebook will be set
var statusurl="https://socialize.gigya.com/socialize.setStatus?status=welcome&oauth_token="+token[1];
            //window.open(statusurl);
            localStorage.accessToken=token[1];
            window.plugins.childBrowser.close();
            window.location="Messages.html";
            console.log(statusurl);

}

    }

    function openNew(statusurl)
    {
        alert(statusurl);
        window.plugins.childBrowser.openExternal(statusurl);
    }
    function closed() {
        alert("The JS got a close event");
    }

    function showPage(locbar) {
        window.plugins.childBrowser.onLocationChange = locationChanged;
        window.plugins.childBrowser.onClose = closed;
        var url="https://socialize.gigya.com/socialize.login?client_id=yourGigyaAPIKEY&redirect_uri=http:yourSite/yourPage.html&x_provider=facebook&response_type=token";
        showBrowser(url,locbar);
    }

    function showBrowser(url,locbar)
    {
        window.plugins.childBrowser.showWebPage(url, {showLocationBar: locbar});

    }
    </script>
</head>
<body onload="init()" id="stage" class="theme">
    <a href="#" class="btn large" onclick="showPage(true); return false;">Login to Facebook</a></p>

</body>
</html>

So, thats it.. you don't need to have a facebook app installed on your device..
Will come up with more things on this.
Any suggestions gracefully accepted....

Vishal Rajpal

Friday, December 9, 2011

PhoneGap and Gigya API Implementation

1 comment: