Create Google Login In JavaScript

Create Google Login In JavaScript

Here is an example of how you can create a Google login in JavaScript using the Google Sign-In API:

Create a Google API Console project and configure the Google Sign-In API: Go to the Google API Console (https://console.developers.google.com/), create a new project, and enable the Google Sign-In API.

Get the API key: After enabling the API, go to the Credentials page and get the API key.

Include the Google Sign-In API in your HTML file: Add the following code to the head of your HTML file to include the Google Sign-In API:

<script src="https://apis.google.com/js/platform.js" async defer></script>

1. Create a Google Sign-In button: Add a Google Sign-In button to your HTML file by adding the following code:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

1. Add the onSignIn function: Add the following JavaScript function to handle the response after a successful sign-in:

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}

1. Add the API key to your HTML file: Add the API key to your HTML file by adding the following code:

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

1. Test the login: Load your HTML file in a web browser and test the login by clicking the Google Sign-In button. If everything is set up correctly, you should be able to sign in with your Google account and see the user's basic profile information logged to the console.

This is just a basic example of how you can create a Google login in JavaScript. You can expand on this code to add more functionality, such as sending the user's information to your backend or redirecting the user to a different page after a successful sign-in.