Wednesday, 28 November 2012

Install Google - Yahoo - Facebook - Twitter (GYFT) login system on your website


In this module
- users can log in your website using their Facebook / Twitter / Google / Yahoo account.
- user account details will be available in the session and displayed on front end.
- has logout facility and uses Java servlets.




Download Pack     Live Demo    


How to install:

The download pack contains the complete project structure with the sample war file that I have deployed in my live demo.

1. For Fb Login - Create a Facebook Application

You need to create a Facebook app and specify your website that requires a Facebook login.
Also note the App Id and App Secret for your Fb app.



2. For Twitter login - Create a Twitter Application

Create your new Twitter application here. Enter your website URL that needs the Twitter sign in functionality.

Also enter a callback URL. (We can change the callback value from our code but make sure some dummy value is entered here). Once the user is authenticated by Twitter SignIn on your webpage, the control will be sent to this URL. In our case the callback URL is a servlet that will forward the control to our JSP.



Note the ConsumerKey and ConsumerSecret of your Twitter app.



In the settings tab of your Twitter Application, set the Application Type to the value "Read, Write and Access direct messages".



3. For Twitter Login - Adjust Server Timezone

Make sure your application server timezone and the Twitter server timezone are in sync. Now this can be tricky. Generally the Twitter Oauth servers are in sync with GMT/UTC time. So if you have access just set your server time to GMT+0 timezone.

I used a Jboss app server in Linux environment and did not have permissions to update server time. So I used the command export _JAVA_OPTIONS="-Duser.timezone=Europe/London" that brings Jboss server time to GMT timezone. (Restart Jboss after executing the command)

4. Web.xml (Input variables)

Specify the ConsumerKey and ConsumerSecret from your Twitter application in your web.xml
Specify the AppId and AppSecret from your Facebook application in your web.xml
Also the additional permissions for facebook login are mentioned here. You may update these permissions as required.

After successful login welcome.jsp will be shown to the user.



4. Welcome.jsp (Output variables)

The user account details will be available as session attributes in welcome.jsp

If the user logged in using Facebook, then the object fbUser that contains user details will be available in the session.


If the user logged in using Twitter, then the object twitterUser containing user details will be available in the session.


If the user logged in using Google or Yahoo, then the object gyUser containing user details will be available in the session.


You may write your own display code instead, as required.

Let me know if you face any issues.
Thanks!

4 comments:

  1. Can i use this with php script?
    can it work with Linux server working with cPanel?
    If yes How can i make that?

    ReplyDelete
    Replies
    1. Okay .. firstly, this is a Java code using servlets and Jsp.

      It will work on a Linux server only if you are using a Java-application-server like Tomcat or Jboss etc.

      I guess you are using php so you wont have the container required to host this code.

      I can suggest another library that uses php - http://www.sutanaryan.com/web-development/login-using-google-yahoo-wordpress-and-aol-account-into-your-website/

      Delete
  2. when i sign through facebook i am getting the following url

    {
    "error": {
    "message": "Invalid redirect_uri: Given URL is not allowed by the Application configuration.",
    "type": "OAuthException",
    "code": 191
    }
    }

    ReplyDelete
    Replies
    1. the callback servlet becomes - http://your-base-domain/fbcallback...

      Please make sure this same "http://your-base-domain" is added on your facebook app - in the fields "App domains" and "Site URL". Refer to the snapshot of Fb app in the post..

      Also Fb login does not work with localhost URLs...

      Delete