Google Login IN HTML CSS JS

-

 index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login with Google</title>
</head>

<body>
    <h1>Login with Google</h1>
    <button onclick="oauthSignIn()">Login with Google</button>

    <script>
        function oauthSignIn() {
            var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
            // ADD HERE YOUR CLIENT ID
            var clientId = 'YOUR_CLIENT_ID';
            var redirectUri = 'http://127.0.0.1:5500/login.html';
            var scope = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email';


            var params = {
                'client_id': clientId,
                'redirect_uri': redirectUri,
                'response_type': 'token',
                'scope': scope,
                'include_granted_scopes': 'true',
                'state': 'pass-through value'
            };

            var queryString = Object.keys(params).map(key => key + '=' + encodeURIComponent(params[key])).join('&');

            var authUrl = oauth2Endpoint + '?' + queryString;
            window.location.href = authUrl;
        }
    </script>
</body>

</html>



login.html





<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>

<body>
    <script>
        function parseHashParams() {
            var hashParams = {};
            var e, r = /([^&;=]+)=?([^&;]*)/g,
                q = window.location.hash.substring(1);
            while (e = r.exec(q)) {
                hashParams[e[1]] = decodeURIComponent(e[2]);
            }
            return hashParams;
        }

        var params = parseHashParams();
        var accessToken = params.access_token;

        if (accessToken)
            getUserProfile(accessToken);

        function getUserProfile(accessToken) {
            var peopleEndpoint = 'https://people.googleapis.com/v1/people/me';
            var url = peopleEndpoint + '?access_token=' + encodeURIComponent(accessToken) + '&personFields=emailAddresses,names,photos';

            fetch(url)
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error('Failed to retrieve user profile: ' + response.statusText);
                    }
                })
                .then(data => {
                    document.write("<pre>");
                    document.write(JSON.stringify(data, null, 2))
                    document.write("</pre>");
                })
                .catch(error => {
                    console.error('Error retrieving user profile:', error);
                });
        }
    </script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Express Production Setup - 4 | HELMET

-
 Helmet helps secure Express apps by setting HTTP response headers. it will remove all header from express app like X-Powered-By : express  we can remove using  express.remove("x-powered-by"); but it's make it easy * also help  XSS attacks index.js      import express from " express ";     import helmet from " helmet ";     const app = express ();     // Use Helmet!     app . use ( helmet ());     app . get (" / ", ( req , res ) => {     res . send (" Hello world! ");     });     app . listen ( 8000 );
Read more

Express Production Setup - 3 | CORS

-
 Express Production Setup - 3 | CORS  To enable Cross-Origin Resource Sharing (CORS) in an Express.js application, you can use the cors middleware package. This middleware allows you to control which domains can access your API, what methods are allowed, and what headers can be sent in requests. index.js     const express = require (' express ');     const cors = require (' cors ');     const app = express ();     // CORS options to allow only POST requests     const corsOptions = {         origin: ' http://example.com ', // Replace with your client's origin         methods: [' POST ', " GET ", " PUT ", " PATCH ", " DELETE "],         credentials: true // allow cookies     };     // Apply CORS middleware with the above options     app . use ( cors ( corsOptions ));     // Example route     app . post (' /a...
Read more

Ensuring File Creation in the Current Directory when Converting Python (.py) Script to Executable (.exe).

-
Image
Ensuring File Creation in the Current Directory when Converting Python (.py) Script to Executable (.exe). When you create a file in Python within the current directory, everything works seamlessly. However, if you decide to convert your Python script into a standalone executable (.exe) using tools like PyInstaller, you might encounter a situation where the file is created in a temporary folder, and upon code execution completion, it mysteriously disappears. To overcome this challenge and ensure that your file appears in the current directory, consider using the following code snippet: Explanation: In the above code, we use sys.frozen to check if the script is running in a frozen (compiled into an executable) environment. This is particularly relevant when the script is converted to a standalone executable using tools like PyInstaller. When the script is running as a .py file, myPath is set to the absolute path of the script using os.path.abspath(__file__). When the script is running as...
Read more