hello.js  is a client-side Javascript SDK for authenticating with OAuth2 (and OAuth1 with a oauth proxy) web services and querying their REST API's. HelloJS standardizes paths and responses to common API's like Google Data Services, Facebook Graph and Windows Live Connect.

Features:

Looking for more? HelloJS supports a lot more actions than just getting the users profile. Like, matching users with a users social friends list, sharing events with the users social streams, accessing and playing around with a users photos. Lets see if these whet your appetite ...

• Items marked with a ✓ are fully working and can be tested.
• Items marked with a ✗ aren't provided by the provider at this time.
• Blank items are work in progress, but there is good evidence that they can be done.
• Anything not listed i have no knowledge of and would appreciate input.

buyutucu pompa Spanish Fly

Source: adodson.com

1. REGISTER YOUR APP DOMAIN

Register your application with atleast one of the following networks. Ensure you register the correct domain as they can be quite picky

• FaceBook
• Windows Live (click on dashboard)
• Google +

2. INCLUDE JS FILES

<script class="pre" src="./dist/hello.all.min.js"></script>

3. HTML

Just add onclick events to call hello( network ).login(). Style your buttons as you like, i've used zocial css, but there are many other icon sets and fonts

<button onclick="hello( 'windows' ).login()">windows</button>

4. JAVASCRIPT

Add listeners for the user login

Lets define a simple function, which will load a user profile into the page after they signin and on subsequent page refreshes. Below is our event listener which will listen for a change in the authentication event and make an API call for data.

hello.on('auth.login', function(auth){

    // call user information, for the given network
    hello( auth.network ).api( '/me' ).success(function(r){
        var $target = $("#profile_"+ auth.network );
        if($target.length==0){
            $target = $("<div id='profile_"+auth.network+"'></div>").appendTo("#profile");
        }
        $target.html('<img src="'+ r.thumbnail +'" /> Hey '+r.name).attr('title', r.name + " on "+ auth.network);
    });
});

Configure hello.js with your client_id's and initiate all listeners

Now let's wire it up with our registration detail obtained in step 1. By passing a [key:value, ...] list into thehello.init function. e.g....

hello.init({ 
    facebook : FACEBOOK_CLIENT_ID,
    windows  : WINDOWS_CLIENT_ID,
    google   : GOOGLE_CLIENT_ID
},{redirect_uri:'redirect.html'});

hello.init({
    facebook : '359288236870',
    windows : '000000004403AD10'
});

hello( "facebook" ).login( function(){
    alert("You are signed in to Facebook");
});

hello( "facebook" ).logout(function(){
    alert("Signed out");
});

var online = function(session){
    var current_time = (new Date()).getTime() / 1000;
    return session && session.access_token && session.expires > current_time;
};

var fb = hello( "facebook" ).getAuthResponse();
var wl = hello( "windows" ).getAuthResponse();

alert(( online(fb) ? "Signed":"Not signed") + " into FaceBook, " + ( online(wl) ? "Signed":"Not signed")+" into Windows Live");

hello( "facebook" ).api("me").success(function(json){
    alert("Your name is "+ json.name);
}).error(function(){
    alert("Whoops!");
});

6. EVENTS

hello.on()

Bind a callback to an event. An event maybe triggered by a change in user state or a change in some detail.

hello.on( event, callback );

Example:

var sessionstart =  function(){
    alert("Session has started");
};
hello.on("auth.login",sessionstart);

hello.off()

Remove a callback, both event name and function must exist

hello.off( event, callback );

hello.off("auth.login",sessionstart);