Was this article helpful?

Login

Last modified 10:37, 15 Sep 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, Instagram, Renren, Tencent QQ, Sina Weibo, Kaixin, Vkontakte, WordPress, Blogger, Typepad, Paypal, Amazon, liveJournal, 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 gigya.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/gigya.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):

LoginUI2.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:

    Welcome back

    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/gigya.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
    {
       enabledProviders: 'facebook,twitter,googleplus,linkedin,openid,yahoo,messenger,aol,foursquare,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.socialize.showLoginUI(params);
</script>
</body>
</html>

 

Custom Buttons Parameters

The OpenID customButton object is defined using the following fields:

  • type - In this case the type is "OpenID".
  • providerName - The provider name to display in the login popup window and to remember as the last login. In this case "Flickr".
  • iconURL - The URL of the provider icon to display on the button.
  • logoURL - The URL of the provider to display in the login dialog.
  • lastLoginIconURL - The URL of the provider icon to display on the button when this provider was the last one used for login.
  • position - The index of the button within the plugin.
  • openIDURL - A URL template representing an OpenID user where $USERNAME$ represents the placeholder for the username. For example: http://aol.com$USERNAME$.

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.

 

Adding a SAML Login Provider

SAML (Security Assertion Markup Language) is a protocol for exchanging authentication and authorization data between separate systems. Read more about SAML Login and its Configuration.

You can add to the Login plugin a custom SAML Login button by defining a customButton object in the socialize.showLoginUI params

 

Running Example

In this example we add Media ID as the new custom SAML  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,saml,yahoo,messenger,myspace,aol,foursquare,vkontakte,renren,QQ,Sina,kaixin'
        }
</SCRIPT>
<script type="text/javascript">
// Adding Media ID as a SAML login provider using the 'params' object:
var params =
{
    customButton: {
        "type": "saml",
        "providerName":"Media-ID",
        "idpName":"media-id",
        "iconURL": "http://icons.iconarchive.com/icons/chrisbanks2/cold-fusion-hd/128/mickey-mouse-icon.png",
        "logoURL": "http://icons.iconarchive.com/icons/chrisbanks2/cold-fusion-hd/128/boid-icon.png",
        "lastLoginIconURL":"http://icons.iconarchive.com/icons/pino/disney/32/Mickey-Mouse-1-icon.png",
        "position":"4"
    },
    "showTermsLink":false, // 'terms' link is hidden
    "containerID":"loginDiv", // The component will embed itself inside the "loginDiv" DIV (will not be a popup),
    width:200
}
</script>
</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
    gigya.services.socialize.showLoginUI(params);
</script>
</body>
</html>

Custom Buttons Parameters

The SAML customButton object is defined using the following fields:

  • type - In this case the type is "saml".
  • providerName - The provider name to display in the login popup window and to remember as the last login. In this case "Media-ID".
  • idpName - The name of the SAML provider when type is "saml". Login will be attempted with "saml-media-id".
  • iconURL - The URL of the provider icon to display on the button.
  • logoURL - The URL of the provider to display in the login dialog.
  • lastLoginIconURL - The URL of the provider icon to display on the button when this provider was the last one used for login.
  • position - The index of the button within the plugin.

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

Was this article helpful?
Pages that link here
Page statistics
28585 view(s) and 23 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.
This page has no classifications.

Comments

You must to post a comment.

Attachments