Displays the Gigya Social Login plugin, which lists all the available providers

Description

Displays Gigya's Social Login plugin, which lists all the available providers' logos as login options, enabling the user to log into your site via their social network or webmail account.

Notes: 

  • All new implementations of the login plugin must use version 2. Apply this by setting the version parameter in this API to 2. 
  • Make sure that all pages using socialize.showLoginUI have a <!DOCTYPE html> tag preceding the <html> tag of your pages for backward browser compatibility.

Supporting Providers

Plugin Design and Options

This is the default design of the plugin:

<style>
.runningCodeExample {
	width: 300px;
	height: auto;
	padding: 20px;
	border: 1px solid skyblue;
	text-align: center;
}
#popupVersion {
	color: #149dd6;
	cursor: pointer;
}
</style>
<div class="runningCodeExample" id="runningCodeExample">
	<div class="uiDiv1" id="uiDiv1">
 
	</div>
<br />
	<div class="uiDiv2" id="uiDiv2">
	To view the popup version, <span id="popupVersion" title="Opens the showLoginUI in a popup window.">click here</span>.
	</div>
</div>
<script>
	gigya.socialize.showLoginUI({containerID: 'uiDiv1', width: '300px', height: '250px', version: 2});
	$(document).on("click", "#popupVersion", function() {
    	gigya.socialize.showLoginUI({width: '300px', height: '250px', version: 2});
	});
</script>

 

The plugin may be embedded in the page or displayed as a popup at the center of the page. If the plugin is opened as a popup, then it automatically disappears at the end of the login process.

The plugin's design is customizable through the use of the parameters listed below.

In the Social Login demo page you will find a complete working example which uses the socialize.showLoginUI method. You may view the code, run it and view the outcome.

 

Note: If you plan on integrating the Login plugin, we highly recommend reading the Social Login guide, which is a step-by-step guide for implementing the Social Login process in your site.

 

 

RequiredNameTypeDescription
versioninteger

Gigya offers a new improved version of the Login plugi n. To use the new plugin set this parameter to "2". All new implementations are required to use the new version, although existing implementations without this parameter will continue to function.

widthstringSets the width you desire for the plugin. You may also use percentages to set the width, e.g., width: 80%, in which case the plugin will be responsive. The login plugin supports the percentage option from version 2, so using the version parameter, set the version to "2" if you haven't yet.

actionAttributesJSON objectIn Gamification your users receive points for actions they perform on your site, in this case logging in grants the user points. Action Attributes may be used to annotate actions with additional information, such as the section of the web site that generated the action. If you set here the actionAttributes, each time a user logs in, the action also receives an attribute, for example "tv-show":"glee", which can mean that the action was performed on the "Glee" page of the site. 
authCodeOnlyBoolean

This parameter is intended only for developers who wish to implement the "Web Server Flow" of the OAuth 2.0 standard. The default value of this parameter is 'false'. If set to 'true', you will not receive the user data in the onLogin event data. Instead you will receive an authCode .
The authCode contains a code that is intended to be used for invoking the OAuth 2.0 getToken end-point along with the grant_type parameter set to authorization_code.

When being translated by the Web SDK from JS to a REST call, this param becomes:

"response_type": "code"

 

authFlowstringUsing this parameter you may specify that the login flow will use page redirects instead of using a popup. This gives a solution for environments where popups are unavailable (e.g., mobile web view controls). This parameter accepts two values:
  • "popup" (default)
  • "redirect" - the login flow uses page redirects. When the login process completes successfully, the user is redirected to the URL specified by the redirectURL parameter (see above). If the redirectURL parameter is not specified, the user will be redirected to the original page from which the login process started. Note that this option will only work if CNAME is configured. When using this mode, the onLogin event is not fired.
autoDetectUserProvidersstringThis parameter, when specified and loading Facebook Connect is possible, and the user is detected as a Facebook user, the login plugin displays a large provider button at the top and the rest of the login buttons at the bottom. Currently the supported values are:
buttonSizeinteger

A number denoting the height of the buttons in pixels. Width will be set in proportion to the height.

buttonsStylestringThis parameter enables selecting one of the pre-defined design styles for the network buttons on the Login UI. Currently Gigya offers the following design styles:
  • "standard" (default):

  • "fullLogo":

  • "fullLogoColored":

  • "signInWith":



The buttonSize parameter when using signInWith buttonStyle only supports the following sizes (defined in vertical height):

  • 20 px (translated to 40px in retina screens)
  • 25 px (translated to 50px in retina screens)
  • 30 px (translated to 60px in retina screens)
  • 35 px (translated to 70px in retina screens)
  • 40 px (translated to 80px in retina screens)

Attempting to set sizes not listed here will result in a corrupted button being displayed within the UI.

cidstring
 
customButtonsan array of JSON objects

For more information see Login.

customButtoncustomButton object

This parameter is deprecated. Use customButtons, above.

 You may define any OpenID provider as an authentication destination - read more about Adding a Custom OpenID Provider 

You may also define a SAML login provider - read more about Adding a SAML Login Provider.

deviceType

string

Specifies the type of the device the UI is to be displayed on (see the "pagingButtonStyle" parameter). The possible values are:

  • desktop (default)
  • mobile
  • auto - When this value is used, you must also include the following meta tag in the <head> section of your site for mobile devices to be automatically recognized:
// This must be the first item beneath the 
// <title></title> section of your page!
<meta name="viewport" content="width=device-width">

Otherwise, the device will be recognized as a desktop device.

disabledProvidersstring
enabledProvidersstring  
extraFieldsstring
facebookExtraPermissionsstringA comma-delimited list of Facebook extended permissions to request from the user. This parameter gives the possibility to request extended permissions in addition to the permissions that Gigya is already requesting.
Please refer to Facebook's extended permissions page for the complete list of permissions.
For example, if you wish to RSVP to events on the user's behalf and to to send text messages to the user define: 
facebookExtraPermissions : "rsvp_event,sms "
forceAuthenticationBoolean
googleExtraPermissionsstringThis parameter gives the possibility to request extended permissions in addition to the permissions that Gigya is already requesting. The supported values are: "wallet" - for Google wallet permissions.
googlePlayAppIDstringThe objective of this parameter is to support Over The Air app installs for Android devices during Google+ login. Set this parameter with the package name of your Android app (for example: "com.yourdomain.app"). As a result, after signing in with Google+, users have the option to send your Android app to their device instantly, without leaving your website. As a preliminary step you'll need to Utilize Google+ Native Android Sign-on on your Android app. The package name passed to this parameter is the same one you enter when enabling the Google+ API.
headerTextstringSets the plugin's header text.
includeAllIdentitiesBooleanThe default value of this parameter is 'false'. If set to 'true', you will receive all the user's identities, including those with expired sessions. Each  entry will have an attribute that will be 'true' when the session has expired for that provider (or is otherwise inactive) and 'false' if it is active.
lastLoginButtonSizeintegerThis parameter is relevant only if the lastLoginIndication parameter is set to 'welcome'. This parameter defines the size of the login network button on the 'welcome back' screen. The parameter defines the button height in pixels.
lastLoginIndicationstringThe Login plugin gives an indication of the last provider to which the user was logged in.
You may change the way the last login provider is presented using this parameter. Currently supported values for this parameter are:
  • border (default) - Last login provider's logo will be displayed first and will be surrounded with a green border.
  • welcome - This option changes the view of the plugin. The plugin will show a "Welcome back" view, with the user name and with only the last login provider's logo as a login option. The view includes a "Not you?" link next to the user name and a "Connect using a different service" link. Both links take the Login plugin to the regular view. When "Not you?" is clicked, the plugin sets forceAuthentication to true for the following login attempts on the same page.
  • none - There will be no indication for last login provider.

You may find more information about this feature and screenshots in the Last Logged In section of the Developer's Guide.
onButtonClickedfunction refA reference to an event handler function that will be called when one of the plugin's buttons is clicked.
onClosefunction refA reference to an event handler function that will be called in one of the following scenarios:
  • If the plugin is displayed as a popup the event will be fired when the plugin closes.
  • If the plugin is embedded in page the event will be fired when the user clicks a button that indicates the dialog should be closed. In this case the dialog will not hide itself automatically.
onErrorfunction refA reference to an event handler function that will be called when an error occurs.
onLoadfunction refA reference to an event handler function that will be called when the plugin has finished drawing itself.
onLoginfunction refA reference to a function that is called when the user is successfully authenticated by Gigya.

pagingButtonStyle

string

Controls the looks of the "next/previous" buttons. The possible values are:

  • arrows - The familiar arrow buttons:

  • newArrows (default) - Arrows that are slightly further away from the login buttons, for better usability in a touch input:

  • floating - Floating buttons optimized for touch input in small screen sizes:

  • auto - This value sets the buttons to floating if the deviceType parameter has been set to "mobile" or the device has been recognized as mobile (see deviceType for details), and the width of the Login Plugin UI has been set to under 500px. Otherwise, the buttons are set to newArrows.

pendingRegistration

Boolean

The default value of this parameter is true. The default behavior - when a new user logs-in (registers), his new Gigya account is not considered final until socialize.notifyRegistration is called. While being not-final, the identities associated with this account can be connected to another account, without causing an error. If this parameter is set to false - when a new user logs-in (registers), his new Gigya account is final immediately.

Note: The value of this parameter overrides the value of the newUsersPendingRegistration parameter in the global configuration object.

redirectURL

URL

A URL to which to redirect the user when the login completes successfully. The following additional parameters will be appended to the URL string:
UID, UIDSig, timestamp, loginProvider, loginProviderUID, nickname, photoURL, thumbnailURL, firstName, lastName, gender, birthDay, birthMonth, birthYear, email, country, state, city, zip, profileURL, proxiedEmail, provider. These parameters are equivalent to the User object fields. Please find the parameters' description in the User object reference page.

If the redirectURL parameter is supplied, the onLogin global event will not be called.

Note: We strongly advise providing a secure https URL.

requiredCapabilitiesstringA comma separated list of any of the following capabilities: Login, Notifications, Actions, Friends, Status, Photos, Contacts . Only providers that are available and support all the required capabilities will be visible.
sessionExpirationinteger
showTermsLinkBooleanShow or hide the Terms link. Clicking the "Terms" link opens Gigya's Legal Notices page.
showTooltipsBooleanThe default value of this parameter is true. Determines whether a tooltip will be displayed when the mouse hovers over a social network icon. The tooltip presents the social network's full name.
showWhatsThisBooleanIndicates whether to show or hide a What's this link. When the user rolls over the link, a hint will pop up describing the Login plugin. By default the value of this parameter is 'false'. In order for the "What's this" link to appear, you must specify a  width  of at least 150px and a height  of at least 100px on the UI component.
whatsThisTextstringThis parameter is relevant only if the showWhatsThis parameter is set to true. Using this parameter you may define the text that will appear in the pop-up hint (see screenshot above). The default text is: "You can use your account from one of these services to sign into the site".
facepilePositionstring Deprecated . This parameter is ignored by the Gigya API.
useHTMLBoolean Deprecated . The Login plugin is available in both Flash and HTML versions. By default, the HTML version is used. You may override the default behavior. Setting this parameter with the value 'false', will force Gigya to use the Flash version.
includeiRankBoolean Deprecated . This parameter's default value is 'false'. If set to 'true' you will receive the user's  iRank  (influencer rank) in the response  User object .

onClose Event Data

FieldTypeDescription

onLogin Event Data

FieldTypeDescription
eventNamestringThe name of the event: 'login'.
sourcestringThe source plugin that generated this event. The value of this field is the name of the plugin's API method, in this case 'showLoginUI'.
Note: this field will not be available if the source of this event is not a plugin (e.g., if the source is a socialize.login API call).
contextobjectThe context object passed as a parameter to the plugin/method that triggered this event, or null if no object was passed.
loginModestringThe type of login:
  • standard - the user is logging into an existing account.
  • reAuth the user is proving ownership of an account by logging into it.
providerstringThe name of the provider that the user used in order to login (e.g., "Facebook"). Note: If this event is fired as a result of a socialize.notifyLogin call, i.e., the user was authenticated by your site, the provider field will be set to "site".
UIDstringThe User ID that should be used for login verification*.
UIDSignature stringThe signature that should be used for login verification, as described under the Validate the UID Signature in the Social Sign-On Process section.
userUser objectUser object with updated information for the current user.
signatureTimestamp stringThe GMT time of the response in UNIX time format (i.e., the number of seconds since Jan. 1st 1970). The time stamp should be used for login verification, as described under the Validate the UID Signature in the Social Sign-On Process section.

* To learn more about login verification, please refer to the Validate the UID Signature in the Social Sign-On Process section in the Security page of the Developer's Guide.

onButtonClicked Event Data

FieldTypeDescription
buttoncustomButton objectThe object representing the custom button that has been clicked. If the clicked button is not a custom button, no customButton object will be returned.

Global Event Triggered

By using this plugin, the onLogin global event may be triggered (the onLogin global event is fired when a user successfully logs in to Gigya). To register an event handler, use the socialize.addEventHandlers API method.

You can read more about onLogin event data and Events.

Code Sample

var context = {
    msg:'This is my params.context.msg'
};	
var params = { 
    captionText: 'This is my caption text',
    headerText: 'This is my header content',
    showTermsLink: false,
    redirectURL: 'http://www.yourNewSite.com',
    context: context,
};
params['onLoad'] = function(evt) {              
    evt['msg'] = 'After onLoad';
    var msg = 'Event name is : ' + evt.eventName +'\n';
    msg+= 'evt[\'msg\'] is : ' + evt['msg']+'\n';
    msg+= 'context.msg is : ' + evt['context']['msg'];            
    alert(msg);
};
gigya.socialize.showLoginUI(params);