Having a lot of issues trying to modify the sign-in button to have the standard google sign-in button. I looked at the documentation (https://developers.google.com/identity/toolkit/web/setup-frontend#customizing_the_ui) but still don't quite understand it.
The below code just shows me the img of google button(doesn't work) and another sign-in button (works). How do I properly modify the script so the google button is the one being used for sign-in?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Copy and paste here the Client configuration from Developer Console into the config variable -->
<!-- goole toolkit API (pete) -->
<script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
<link type="text/css" rel="stylesheet" href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
<script type="text/javascript">
var config =
{
// change gitkit to whatever page needs it (i.e.- index)
widgetUrl: "http://localhost:8000/widget.html",
signInSuccessUrl: "/dashboard",
signOutUrl: "/",
oobActionUrl: "/sendemail",
apiKey: "random-random",
siteName: "CodingDojo On Tap",
signInOptions: ["password","google"],
accountChooserEnabled: true,
displayMode: "providerFirst"
};
window.google.identitytoolkit.signInButton(
'#signIn', // accepts any CSS selector
{
widgetUrl: "https://localhost:8000/widget.html",
signOutUrl: "/",
signInSuccessUrl: "/dashboard",
signInOptions: ["password","google"]
// Optional - Begin the sign-in flow in a popup window
//popupMode: true,
// Optional - Cookie name (default: gtoken)
// NOTE: Also needs to be added to config of ‘widget
// page’. See below
//cookieName: ‘example_cookie’,
}
);
// The HTTP POST body should be escaped by the server to prevent XSS
window.google.identitytoolkit.start(
'#gitkitWidgetDiv', // accepts any CSS selector
config,
decodeURIComponent('%%postBody%%'));
</script><!-- END google toolkit -->
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'random',
// cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.6' // use graph api version 2.5
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=random";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
// function testAPI() {
// console.log('Welcome! Fetching your information.... ');
// FB.api('/me', function(response) {
// console.log('Successful login for: ' + response.name);
// document.getElementById('status').innerHTML =
// 'Thanks for logging in, ' + response.name + '!';
// });
// }
</script>
</head>
<body ng-app="alumniApp">
<!-- FB like and share buttons -->
<!-- <div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div> -->
<!-- END fb like and share button -->
<!-- facebook.id login -->
<!-- END FB -->
<!-- FB sign-in button -->
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="false"></div>
<!-- END fb sign-in button -->
<!-- Include the sign in page widget with the matching 'gitkitWidgetDiv' id -->
<div id="gitkitWidgetDiv">
<div id="fb-root"></div>
<!-- google+ sign-in -->
<div id="signIn"><img src="/static/images/google_btn.png" style="display:block;height:auto;width:auto;margin:auto" /></div>
<!-- <p style="font-size:14px;opacity:.54;margin-top:20px;text-align:center">
</p> -->
</div>
</div>
<!-- End identity toolkit widget -->
<hr/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/static/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
What you are doing will only render the sign in button which when clicked will launch the identity toolkit for sign in process.
window.google.identitytoolkit.signInButton
signInOptions: ["password","google"] is used only for the sign in widget:
window.google.identitytoolkit.start
That will show the buttons as configured in sign in options.
If you wish to modify the original sign in button, you can use css to do so or you can set up your own button and run the following on click:
window.google.identitytoolkit.signIn()