Was this article helpful?

Login

Last modified 14:33, 20 Feb 2014

The Login plugin allows users to login to your site using their social identity. It should be used by sites that wish to use Gigya as their Social Login service.

The plugin displays all the available providers' logos as login options, enabling the user to login to your site via his social network / webmail account:

 

LoginUI.gif

After the user logs-in successfully, the onLogin global event is fired. Please refer to the Events page, to learn how to handle events.

 

Implementation

The API method that displays the Login plugin is: socialize.showLoginUI.

If you plan on integrating the Login plugin, please read the Social Login guide, which is a step-by-step guide for implementing the social login process in your site.

 

Working Example

In the Login Demo page you will find a working example that implements the framework of a login algorithm using the Login plugin. You may view the code, run it and view the outcome.

 

UI Customizations

The simplest way to customize the Login plugin is through the usage of the Login Wizard. The wizard lets you customize the visual aspects of the Login plugin design, view, and grab the customized code.

Alternatively, you may customize the plugin through the use of the socialize.showLoginUI method parameters (see the params table in the reference page).

 

Some of the plugin's adjustable parameters:

  • Plugin size.
  • Select which social networks' buttons will appear on the plugin. The options are:  Facebook, Twitter, Yahoo, Microsoft Messenger, Google, Google+, LinkedIn, AOL, FourSquare, Orkut, Instagram, Renren, Tencent QQ, Sina Weibo, Kaixin, Vkontakte, WordPress, Blogger, Typepad, Paypal, Amazon, liveJournal, Hyves, VeriSign, OpenID, Netlog, Signon, Orange France, mixi, Yahoo JAPAN, Odnoklassniki, Spiceworks, Livedoor, Skyrock, VZnet, Xing.
  • Buttons' size.
  • Buttons' design style - selecting one of the pre-defined design styles for the network buttons.
  • Can be shown as either as a popup dialog (default) or embedded in the application.
  • Colors: plugin background, frame, text, link, navigation arrow, caption background, caption text, button text.

 

Changing the Design - Code Example:

In the following example we display on screen a Login plugin with changed design and settings:

<html>
<head>
<!-- Including the socialize.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>

<script type="text/javascript">

// Changing the default look and behavior of the plugin using the 'params' object:
var params =
{
    showTermsLink:false, // 'terms' link is hidden
    headerText:"Please Login using one of the following providers:", // adding header text
    height:145, // changing default plugin size
    width:700,  // changing default plugin size
    cid:'',       
    
    containerID:"loginDiv", // The plugin will embed itself inside the "loginDiv" DIV (will not be a popup) 
    
    // Changes to the default design of the plugin's design
    //     Background color is changed to purple, text color to gray and button size is set to 40 pixels:    
    UIConfig:'<config><body><texts color="#DFDFDF"></texts><controls><snbuttons buttonsize="40"></snbuttons></controls><background background-color="#51286D"></background></body></config>',

    // Change the buttons design style to the 'fullLogo' style:
    buttonsStyle:'fullLogo',
    
    // After successful login - the user will be redirected to "https://www.MySite.com/welcome.html" :   
    redirectURL: "https://www.MySite.com/welcome.html"
  
}

</script>
</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
    gigya.socialize.showLoginUI(params);
</script>
</body>
</html>

 

The output of this code:

 

login_change-default.gif

In the JavaScript implementation:
Following a successful login, the user will be redirected to "www.MySite.com/welcome.html". The following additional parameters will be appended to the URL string: UID, UIDSig, timestamp, loginProvider, nickname, photoURL, thumbnailURL, firstName, lastName, gender, birthDay, birthMonth, birthYear, email, country, state, city, zip, profileURL, proxiedEmail, provider.
For example:

http://www.MySite.com/welcome.html?zip=&
photoURL=http%3A%2F%2Fprofile%2Eak%2Efbcdn%2Enet%2Fprofile5%2F1719%2F30%2Fs722723209%5F4728%2Ejpg&
nickname=Assaften%20Esh&profileURL=http%3A%2F%2Fwww%2Efacebook%2Ecom%2Fprofile%2Ephp%3Fid%3D722723209&
birthMonth=10&loginProvider=twitter&loginProviderUID=65e&country=&thumbnailURL=&lastName=Esh&signature=XGcp4tmIVvQNCqG9pET7XbHaies%3D&
firstName=Assaften&provider=twitter&gender=&birthYear=1965&timestamp=2009%2D12%2D01%2011%3A05%3A33&
UIDSig=&state=&UID=123&email=&city=&birthDay=11&
proxiedEmail=apps%2B51244333578%2E722723209%2Edb978474083d884bcb0ba35d313c4c8f%40proxymail%2Efacebook%2Ecom

The parameters are equivalent to the User object fields. Please find the parameters' description in the User object reference page.

 

Last Logged-in Indication

The Login plugin gives an indication of the last provider to which the user was logged in, so as to provide an improved user experience. The plugin will display the specific provider's logo first (the position will precede the rest of the logos) and will be surrounded by a green border.

This is demonstrated in the following screenshot (in this example, the user has previously logged-in via Facebook):

 

LastLoggedIn.gif
You may change this default behavior by using the lastLoginIndication parameter (see the socialize.showLoginUI API method parameters reference). There are two alternative options:

  • No indication for last login provider. To implement this, set the lastLoginIndication parameter to 'none'.
  • If the lastLoginIndication parameter is set to 'welcome', the plugin will change its default view to a "Welcome back" view:

    LastLoggedIn-welcome.gif

    The view shows only the last login provider's logo as a login option (in this example, the user has previously logged-in via Facebook). In addition the view shows:Both links direct the Login plugin to the regular view.
    You may change the last login provider's button size using the lastLoginButtonSize parameter. The parameter defines the button height in pixels.
    • The user name
    • A "Not you?" link next to the user name
    • A "Connect using a different service" link

 

Adding a Custom OpenID Provider

You can add to the Login plugin your own custom OpenID provider, by defining a customButton object in the socialize.showLoginUI params.

Running Example

In this example we add Flickr as the new custom provider:

The Example Code

<html>
<head>
<!-- including the gigya.social.js script -->
<style>
    body {font-family:arial;font-size:11px}
</style>
<SCRIPT type="text/javascript" lang="javascript"
    src="http://cdn.gigya.com/JS/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
    {
       enabledProviders: 'facebook,twitter,googleplus,linkedin,openid,yahoo,messenger,aol,foursquare,orkut,vkontakte,renren,QQ,Sina,kaixin'
    }
</SCRIPT>

<script type="text/javascript">

// Adding Flickr as a custom OpenID provider using the 'params' object:
var params =
{
    customButton: {
        "type": "openID",
        "providerName":"Flickr",
        "iconURL": "http://wikifiles.gigya.com/images/flickr.png",
        "logoURL": "http://wikifiles.gigya.com/images/flickr_large.png",
        "lastLoginIconURL":"http://wikifiles.gigya.com/images/flickr.png",
        "position":"4",
        "openIDURL": "https://me.yahoo.com/$USERNAME$"
    },
    "showTermsLink":false, // 'terms' link is hidden
    "containerID":"loginDiv" // The component will embed itself inside the "loginDiv" DIV (will not be a popup)
}
</script>
</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
    gigya.services.socialize.showLoginUI(params);
</script>
</body>
</html>

 

Custom Buttons Parameters

Each customButton object has the following fields:

  • providerName (required) - The provider name to display in the login popup window and to remember as the last login.
  • iconURL (required) - The URL of the provider icon to display on the button (the icon will be resized to fit the selected size).
  • lastLoginIconURL (required) - The URL of the provider icon to display on the button when this provider was the last one used for login.
  • type (optional) - Can be either "OpenID" or "eventOnly". The default value is "eventOnly", which means that only an onButtonClicked event will be fired.
  • position (optional) - The index of the button within the plugin. The regular provider buttons should organized to fill the gaps between custom buttons. The default is 1.
  • logoURL (optional) - The URL of the provider to display in the login dialog.
  • openIDURL (optional) - A URL template representing an OpenID user where $USERNAME$ represents the placeholder for the username. For example: http://aol.com$USERNAME$. When this parameter is provided it should be passed on to the server login call. Required if type='openID'.

You must provide a button in the correct size in order to ensure that the UI looks good with the new button. To help you fit the right buttons, we have created a blank button for each of the sizes, as a button and also in PSD format. This is available for downloading here: Social Login Buttons.zip.

 

Login UI on Internet Explorer

In order for the your Login plugin to work, you must have the "Script ActiveX Controls Marked as Safe For Scripting" option enabled in your Internet Explorer security settings:

IEActiveXSetting.png

Tags

This page has no custom tags set.

Comments

You must to post a comment.

Attachments