Sign In with LinkedIn and Twitter on Your Website

January 5, 2013 — Team Indies

LinkedIn and Twitter have become large in the social network world and both networks offering oAuth support. We developed a system to login with Twitter and LinkedIn. Nowadays web users not interested to filling the big registration forms. This script helps you to avoid registration forms, It’s is very useful and simple to integrate.

1) Sign In With Twitter

Some @Anywhere functionality doesn’t require the user to login to Twitter or authorize your site for access When user login and authorization is required, @Anywhere handles all of that for you out of the box.

The “Connect with Twitter” button provides a method for users to authenticate securely with Twitter, yielding your application with an access token for use in API calls.

Adding “Connect with Twitter” buttons to your application is easy: simply call T passing in a selector indicating where you want the button to appear, and call the connectButton method.

For example, the following will place a “Connect with Twitter” button into the element with an id of “login”:

<!DOCTYPE HTML>
<html>
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Anywhere Sample</title>
        <script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
	</head>
<body>
<span id="login"></span>
    <script type="text/javascript">  

      twttr.anywhere(function (T) {
        T("#login").connectButton();
      });    

    </script>
      </body>
</html>

@Anywhere provides an authComplete and signOut event that can be used to determine whether or not users of your web site or web application have logged in to Twitter and authorized your application for access.

Using the “Connect with Twitter” button it is possible to bind listeners for both the authComplete and signOut events via an object literal passed to the connectButton method. Listeners for the authComplete are passed the logged in user as a single argument.

<script type="text/javascript"> 
      twttr.anywhere(function (T) {    
        T.bind("authComplete", function (e, user) {
          // triggered when auth completed successfully
        });    

        T.bind("signOut", function (e) {
          // triggered when user logs out
        });    
      });     
</script>

For further information :- https://dev.twitter.com/docs/anywhere/welcome#login-signup

2) Sign In With LinkedIn

The LinkedIn JavaScript API makes it incredibly easy to let you customers authenticate using their LinkedIn account. You can then use that information to register them for your own site, identify them in a blog comment, or otherwise use this to streamline their experience. This provides you with increased registrations with minimal work.

The most important piece of data for you to capture and store is the LinkedIn member id. This is an application-specific unique identifier for every member. With this token, you can easily retrieve profile information about any of your users who have authenticated using Sign In with LinkedIn.

An alternative approach is using the JavaScript API to directly fetch the person’s information. You can then pass that back using either a web form, like above, or an AJAX call.

Place the following in your :

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: YOUR_API_KEY_GOES_HERE
  authorize: true
onLoad: onLoadLinkedIn

function onLinkedInLoad() 
{
   IN.UI.Authorize().params({"scope":["r_basicprofile", "r_emailaddress"]}).place();
   IN.Event.on(IN, "auth", loadFields);
}
function loadFields() 
{
   IN.API.Profile("me")
   .fields(["id,firstName,lastName,positions,emailAddress"])
   .result(function(me){
     profile = me.values[0];
     position = profile.positions.values[0];
     console.log(profile);
    })
}
</script>

And the following in your :

<script type="IN/Login" data-onAuth="onLinkedInAuth"></script>

This generates a Sign In with LinkedIn button and triggers the onLinkedInAuth() function upon completion. That function makes an IN.API.Profile() API call for the current viewer and provides you with the member id in the callback function. You can then use the AJAX framework of your choice, such as Dojo, YUI, or jQuery, to pass that value back to your server.
For further information :- http://developer.linkedin.com/documents/sign-linkedin

Done ! 🙂
Hope this will help you.
Thanks.

Posted in Socialmedia. Leave a Comment »

Speak Your Mind

«

»