Login

Last modified 15:48, 23 Mar 2015

The Login plugin allows users to log into your site using their social identity. Use it if you want to use Gigya as your Social Login service.

The plugin displays the logos of all the available providers and enables the user to log into your site through the social network or webmail account of his choice.

login_buttons_standard.jpg

When the user logs in successfully, the onLogin global event is fired. Refer to the Events page for information about event handling.

 

Implementation

The API method that displays the 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:

  • The size of the plugin.
  • Which providers' logos it displays, out of the available providers: Facebook, Twitter, Google+, LinkedIn, Yahoo!, Microsoft Messenger, AOL, Foursquare, Instagram, Vkontakte, renren, Kaixin, Tencent QQ, Sina Weibo, mixi, Yahoo! Japan, Odnoklassniki, Spiceworks, WordPress, Blogger, Typepad, PayPal, LiveJournal, VeriSign, OpenID, VZnet, Skyrock, Netlog, Signon, Orange France, Livedoor, Amazon, Xing and WeChat.
  • The size of the logo buttons.
  • The style of the logo buttons (you can select one of the predefined styles).
  • Whether the plugin is shown as a popup (default) or embedded in the web page.
  • Colors: plugin background, frame, text, link, navigation arrow, caption background, caption text, button text.
  • Version - Version 2 of the login plugin introduced improved and responsive design for the plugin. While new plugin implementations are automated to version 2, it is also possible to upgrade to version 2 by passing the version parameter to the Socialize.showLoginUI method, or through the 'properties' section of the UI Builder. Note that upgrading to version 2 may change the plugin's layout.

 

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_purple_design.jpg

 

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 Login 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 displays the relevant provider's logo first (before the rest of the logos) and that logo is surrounded by a green border. In the following example, the user has previously logged in via Facebook:

login_indication_facebook.jpg

 

You may change this default behavior by using the lastLoginIndication parameter (see the socialize.showLoginUI API method parameters reference):

  1. Set the parameter to 'none' to supply no indication as to the last login provider.

Set it to 'welcome' to replace the default plugin view with a personalized 'welcome back' view:

Welcome back

In this view, only the last login provider's logo appears as a login option (in this example, Facebook). You may change the button size using the lastLoginButtonSize parameter, which defines the button height in pixels. In addition, this view shows:

  • The user name
  • A "Not you?" link next to the user name
  • A "Connect using a different service" link

Both links lead to the default view of the plugin.

 

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

Page statistics
31590 view(s) and 27 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