Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Integrating RaaS into a page on your website or mobile app can be as simple as adding two lines of code. You simply add a script reference in the head section of you page with your API key and then add an event to a button which launches the login and registration flows.

Try it out: 

 

HTML
<style>

#runningCodeExample {
text-align: center;
box-shadow: 5px 5px 15px #888888;
}
 
.activeWindow {
	display: block;
}
.hiddenWindow {
	display: none;
}
#mobileContainer {
	max-width: 350px !important;
	
}
.mobileContainerTwo {
	background: url("../../download/attachments/14650850/cellPhoneBackground.jpg");
	height: 100%;
}
.hiddenIframe {
	display: none;
}
#responseOfInnerLoggedIn {
    display: none;
	border: 1px solid skyblue;
    padding: 10px;
	margin-top: 20px;
}
#responseOfInnerLoggedInText {
	font-family: 'Cutive Mono', monospace;
}
.shownIframe {
	display: block;
}
#loggedInUserPhoto {
	display: none;
    //border: 1px solid red;
    width: 50px;
    height: 50px;
    clear: right;
    margin: 10px;
    margin-left: 400px;
    margin-top: -55px;
}
</style>
<script type="text/javascript">		
	function showLoginScreen() {
		document.getElementById('phoneEmulator').className='hiddenIframe';
		document.getElementById('regIframe').className='hiddenIframe';
		document.getElementById('updateIframe').className='hiddenIframe';
		document.getElementById('loginIframe').className='shownIframe';
		
	}
	function showRegScreen() {
		document.getElementById('phoneEmulator').className='hiddenIframe';
		document.getElementById('regIframe').className='shownIframe';
		document.getElementById('updateIframe').className='hiddenIframe';
		document.getElementById('loginIframe').className='hiddenIframe';
	}	
</script>

<div id="mainSwitchingContainer">
 
<!-- START DESKTOP BLOCK -->

<div id="desktopContainer" style="display: block;">
<div id="runningCodeExample" class="w3-card-4 w3-center" style="padding: 10px; width: 340px; height: 75px; line-height: 55px; font-size: 20px;">
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-RegistrationLogin'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'NewRaas4nov15-RegistrationLogin', startScreen:'gigya-register-screen'});">Register</a>&nbsp;&nbsp;|&nbsp;&nbsp;		
		<a href="#" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>
<script>
	function onLogout(response) {   
		if ( response.errorCode == 0 ) {                
			alert('You are now logged out'); 
		} 
		else { 
			alert('Error :' + response.errorMessage); 
		} 
	}
</script>
</div>
<div class="loggedInUserPhoto" id="loggedInUserPhoto">
</div>
<div class="" id="responseOfInnerLoggedIn">
	The data below is the returned <a href="/display/GD/Events#Events-onLoginEventData" target="_blank">onLogin</a> event object after setting <a href="/display/GD/accounts.addEventHandlers+JS" target="_blank">accounts.addEventHandlers</a>:<br />
	<textarea id="responseOfInnerLoggedInText" rows="25" style="width: 100%" readonly></textarea><br />
</div>
<script>

/* This adds handlers for editing the widget when users login */
/* ********************************************************** */
var gigyaPlugins = gigyaPlugins || {};
gigyaPlugins.helpers = {};
var profile={};
var completeRespObj;
var userDataHtml;
    gigyaPlugins.login = function () {
        var params = {
            screenSet:'NewRaas4nov15-RegistrationLogin',
            mobileScreenSet: 'NewRaas4nov15-RegistrationLogin'
        };
        gigya.accounts.showScreenSet(params);
    };
    gigyaPlugins.registration = function () {
        var params = {
            screenSet:'NewRaas4nov15-RegistrationLogin',
            mobileScreenSet: 'NewRaas4nov15-RegistrationLogin',
            startScreen: 'gigya-register-screen',
            callback: gigyaPlugins.checkUser
        };
        gigya.accounts.showScreenSet(params);
    };
        
    gigyaPlugins.helpers.isLoggedIn = function () {
        return sessionStorage.getItem("gigyaFirstName") != null;
    };
    gigyaPlugins.innerLoggedIn = function() {
        newData='<span style="color: green;">Logged In</span>&nbsp;&nbsp;|&nbsp;&nbsp<a href="#" onclick="gigya.accounts.logout({callback:onLogout});">Logout</a>';
        document.getElementById('runningCodeExample').innerHTML=newData;
		document.getElementById('loggedInUserPhoto').style.display="block";
		document.getElementById('loggedInUserPhoto').style.backgroundImage="url('" + userGigyaAvatar + "')";
		document.getElementById('loggedInUserPhoto').style.backgroundRepeat="no-repeat";
		document.getElementById("loggedInUserPhoto").style.backgroundSize="50px 50px";
        document.getElementById('responseOfInnerLoggedInText').innerHTML=userDataHtml;
        document.getElementById('responseOfInnerLoggedIn').style.display='block';
    };
    gigyaPlugins.innerLoggedOut = function() {
        newData='<a href="#" onclick="gigyaPlugins.login();">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" onclick="gigyaPlugins.registration();">Register</a>';
	    document.getElementById('runningCodeExample').innerHTML=newData;
	    document.getElementById('responseOfInnerLoggedInText').innerHTML='';
		document.getElementById('loggedInUserPhoto').style.display="none";
        document.getElementById('responseOfInnerLoggedIn').style.display='none';
    };
    gigyaPlugins.loginHandler = function (response) {
        console.log(response);
        completeRespObj = response;
        profile = response['profile'];
        loggedInThumbnail = profile.thumbnailURL;
        if (window.location.protocol == 'https:') {
            loggedInThumbnail = loggedInThumbnail.replace('http://cdn', 'https://cdns');
            loggedInThumbnail = loggedInThumbnail.replace('http://pbs', 'https://pbs');
            loggedInThumbnail = loggedInThumbnail.replace('http://', '//');
        }
        sessionStorage.setItem("gigyaName", profile.nickname);
        sessionStorage.setItem("gigyaFirstName", profile.firstName);
        sessionStorage.setItem("gigyaAvatar", loggedInThumbnail);
        sessionStorage.setItem("gigyaUID", profile.UID);
        userDataHtml = JSON.stringify(completeRespObj, null, 2);
        sessionStorage.setItem("gigyaUserDataHtml", userDataHtml);
        gigyaPlugins.checkUser();
        gigyaPlugins.innerLoggedIn();
    }

    gigyaPlugins.logoutHandler = function () {
        sessionStorage.removeItem("gigyaName");
        sessionStorage.removeItem("gigyaAvatar");
        sessionStorage.removeItem("gigyaFirstName");
        sessionStorage.removeItem("gigyaUID");
        sessionStorage.removeItem("gigyaUserDataHtml");
        gigyaPlugins.checkUser();
    };
    
    gigyaPlugins.checkUser= function() {
    if (gigyaPlugins.helpers.isLoggedIn()===true) {
        if ((sessionStorage['gigyaUserDataHtml'] !=null) && (sessionStorage['gigyaUserDataHtml'] !=='undefined')) {
            userDataHtml=sessionStorage['gigyaUserDataHtml'];
			userGigyaAvatar=sessionStorage['gigyaAvatar'];
        }
        gigyaPlugins.innerLoggedIn();
        
    } else {
        gigyaPlugins.innerLoggedOut();
    }
};

gigya.accounts.addEventHandlers({
    onLogin: gigyaPlugins.loginHandler,
    onLogout: gigyaPlugins.logoutHandler
});
gigyaPlugins.checkUser();

/* ********************************************************* */


</script>

 

View the code:
Code Block
languagejs
<html>
<head>
    <title></title>
	//<!-- Following is the line for adding your Gigya API key -->
    <SCRIPT type="text/javascript" lang="javascript" src="http://cdn.gigya.com/JS/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W"></SCRIPT> 
</head>
<body>
//<!-- The following div contains the same command for login and registration, with a different start screen -->
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 300px;">
	<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'Default-RegistrationLogin'});">Login</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
	<a href="#" onclick="gigya.accounts.showScreenSet({screenSet:'Default-RegistrationLogin', startScreen:'gigya-register-screen'});">Register</a> 
</div>

After you've integrated Gigya's RaaS into your site, users are able to login or register. Upon registration, a user account is created in Gigya's secure database, which indexes information dynamically and flexibly - so no additional setup is required. RaaS'  UI Builder , use of  Markup Extensions , and  JavaScript APIs  all contribute to the ease of setting up and customizing RaaS. 

For an overview of the minimal implementation process, read the Quick Implementation Guide.

Features

Table of Contents
maxLevel2
minLevel2
indent10px

Registration and Login

RaaS offers many options for registering or logging in to sites: 

  • Registration: after a user signs up, an account is created in our dynamic database. Users can register through the out-of-the-box site registration flow, or log in with their social network accounts to further streamline the process. You can fine-tune and improve the quality of the data acquired by setting up conditional flows: after a user shares information about themselves (such as ownership of a pet) a separate flow can be triggered with questions about the type of animal, the pet's name and favorite treats. Registration screens are highly flexible and may include: 
    • Data input: Registration screens can include email subscriptions, number of children, name of pet or anything else. 
    • Validation: Built-in mechanisms which validate the quality of the data (e.g. date format, email format) and password strength. 
    • Security:  Registration screens can include up-front security checks such as CAPTCHA verification, and two-factor authentication . 
  • Login: In addition to offering site users a site account login
 or  social login , RaaS offers advanced federation options including, for example, SAML IdPs and OpenID Connect Providers. In this case, authorizing the user is handled by a trusted third party.
  • Social Login, and SMS Login, RaaS offers advanced federated options such as SAML and OpenID Connect
  • Single Sign-On : in multi-site scenarios, Single Sign-On (SSO) is used to automatically log-in users to all sites that share the SSO after signing in to any one of them. SSO manages a single session for a user for all group sites, so when a user is logged in to one site, that user is logged in and gains immediate access to all other sites in that group, saving them the trouble of authenticating each child site individually and providing you as the site group manager with a 360 degree view of this consumer's profile and behavior on all your sites. 

Smooth User-Facing Flows

Logging in or registering to your site are done in a minimal number of steps which cover all the main login scenarios, with built-in indicators for password strength and email confirmation, to minimize friction, eliminate frustration, and increase registration and conversion rates. In addition, users can log in with their social network accounts, an option that is proven to simplify the process and increases the number of users even further. Gigya's out-of-the box flows ensure that users are not threatened or discouraged at any stage by a tiresome loop or endless forms with mysterious requirements. The default flows are referred to as  UI Builder , meaning groups Screen-Sets: groups of user-facing screens which contain a logical flow. The design is responsive so that signing in can be performed easily from any device. RaaS is supported in all standard browsers, and includes native mobile support. 

Flows include:

  • Login/registration 
  • Profile update 
  • Re-authorization 
  • Account linking (to prevent duplicate accounts in case a user logs in with a social account and also creates a site account in a separate registration session).

See Screen-Sets for a full description of the flows.

 Example of a Login Process

Easily Customizable

  • UI Builder: The registration process is based on preconfigured flows which display the relevant screen to the user. For example, a registration flow uses the registration screen set, where the first screen includes a "Forgot your password?" button which triggers an e-mail input screen. You can configure these screens using the UI Builder: a WYSIWYG canvas where you can easily edit fields, add new fields, and add plugins such as a Captcha verification. 
  • CSS and Markup : A more advanced option is to edit the screen-set's CSS files, or the HTML and CSS markup.  
  • Policies : You can customize the policies for registering and logging in, according to your security and regulation standards. Examples for optional configurations:
    • Verification and other emails - easily change the text and appearance of automatically generated emails within the registration and login flows. 
    • Required strength of password
    • Two-factor authentication
  • Conditional workflows: The UI Builder includes the option for displaying a different registration flow if a certain condition has been met, for example: adding a "Pet name" field if the user has indicated he or she owns a pet; or hiding or showing certain fields based on the user's age. 
  • Localization: Since all texts in the user-facing flows are editable, you can translate any flow easily. In addition, we support out-of-the-box error messages in multiple languages. Choose the message language by using the lang parameter of the Global Conf object.

The UI Builder

...