Want to increase user registrations using all available social networks? Gigya widgets are quick and easy!

Do you already have a web-portal running for years and you want to use different social networks to increase user registrations? Can you afford to keep integrating newer social networks and deprecate older ones? Gigya register widget eases all this — its quick and simple to use!

Today, everyone manages multiple online accounts. Its 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 problems – 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

Advertisements

About Sethupathi Asokan

Director and Co-founder, Josh Software Private Limited.
This entry was posted in Ruby on Rails and tagged , , . Bookmark the permalink.

10 Responses to Want to increase user registrations using all available social networks? Gigya widgets are quick and easy!

  1. Pingback: Integrate Gigya Register Widget into your Application « Josh Software – Where Programming is an Art!

  2. Josh,

    Great article! Very informative.

    I just wanted to point out a couple of small details:

    – The “useFacebookConnect” of showLoginUI is no longer used. We strongly recommend you use Facebook’s Open Graph API, which is default. However, you may enable the Connect API if needed in your “Facebook Settings” panel within your Gigya account.

    – To logout of Gigya, you only need to call socialize.logout. Calling disconnect is deprecated and will not log a user out — it will permanently disconnect their Gigya account from all linked social providers (bad!). This means that next time they login, they won’t automatically be reconnected to their social providers.

    – After logging a user out, be sure to wait for the callback to fire before redirecting the user. This ensures that the AJAX request to our servers is processed.

  3. Pingback: How do I increase user registrations using Rails and Gigya? | Ruby Here Blog

  4. tatsuquito says:

    Hello, thanks for the tutorial using Gigya. This is very useful for what I am doing right now. I tried to run the code and to create an account via Twitter. It seems the method “social_login” in the sessions controller is missing. Can you update the code? Also, the constants in the config.yml file are not loaded to ApplicationConfig. I guess that ” require ‘yaml’ ” is missing. Thank you. Tatsuquito

  5. calanthatech says:

    I have an issue at implementation of Gigya.
    Using JavaScript I got the user (Gigya social) information at user login from gigya.
    I want to do, once the information stored in our system, pass the system user id to Gigya user id.
    If this user coming next time from the Gigya that time I can check our database about it’s already exist or not.
    I checked with socialize.notifyRegistration, socialize.setUID but it’s not working for me so if you have some C# example for this please let me know.

  6. (Un)fortunately, we don’t work on C# and if you are using javascript api then it is independent of C#. My guess is that signature is not generated properly please refer following for generating signature using Javascript
    http://developers.gigya.com/030_Gigya_Socialize_API_2.0/010_Developer_Guide/57_Security#Constructing_a_signature

  7. calanthatech says:

    Thnks for give that reply sir,
    I am following http://developers.gigya.com/020_Developer_Guide/10_Sign_On/030_Implementation for flow
    and this http://developers.gigya.com/030_Gigya_Socialize_API_2.0/040_Demos/005_Login for code .but i stuck on step 8.2 .
    Can you check it and please let me know,why i am not able to do it.
    My socialize.notifyRegistration’ is not working here.
    thnks in advance
    Regars

  8. calanthatech says:

    yes,that signature is working fine.how can i store that registration page information on my system database……………..

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s