Integrate Gigya Register Widget into your Application

Updated post with source code available here.

In today’s world, with everyone managing multiple online accounts, it painful for users to create and remember yet another set of new credential just for your application. To overcome this issue we can use social networking API but this too has other drawbacks. For example, how many social networking API are you going to implement and maintain? There dozens of well known social networking sites and new ones coming up everyday!

For newer Rails applications we recommend using a combination of Devise and Omniauth but this may not always serve the purpose for older sites with different types of authentication schemes. With Gigya register widget we got rid of all these problem – it provides login for almost all social networking site. Using Gigya you can perform different functionality of various social networking portals/application. It’s easy to use Gigya login in an application to sign-up and login to application through various social networking credentials

Setting it up

You (as a developer) just need to sign up with gigya (Yes – just one more account credential to remember!) and create a API token and key. After you login, you can click here to choose what you want to show in your sign up or login page and choose other display option for the widgets.

This generates the two parts of code snippets to used in application, one is to access the gigya JavaScript objects and another one is to show the gigya widget in your application page.

This link provides various ways to use social networking login in your application
1. One-step registration
2. Full Registration
3. Full registration with account
4. Custom registration flow
5. Independent connect

Here, I’m talking about #2 Full registration. This link gives detailed steps of what to do along with a flow chart! I am mentioning the additional steps I did to customize it further for me.

I added the following configuration in config.yml

gigya:
  api_key: <your API key>
  secret: <your secret>
  providers: facebook,twitter #,myspace,yahoo,google,openid
  signup_redirect_url: http://<your-app-url>/social_signup
  login_redirect_url: http://<your-app-url>/social_login
  logout_url: http://<your-app-url>/logout

Now, this is the basic Gigya code to the gigya widget to load properly.

<head>
<script type="text/javascript" language="javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=<%= ApplicationConfig['gigya']['api_key'] %>"></script>
</head>

<script type="text/javascript">
var conf= {
  APIKey: '<%= ApplicationConfig['gigya']['api_key'] %>'
 ,enabledProviders: '<%= ApplicationConfig['gigya']['providers'] %>'
};

var login_params=
 {
  showTermsLink: false
  ,height: 80      ,width: 267
  ,containerID: 'loginDiv'
  ,UIConfig: '<config><body><background background-color="Transparent"></background><controls><snbuttons buttonsize="50"></snbuttons></controls></body></config>'
  ,useFacebookConnect: true
  ,redirectURL: '<%= ApplicationConfig['gigya']['login_redirect_url'] %>'
  ,buttonsStyle: 'fullLogo'
 };
 gigya.services.socialize.showLoginUI(conf,login_params);

function logout(isGigyaLogin) {
  if(isGigyaLogin == true){
    gigya.services.socialize.logout(conf, {
              callback:''
    });
    gigya.services.socialize.disconnect(conf, {
              callback:'',
              provider:'<%= current_user.provider %>'
    });
}

window.location = '/logout';
return true;
}
</script>

We need to verify the authenticity of the signature received from Gigya. I added the following code snippet in my Rails app for this functionality

 def is_valid_gigya_signature
   gigya_signature = params[:signature]
   base_string = params[:timestamp]+"_"+params[:UID]
   key = ApplicationConfig['gigya']['secret']
   digest = OpenSSL::HMAC.digest(OpenSSL::Digest::Digest.new('sha1'),
                                 Base64.decode64(key), base_string)
   return false if gigya_signature !=  Base64.encode64(digest).chomp
   return true
 end
 

Gotcha!

An interesting pointer – something which took me sometime to figure out. Gigya calls back the URL you have specified but as a GET request. So, all the parameters are visible in the URL. If you do want to avoid showing this, you should have an internal redirect in your callback to ensure that parameters are not seen in the URL. Of course, before redirecting, you need to store the info. I did this like this:

# Redirect-url for signup process
def social_signup
  #Valid gigya signature to avoid fraud
  if !is_valid_gigya_signature
    respond_to do |format|
     flash[ :notice ] =  I18n.t( :invalid_gigya_signature, :scope => :notice )
     format.html { render :action => 'new' } # On FAILURE!
    end
  end

  reg_user = User.find_by_uid(params[:UID])
  #Check the user already registered
  if !reg_user.blank?
    respond_to do |format|
      flash[ :notice ] = I18n.t( :user_already_registered,
                                 :scope => :notice,
                                 :provider => params[:provider] )
      # REDIRECT to Login for Existing User!
      format.html { redirect_to login_url }
    end
  else
    store_gigya_user_info
    respond_to do |format|
      # REDIRECT on success!
      format.html { redirect_to social_connect_url }
    end
  end
end

Account Linking

We need to ensure that we also cater to this. Suppose a users signs up via Facebook and the next day tries with twitter — we cannot afford to have 2 different users. We need to find a way to link these user accounts so that a user can login/signup with any social account and still be the same user! To do this — we ensure we had the following routes:

 map.social_signup  '/social/signup',  :controller => 'users', :action => 'social_signup'
 map.social_connect '/social/connect', :controller => 'users', :action => 'social_connect'
 map.social_register '/social/register', :controller => 'users', :action => 'social_register'
 map.social_login '/social/login', :controller => 'sessions', :action => 'social_login'
 map.social_account_linking '/social/:user_id/linking', :controller => 'users', :action => 'social_account_linking'
 map.social_account_add '/social/:user_id/add', :controller => 'users', :action => 'social_account_add'

As the named routes suggest, we can now signup, register or even link accounts. To make things simple, I have the code ready for this — Use at will.

Code is available here: https://github.com/joshsoftware/sso-gigya-widget

Please provide feedback, bugs, suggestions

15 thoughts on “Integrate Gigya Register Widget into your Application

  1. Hi there, i read your blog from time to time and i own a similar one and i was just wondering if you get a lot of spam feedback? If so how do you protect against it, any plugin or anything you can suggest? I get so much lately it’s driving me insane so any help is very much appreciated.

  2. Hi there! This article couldn’t be written much better! Reading through this post reminds me of my previous roommate! He continually kept talking about this. I’ll send this information to him. Fairly certain he will have a good read. Thanks for sharing!

  3. I like the valuable information you provide in your articles. I’ll bookmark your blog and check again here frequently. I am quite certain I will learn many new stuff right here! Best of luck for the next!

  4. Thanks , I have recently been looking for information about this subject for a long time and yours is the best I have found out so far. However, what concerning the conclusion? Are you sure about the supply?

  5. This is really attention-grabbing, You are an overly professional blogger. I’ve joined your rss feed and look ahead to in search of extra of your wonderful post. Additionally, I’ve shared your website in my social networks

  6. Good post. I learn something totally new and challenging on sites I stumbleupon everyday. It will always be useful to read through content from other writers and use something from other web sites.

  7. Do you mind if I quote a few of your articles as long as I provide credit and sources back to your weblog? My blog site is in the exact same niche as yours and my users would certainly benefit from a lot of the information you present here. Please let me know if this alright with you. Thanks a lot!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.