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/JSjs/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

...