I would like to add a Google+ Login to my Sencha Touch 2 webapplication, according to https://developers.google.com/+/web/signin/?hl=de#using_the_client-side_flow.
I have added the google script into the app.json (defined as remote script) and it gets loaded. I created a Container with the html stuff (described by google):
Ext.define('Bubbles.view.LoginView', {
extend: 'Ext.Container',
id: 'loginView',
config: {
fullscreen: true,
layout: 'fit',
html: '<span id=\"signinButton\">'
+ '<span class="g-signin" data-callback="signinCallback" data-clientid="CLIENT_ID" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-scope="https://www.googleapis.com/auth/plus.login"></span>'
+ '</span>',
height: '100%',
width: '100%',
}});
But the screen stays empty, no login button :-(
However, removing this html section above and adding it directly into index.html works. Unfortunately, this is a very bad practice...
Any ideas how to do it properly with Sencha Touch 2?
It's probably not working because the .g-signin
element is getting added to the dom after after Google tries to render the button. Take a look at adding the sign-in button to your page with JavaScript. Especially step four where gapi.signin.render('myButton', additionalParams);
is used to render the button.