Daily Blogs

Article Title 1

This is the content of the article.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nisl fringilla, pulvinar massa et, blandit odio. Sed at justo eget magna scelerisque convallis.

Article Title 2

This is the content of the article.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nisl fringilla, pulvinar massa et, blandit odio. Sed at justo eget magna scelerisque convallis.

Article Title 3

This is the content of the article.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nisl fringilla, pulvinar massa et, blandit odio. Sed at justo eget magna scelerisque convallis.

body { background:#aba; margin:0; padding:20px 10px; text-align:center; font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif; color:#333; font-size/* */:/**/small; font-size: /**/small; } /* Page Structure ----------------------------------------------- */ /* The images which help create rounded corners depend on the following widths and measurements. If you want to change these measurements, the images will also need to change. */ @media all { #content { width:740px; margin:0 auto; text-align:left; } #main { width:485px; float:left; background:#fff url("https://resources.blogblog.com/blogblog/data/rounders/corners_main_bot.gif") no-repeat left bottom; margin:15px 0 0; padding:0 0 10px; color:#000; font-size:97%; line-height:1.5em; } #main2 { float:left; width:100%; background:url("https://resources.blogblog.com/blogblog/data/rounders/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main3 { background:url("https://resources.blogblog.com/blogblog/data/rounders/rails_main.gif") repeat-y; padding:0; } #sidebar { width:240px; float:right; margin:15px 0 0; font-size:97%; line-height:1.5em; } } @media handheld { #content { width:90%; } #main { width:100%; float:none; background:#fff; } #main2 { float:none; background:none; } #main3 { background:none; padding:0; } #sidebar { width:100%; float:none; } } /* Links ----------------------------------------------- */ a:link { color:#258; } a:visited { color:#666; } a:hover { color:#c63; } a img { border-width:0; } /* Blog Header ----------------------------------------------- */ @media all { #header { background:#456 url("https://resources.blogblog.com/blogblog/data/rounders/corners_cap_top.gif") no-repeat left top; margin:0 0 0; padding:8px 0 0; color:#fff; } #header div { background:url("https://resources.blogblog.com/blogblog/data/rounders/corners_cap_bot.gif") no-repeat left bottom; padding:0 15px 8px; } } @media handheld { #header { background:#456; } #header div { background:none; } } #blog-title { margin:0; padding:10px 30px 5px; font-size:200%; line-height:1.2em; } #blog-title a { text-decoration:none; color:#fff; } #description { margin:0; padding:5px 30px 10px; font-size:94%; line-height:1.5em; } /* Posts ----------------------------------------------- */ .date-header { margin:0 28px 0 43px; font-size:85%; line-height:2em; text-transform:uppercase; letter-spacing:.2em; color:#357; } .post { margin:.3em 0 25px; padding:0 13px; border:1px dotted #bbb; border-width:1px 0; } .post-title { margin:0; font-size:135%; line-height:1.5em; background:url("https://resources.blogblog.com/blogblog/data/rounders/icon_arrow.gif") no-repeat 10px .5em; display:block; border:1px dotted #bbb; border-width:0 1px 1px; padding:2px 14px 2px 29px; color:#333; } a.title-link, .post-title strong { text-decoration:none; display:block; } a.title-link:hover { background-color:#ded; color:#000; } .post-body { border:1px dotted #bbb; border-width:0 1px 1px; border-bottom-color:#fff; padding:10px 14px 1px 29px; } html>body .post-body { border-bottom-width:0; } .post p { margin:0 0 .75em; } p.post-footer { background:#ded; margin:0; padding:2px 14px 2px 29px; border:1px dotted #bbb; border-width:1px; border-bottom:1px solid #eee; font-size:100%; line-height:1.5em; color:#666; text-align:right; } html>body p.post-footer { border-bottom-color:transparent; } p.post-footer em { display:block; float:left; text-align:left; font-style:normal; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ background/* */:/**/url("https://resources.blogblog.com/blogblog/data/rounders/icon_comment.gif") no-repeat 0 45%; padding-left:14px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ background:url("https://resources.blogblog.com/blogblog/data/rounders/icon_comment.gif") no-repeat 0 45%; padding-left:14px; } .post img { margin:0 0 5px 0; padding:4px; border:1px solid #ccc; } blockquote { margin:.75em 0; border:1px dotted #ccc; border-width:1px 0; padding:5px 15px; color:#666; } .post blockquote p { margin:.5em 0; } /* Comments ----------------------------------------------- */ #comments { margin:-25px 13px 0; border:1px dotted #ccc; border-width:0 1px 1px; padding:20px 0 15px 0; } #comments h4 { margin:0 0 10px; padding:0 14px 2px 29px; border-bottom:1px dotted #ccc; font-size:120%; line-height:1.4em; color:#333; } #comments-block { margin:0 15px 0 9px; } .comment-data { background:url("https://resources.blogblog.com/blogblog/data/rounders/icon_comment.gif") no-repeat 2px .3em; margin:.5em 0; padding:0 0 0 20px; color:#666; } .comment-poster { font-weight:bold; } .comment-body { margin:0 0 1.25em; padding:0 0 0 20px; } .comment-body p { margin:0 0 .5em; } .comment-timestamp { margin:0 0 .5em; padding:0 0 .75em 20px; color:#666; } .comment-timestamp a:link { color:#666; } .deleted-comment { font-style:italic; color:gray; } .paging-control-container { float: right; margin: 0px 6px 0px 0px; font-size: 80%; } .unneeded-paging-control { visibility: hidden; } /* Profile ----------------------------------------------- */ @media all { #profile-container { background:#cdc url("https://resources.blogblog.com/blogblog/data/rounders/corners_prof_bot.gif") no-repeat left bottom; margin:0 0 15px; padding:0 0 10px; color:#345; } #profile-container h2 { background:url("https://resources.blogblog.com/blogblog/data/rounders/corners_prof_top.gif") no-repeat left top; padding:10px 15px .2em; margin:0; border-width:0; font-size:115%; line-height:1.5em; color:#234; } } @media handheld { #profile-container { background:#cdc; } #profile-container h2 { background:none; } } .profile-datablock { margin:0 15px .5em; border-top:1px dotted #aba; padding-top:8px; } .profile-img {display:inline;} .profile-img img { float:left; margin:0 10px 5px 0; border:4px solid #fff; } .profile-data strong { display:block; } #profile-container p { margin:0 15px .5em; } #profile-container .profile-textblock { clear:left; } #profile-container a { color:#258; } .profile-link a { background:url("https://resources.blogblog.com/blogblog/data/rounders/icon_profile.gif") no-repeat 0 .1em; padding-left:15px; font-weight:bold; } ul.profile-datablock { list-style-type:none; } /* Sidebar Boxes ----------------------------------------------- */ @media all { .box { background:#fff url("https://resources.blogblog.com/blogblog/data/rounders/corners_side_top.gif") no-repeat left top; margin:0 0 15px; padding:10px 0 0; color:#666; } .box2 { background:url("https://resources.blogblog.com/blogblog/data/rounders/corners_side_bot.gif") no-repeat left bottom; padding:0 13px 8px; } } @media handheld { .box { background:#fff; } .box2 { background:none; } } .sidebar-title { margin:0; padding:0 0 .2em; border-bottom:1px dotted #9b9; font-size:115%; line-height:1.5em; color:#333; } .box ul { margin:.5em 0 1.25em; padding:0 0px; list-style:none; } .box ul li { background:url("https://resources.blogblog.com/blogblog/data/rounders/icon_arrow_sm.gif") no-repeat 2px .25em; margin:0; padding:0 0 3px 16px; margin-bottom:3px; border-bottom:1px dotted #eee; line-height:1.4em; } .box p { margin:0 0 .6em; } /* Footer ----------------------------------------------- */ #footer { clear:both; margin:0; padding:15px 0 0; } @media all { #footer div { background:#456 url("https://resources.blogblog.com/blogblog/data/rounders/corners_cap_top.gif") no-repeat left top; padding:8px 0 0; color:#fff; } #footer div div { background:url("https://resources.blogblog.com/blogblog/data/rounders/corners_cap_bot.gif") no-repeat left bottom; padding:0 15px 8px; } } @media handheld { #footer div { background:#456; } #footer div div { background:none; } } #footer hr {display:none;} #footer p {margin:0;} #footer a {color:#fff;} /* Feeds ----------------------------------------------- */ #blogfeeds { } #postfeeds { padding:0 15px 0; }

Sunday, 4 February 2024

How to Add Google Login To your Website (EASY!)

  How to Add Google Login to Your Website


Integrating Google login into your website can enhance user experience by simplifying the authentication process. Here's a step-by-step guide on how to achieve this:


1. **Create a Project on Google Cloud Console:**


   - Visit the [Google Cloud Console](https://console.cloud.google.com/).

   - Create a new project or choose an existing one.


2. **Enable Google API Services:**


   - Navigate to "APIs & Services" > "Dashboard" in your project.

   - Click on "+ ENABLE APIS AND SERVICES" and search for "Google Identity Toolkit API"; enable it.


3. **Configure OAuth Consent Screen:**


   - In the Cloud Console, go to "APIs & Services" > "Credentials."

   - Configure the OAuth consent screen with necessary details like product name and support email.


4. **Create OAuth 2.0 Client IDs:**


   - In the Credentials section, click "Create Credentials" and select "OAuth client ID."

   - Choose the application type (Web application), add authorized redirect URIs, and create.


 5. **Include Google Sign-In Script:**


   - Add the Google Sign-In script to your HTML file. Place it just after the opening `<body>` tag.


   ```html

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

   ```


### 6. **Create a Google Sign-In Button:**


   - Add a Google Sign-In button to your HTML where you want users to sign in.


   ```html

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

   ```


7. **Implement Sign-In Callback Function:**


   - Create a JavaScript function to handle the sign-in callback.


   ```html

   <script>

       function onSignIn(googleUser) {

           // Handle the signed-in user information

           var profile = googleUser.getBasicProfile();

           console.log('ID: ' + profile.getId());

           console.log('Name: ' + profile.getName());

           console.log('Email: ' + profile.getEmail());

           // Add additional actions or redirection as needed

       }

   </script>

   ```


 8. **Handle Sign-Out:**


   - Implement a function for signing out.


9. **Secure Your Site:**


   - Use HTTPS to secure the communication between your site and Google's servers.


 10. **Test Your Implementation:**


   - Test the Google login functionality on your website to ensure it works as expected.


By following these steps and incorporating the provided code, you can seamlessly integrate Google login into your website, providing users with a convenient and secure authentication option.

Here's a example:

 Remember to replace `YOUR_CLIENT_ID` with the actual Client ID obtained from the Google Cloud Console.


html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your Website Title</title>

    <!-- Include Google Sign-In script -->

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

</head>

<body>


<!-- Google Sign-In Button -->

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


<!-- Script for Sign-In Callback Function -->

<script>

    function onSignIn(googleUser) {

        // Handle the signed-in user information

        var profile = googleUser.getBasicProfile();

        console.log('ID: ' + profile.getId());

        console.log('Name: ' + profile.getName());

        console.log('Email: ' + profile.getEmail());

        // Add additional actions or redirection as needed

    }

</script>


<!-- Replace YOUR_CLIENT_ID with your actual Client ID -->

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


</body>

</html>



Remember to configure your Google Cloud Console project, obtain the Client ID, and update the `meta` tag with your actual Client ID. This code includes the Google Sign-In script, a Google Sign-In button, and a basic JavaScript function to handle the sign-in callback.

posted by DAILY BLOGs @ February 04, 2024   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home