Social Media Integration (Gigya)

[eistrati]

I'm kind of new to this framework, so please bear with me if you think the question is stupid... I'm trying to integrate 3rd party javascript code (http://developers.gigya.com/040_Demos/005_Social_Login) to my User Card view. I'm out of ideas, so please help me out to make this son of the ... to work!

So far I've created 'social.js' on the same level with 'app.js' that initialize 'conf' and 'login_params', included it into 'index.html' and below is my 'usercard.js' file from 'views' folder:


ToolbarDemo.views.Usercard = Ext.extend(Ext.form.FormPanel, {
title: "profile",
iconCls: "user",
scroll: "vertical",


initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Profile"
}],


items: [{
xtype: 'fieldset',
title: 'Login with your social network',
items: [{
styleHtmlContent: true,
html: "<div id='componentDiv'></div>",


render: function() {
gigya.services.socialize.showLoginUI(conf, login_params);
},


handler: function() {
function createSignature(UID, timestamp) {
encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
// On server side use decodeURIComponent() function to decode an encoded UID
return '';
};


// Note: the actual signature calculation implementation should be on server side
function verifyTheSignature(UID, timestamp, signature) {
encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
// On server side use decodeURIComponent() function to decode an encoded UID
alert('Your UID: ' + UID + '\n timestamp: ' + timestamp + '\n signature: ' + signature + '\n Your UID encoded: ' + encodedUID);
};


// Logout from Gigya platform. This method is activated when "Logout" button is clicked
function logoutFromGS() {
gigya.services.socialize.logout(conf, {/*no required params*/}); // logout from Gigya platform
};


gigya.services.socialize.addEventHandlers(conf, {
context: { str: 'congrats on your' },


onLogin: function(eventObj) {
alert(eventObj.context.str + ' ' + eventObj.eventName + ' to ' + eventObj.provider
+ '!\n' + eventObj.provider + ' user ID: ' + eventObj.user.identities[eventObj.provider].providerUID);
// verify the signature ...
verifyTheSignature(eventObj.UID, eventObj.timestamp, eventObj.signature);


// Check whether the user is new by searching if eventObj.UID exists in your database
var newUser = true; // lets assume the user is new


if (newUser) {
// 1. Register user
// 2. Store new user in DB
// 3. link site account to social network identity
// 3.1 first construct the linkAccounts parameters
var dateStr = Math.round(new Date().getTime()/1000.0); // Current time in Unix format
//(i.e. the number of seconds since Jan. 1st 1970)


var siteUID = 'uTtCGqDTEtcZMGL08w'; // siteUID should be taken from the new user record
// you have stored in your DB in the previous step
var yourSig = createSignature(siteUID, dateStr);


var params = {
siteUID: siteUID,
timestamp: dateStr,
cid: '',
signature: yourSig
};


// 3.1 call linkAccounts method:
gigya.services.socialize.notifyRegistration(conf, params);
}


document.getElementById('status').style.color = "green";
document.getElementById('status').innerHTML = "Status: You are now signed in";
},


onLogout: function(eventObj) {
document.getElementById('status').style.color = "red";
document.getElementById('status').innerHTML = "Status: You are now signed out";
}
});
}
}]
}, {
xtype: 'fieldset',
title: 'Or use your personal account',
instructions: 'Please enter the information above.',
defaults: {
labelWidth: '35%'
},
items: [{
xtype: 'emailfield',
name: 'email',
label: 'Username',
placeHolder: 'user@mail.me',
required: true,
useClearIcon: true
},{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
required: true,
useClearIcon: true
}],
}, {
xtype: 'button',
text: 'Login',
ui: 'confirm'
}]
});


ToolbarDemo.views.Usercard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('usercard', ToolbarDemo.views.Usercard);

[eistrati]

Anyone? Please help!

[eistrati]

I have debugged what I could and looks like 'componentDiv' is not initialized, so I assume 'render' is not the right event to use in this case:



items: [{
styleHtmlContent: true,
html: "<div id='componentDiv'></div>",
render: function() {
gigya.services.socialize.showLoginUI(conf, login_params);
},
...


Still nobody can give any advice? I'm kind of disappointed...

[eistrati]

I have went deeper and changed in my code the following line:



html: "<div id='componentDiv'></div>\n<script language='text/javascript'>\nalert(document);\n</script>\n"


I don't see anything in the browser, not even an attempt to alert something. Why?

[eistrati]

I guess I'll keep talking to myself and, eventually, if somebody will be interested in helping me or finds this post helpful. Here is my updated code that kind of works, but needs improvement:



ToolbarDemo.views.Usercard = Ext.extend(Ext.form.FormPanel, {
title: "profile",
iconCls: "user",
scroll: "vertical",
styleHtmlContent: true,
html: '<div id="componentDiv"></div>',


initComponent: function() {
this.dockedItems = [{
xtype: "toolbar",
title: "Profile"
}];


this.items = [{
xtype: 'fieldset',
title: 'Login with your social network',
items: [{
//styleHtmlContent: true,
//html: '<div id="componentDiv"></div>'
}]
}, {
xtype: 'fieldset',
title: 'Or use your personal account',
instructions: 'Please enter the information above.',
defaults: {
//labelAlign: 'right',
labelWidth: '35%'
},
items: [{
xtype: 'emailfield',
name: 'email',
label: 'Username',
placeHolder: 'user@mail.me',
required: true,
useClearIcon: true
},{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
required: true,
useClearIcon: true
}],
}, {
xtype: 'button',
text: 'Login',
ui: 'confirm',
}];


this.listeners = {
cardswitch: function(newCard, oldCard) {
if (oldCard) {
this.remove(oldCard, true);
}
},
render: function() {
gigya.services.socialize.showLoginUI(conf, login_params);
}
};


ToolbarDemo.views.Usercard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('Usercard', ToolbarDemo.views.Usercard);


Now, the only missing thing is that if I define the item inside panel, it works, but I need it inside the fieldset, which is still work in progress...

[eistrati]

Giving back to the community (Thank You, Eric!):



ToolbarDemo.views.Usercard = Ext.extend(Ext.form.FormPanel, {
title: "profile",
iconCls: "user",
scroll: "vertical",

initComponent: function() {
this.dockedItems = [{
xtype: "toolbar",
title: "Profile"
}];

this.items = [{
xtype: 'fieldset',
title: 'Login with your social network',
items: [{
styleHtmlContent: true,
html: '<div id="componentDiv"></div>',
listeners: {
afterrender: function() {
gigya.services.socialize.showLoginUI(conf, login_params);
}
}
}]
}, {
xtype: 'fieldset',
title: 'Or use your personal account',
instructions: 'Please enter the information above.',
defaults: {
//labelAlign: 'right',
labelWidth: '35%'
},
items: [{
xtype: 'emailfield',
name: 'email',
label: 'Username',
placeHolder: 'user@mail.me',
required: true,
useClearIcon: true
},{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
required: true,
useClearIcon: true
}],
}, {
xtype: 'button',
text: 'Login',
ui: 'confirm',
}];

this.listeners = {
cardswitch: function(newCard, oldCard) {
if (oldCard) {
this.remove(oldCard, true);
}
}
};

ToolbarDemo.views.Usercard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('Usercard', ToolbarDemo.views.Usercard);