Menu
I have implemented Google Sign In for my website by following the official tutorial of Google : https://developers.google.com/identity/sign-in/web/sign-in
Using the above tutorial I'm getting the following button
Now I'm trying to Change the text of the button from "Sign In" to "Connect with Google" But nothing is happening..
My Javascript code..
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
loginpassword = profile.getId();
loginemail = profile.getEmail();
};
HTML Code..
<div class="g-signin2" data-onsuccess="onSignIn">Connect with Google</div>
Any idea how to change the text? Even though I'm providing the client ID and the external link for platform.js file it's still not working..Please Help..
456
To create a Google Sign-In button with custom settings, add an element to contain the sign-in button to your sign-in page, write a function that calls signin2. render() with your style and scope settings, and include the https://apis.google.com/js/platform.js script with the query string onload=YOUR_RENDER_FUNCTION .
Add the library + credentials + button to your HTML The script tag grabs the library from Google that reads your <meta> tag to use as the Client ID, and then automatically re-styles the button with the CSS class . g-signin2 . At this point, if you refresh your page, you should see a pretty Sign-In button.
The @abacritt/angularx-social-login package comes with the <asl-google-signin-button></asl-google-signin-button> element, which displays the icon on screen. When clicked, this element initiates the Google Authentication.
The platform.js library from google is rendering the button, along with the text.
In order to override it, you need to build your own custom button. From Google's example:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: #4285f4;
color: white;
width: 190px;
border-radius: 5px;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-weight: bold;
}
span.icon {
background: url('{{path to your button image}}') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
border-right: #2265d4 1px solid;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
</head>
Note that you can find the actual icon file on Google's server for download.
Once you've set the styles and the Javascript, you would call the button itself through HTML, at which point you can specify the text:
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>
Note that you must comply with Google's branding guidelines.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
