To create a Google Sign-In button for your webpage, you need to follow these steps:
Create a new project in the Google Cloud Console and create credentials and a client ID.
Include the Google Platform Library on your web pages that integrate Google Sign-In.
html
<script src="https://apis.google.com/js/platform.js" async defer></script>
Add the following HTML code to your webpage, replacing YOUR_CLIENT_ID with your actual client ID.
html
<div class="g-signin2" data-onsuccess="onSignIn" data-client_id="YOUR_CLIENT_ID"></div>
Add the following JavaScript code to your webpage to handle the sign-in process.
javascript
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}
To allow users to sign out of your app without signing out of Google, add a sign-out button or link to your site.
html
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
Note: The above code is just a basic example, you can customize it according to your needs. Also, make sure to replace YOUR_CLIENT_ID with your actual client ID.