Creating a Google login system using HTML
Creating a login system using only HTML is not possible as HTML is only used for creating the structure and layout of a webpage. To create a Google login system, you will need to use a server-side programming language such as PHP or Node.js, in combination with the Google Sign-In API.
Here is an example of how you might implement a Google login system using JavaScript and the Google Sign-In API:
1. First, you will need to create a project in the Google API Console and enable the Google Sign-In API.
2. Then, you will need to create a client ID for your website. This will allow your website to communicate with the Google Sign-In API.
3. Next, you will need to add the Google Sign-In API to your website. You can do this by including the following code in the head of your HTML file:
<script src="https://apis.google.com/js/platform.js" async defer></script>
Then, you will need to create a Google Sign-In button on your website. You can do this by adding the following code to your HTML file:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
1. In the javascript function onSignIn you will then use the GoogleAuth.signIn() method to initiate the sign-in process and GoogleAuth.currentUser.get() method to get the user's profile information.
2. Once the user has successfully signed in, you can use the user's profile information to create a session on your server and log the user into your website.
3. On your server-side script, you will validate the token sent by the client, and then use the Google API's to verify the token and get the user's information.
Please note that this is a high-level overview of how you might implement a Google login system and there are many details and complexities that are not covered here. Also, you need to be careful with the security of the implementation, as you are dealing with sensitive user information. It is recommended to use a library for the OAuth2 process and to consult the documentation of the Google API.
1. Get your Google API client ID
To enable Sign In With Google on your website, you first need to set up your Google API client ID. To do so, complete the following steps:
1. Open the Credentials page of the Google APIs console.
2. Create or select a Google APIs project. If you already have a project for the Sign In With Google button or Google One Tap, use the existing project and the web client ID.
3. If your project doesn't have a Web application-type client ID, click Create credentials > OAuth client ID to create one. Be sure to include your site's domain in the Authorized JavaScript origins box. Please note that Google One Tap can only be displayed in HTTPS domains. When you perform local tests or development, you must add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box. The Referrer-Policy header must also be set to no-referrer-when-downgrade when using http and localhost.
Configure your OAuth Consent Screen
Both Sign In With Google and One Tap authentication include a consent screen which tells users the application requesting access to their data, what kind of data they are asked for and the terms that apply.
1. Open the OAuth consent screen page of the Google APIs console.
2. If prompted, select the project you just created.
3. On the "OAuth consent screen" page, fill out the form and click the “Save” button.
1)Application name: The name of the application asking for consent. The name should accurately reflect your application and be consistent with the application name users see elsewhere. The application name will be shown on the One-tap dialog window.
2)Application logo: An image on the consent screen that will help users recognize your app. The logo is shown on Sign In With Google consent screen and on account settings, whereas it’s not shown on One Tap dialog.
3)Support email: Shown on the consent screen for user support and to G Suite administrators evaluating access to your application for their users. This email address will be shown to users on the Sign In With Google consent screen when the user clicks the application name.
4)Scopes for Google APIs: Scopes allow your application to access your user's private Google data. For the authentication, default scope (email, profile, openid) is sufficient, you don't need to add any sensitive scopes. It is generally a best practice to request scopes incrementally, at the time access is required, rather than up front. Learn more.
5)Authorized domains: To protect you and your users, Google only allows applications that authenticate using OAuth to use Authorized Domains. Your applications' links must be hosted on Authorized Domains. Learn more.
6)Application Homepage link: Shown on Sign In With Google consent screen and One-Tap GDPR compliant disclaimer information under the “Continue as” button. Must be hosted on an Authorized Domain.
7)Application Privacy Policy link: Shown on Sign In With Google consent screen and One-Tap GDPR compliant disclaimer information under the “Continue as” button. Must be hosted on an Authorized Domain.
8)Application Terms of Service link (Optional): Shown on Sign In With Google consent screen and One-Tap GDPR compliant disclaimer information under the “Continue as” button. Must be hosted on an Authorized Domain.
Figure 1. OAuth Consent Screen fields shown on One Tap UICheck "Verification Status", if your application needs verification then click the "Submit For Verification" button to submit your application for verification. Refer to OAuth verification requirements for details.
4. Check "Verification Status", if your application needs verification then click the "Submit For Verification" button to submit your application for verification. Refer to OAuth verification requirements for details.
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.
The following is an example of a Google Sign-In button that specifies custom style parameters:
<html>
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
<div id="my-signin2"></div>
<script>
function onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
}
function onFailure(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>You can also specify settings for a custom Google Sign-In button by defining data- attributes to a div element with the class g-signin2. For example:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">You can build a Google Sign-In button to fit your site's design. You must follow the branding guidelines and use the appropriate colors and icons in your button. The branding guidelines also provide icon assets that you can use to design your button. You must also ensure that your button is as prominent as other third-party login options.
The following is an example of a Google Sign-In button built with a custom graphic:
<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: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
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>
<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>