authenticate your site using google friend connect – api

in my previous article http://www.thinkdiff.net/?p=430 i described how to add google friend connect gadget in your site. in this article i am describing how you will fully authenticate your site by integrating google friend connect.

suppose your site has a default authentication system. but for new users who doesn’t want to register, how could you authenticate him. one of the solution of this problem is google friend connect.

gfc-signin

step 1: visit http://www.google.com/friendconnect/ after login setup a new site. (i described in my previous article)

step 2: now download rpc_relay.html and canvas.html and upload to the root directory.

step 3: after setting site’s configuration click “For Developers”. you’ll see javascript api code there. now copy paste it.

gfc-2

step 4: suppose your login file name is login.php. now place below code or the code you copy from javascript api in the tag of this login.php.

<head>;
<!-- Load the Google AJAX API Loader -->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>

<!-- Load the Google Friend Connect javascript library. -->
<script type='text/javascript'>
    google.load('friendconnect', '0.8');
</script>

<!-- Initialize the Google Friend Connect OpenSocial API. -->
<script type='text/javascript' src='google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.initOpenSocialApi({
        site: 'XXXXXXXXXXXXXXXXXXX',

        onload: function(securityToken) {
            /* your callback, which is passed a security token */
            initGFC();
        }
    });
</script>
</head>

replace ‘XXXXXXXXXXXXX’ by your site id. and in onload function specify a callback function. here i specified intiGFC().

step 5: now write this code within tag.

<body>
    <script type='text/javascript'>
    function initGFC() {
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest('OWNER'), 'owner_data');
        req.add(req.newFetchPersonRequest('VIEWER'), 'viewer_data');
        req.send(onData);
    };

    function onData(data) {
        if (!data.get('owner_data').hadError()) {
            var owner_data = data.get('owner_data').getData();
            document.getElementById('site-name').innerHTML = owner_data.getDisplayName();
        }

        var viewer_info = document.getElementById('viewer-info');
        if (data.get('viewer_data').hadError()) {
            google.friendconnect.renderSignInButton({ 'id': 'gfc' });
            document.getElementById('gfc').style.display = 'block';
            viewer_info.innerHTML = '';
        } else {
            window.location.href = '/account.php';   //specify the url after logged in user will redirect to. here i use account.php.
        }
    };
    </script>
    The name of this site is <strong><span id='site-name'></span></strong>
    <div id='gfc'></div>
</body>

step 6: if your user homepage is account.php then copy paste the above all code in account.php and changed below part. just onData(data) method.

function onData(data) {
    if (!data.get('owner_data').hadError()) {
    var owner_data = data.get('owner_data').getData();
    document.getElementById('site-name').innerHTML = owner_data.getDisplayName();
    }

    var viewer_info = document.getElementById('viewer-info');
    if (data.get('viewer_data').hadError()) {
        window.location.href = '/login.php';
        viewer_info.innerHTML = '';
    } else {
        document.getElementById('gfc').style.display = 'none' ;
        var viewer = data.get('viewer_data').getData();
        viewer_info.innerHTML = 'Hello, ' + viewer.getDisplayName() + ' ' +
        '<a href='#' onclick='google.friendconnect.requestSettings()'>Settings</a> | ' +
        '<a href='#' onclick='google.friendconnect.requestInvite()'>Invite</a> | ' +
        '<a href='#' onclick='google.friendconnect.requestSignOut()'>Sign out</a>';
    }
};

by this way you can fully authenticate your site using google friend connect.

About mahmud ahsan

Programming is my passion from high school. I always looking for innovating new ideas and making them real application. I love mobile application and game development as well as web development. Having 4+ years web development experience and 6+ years mobile application development experience on different platform and business on it. My Mobile Apps Portfolio: iThinkdiff.net Mobile Apps

, , ,

3 Responses to authenticate your site using google friend connect – api

  1. Lenin March 19, 2009 at 8:33 pm #

    Would be very helpful :)

  2. Social Application Development Company December 29, 2010 at 2:33 pm #

    awesome, really helpful post

  3. raj November 15, 2011 at 6:07 pm #

    very helpfull can i acess email