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
Josh Software 
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.
Thanks for the kind words Scott! Coming from Gigya, its really cool!
We shall make the suggested changes in the code.
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
@tatsuquito I’ll check on this and get the code updated. Thanks for pointing it out.
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.
(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
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
yes,that signature is working fine.how can i store that registration page information on my system database……………..