রোজার মাসের ফজিলত ও দোয়া Ramadan

How to Add Google Login System to Plus UI Blogger Template Using Firebase

If you want to transform your Blogger site into a professional web application, having a login system is essential. For those using the Plus UI template, you can easily integrate a 1-click Google Login feature using Firebase Authentication. In this tutorial, I will guide you through the entire process—from setting up your Firebase project to displaying the user's profile on your blog. Let's make your blog smarter today!

Why use this system? This feature allows your readers to log in using their Gmail accounts without needing a password. You can display their profile picture in the header and create a custom dashboard page for a personalized experience.

Step 1: Firebase Configuration

Firebase will act as the engine for our authentication system. First, we need to create a project and obtain the API credentials.

1. Go to the Firebase Console and sign in with your Gmail account.
2. Click on "Add project" and give it a name (e.g., your blog's name).
3. In the left sidebar, navigate to Authentication and click the Get Started button.
4. Under the Sign-in method tab, select Google, enable it, provide your project support email, and click Save.
5. Go to Project Settings (the gear icon next to Project Overview).
6. Scroll down to the Your apps section, click the Web () icon, and register your app.
7. Once registered, you will see a code block containing your firebaseConfig.

Note: Copy the values for apiKey, authDomain, projectId, and appId. You will need these for the final script.

Step 2: Setting up the Profile Button in Plus UI

Now, we need to modify the Plus UI header so that the profile icon triggers the login process.

1. Navigate to your Blogger Dashboard and go to Theme > Edit HTML.
2. Press CTRL + F and search for data:item == 'Profile'.
3. Replace the existing code inside that section with the following block:

<li class='isUser' id='user-auth-area'>
   <div id='auth-content'>
      <label class='tIc bIc' onclick='googleLogin()' role='button' title='Login'>
         <b:include name='profile-icon'/>
      </label>
   </div>
</li>
      

Step 3: Integrating the Core JavaScript

This script handles the login logic and profile display. Paste this code right above the closing </body> tag in your theme.

<script src='https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js'/>
<script src='https://www.gstatic.com/firebasejs/9.6.10/firebase-auth-compat.js'/>

<script type='text/javascript'>
//<![CDATA[
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }
  const auth = firebase.auth();
  const provider = new firebase.auth.GoogleAuthProvider();

  function googleLogin() {
    auth.signInWithPopup(provider).then((result) => {
        if (result.user) { window.location.assign("/p/dashboard.html"); }
    }).catch((error) => {
        auth.signInWithRedirect(provider);
    });
  }

  function logout() {
    auth.signOut().then(() => { window.location.assign("/"); });
  }

  auth.onAuthStateChanged((user) => {
    const authArea = document.getElementById('auth-content');
    if (user && authArea) {
      authArea.innerHTML = `
        <div onclick='toggleUserMenu()' style='display:flex;align-items:center;cursor:pointer;'>
          <img src="${user.photoURL}" class="user-avatar" alt="User" style="width:30px;height:30px;border-radius:50%"/>
          <div id="auth-dropdown" class="auth-dropdown">
            <span class="auth-name">${user.displayName}</span>
            <a href="/p/dashboard.html" class="button" style="width:100%; padding:8px; font-size:12px; border-radius:8px; margin-bottom:8px; display:block; text-decoration:none; text-align:center; color:#fff !important; background:var(--linkB);">Dashboard</a>
            <button onclick="logout()" class="button ln" style="width:100%; padding:8px; font-size:12px; border-radius:8px; cursor:pointer;">Logout</button>
          </div>
        </div>`;
    }
  });

  function toggleUserMenu() {
    const menu = document.getElementById('auth-dropdown');
    if (menu) menu.classList.toggle('active');
  }

  window.addEventListener('click', function(e){   
    const authArea = document.getElementById('user-auth-area');
    const dropdown = document.getElementById('auth-dropdown');
    if (authArea && dropdown && !authArea.contains(e.target)){
      dropdown.classList.remove('active');
    }
  });
//]]>
</script>
      

Step 4: Creating the User Dashboard

After logging in, users should be redirected to a page that displays their information.

1. Go to Pages > New Page in your Blogger Dashboard.
2. Title it Dashboard and set the permalink to dashboard.html.
3. Paste the following code into the HTML View of the page:

<div class='tbd-card' id='dashboard-content' style='padding:40px; text-align:center; min-height: 300px;'>
    <div id='user-loading'>Loading profile...</div>
</div>

<script>
  auth.onAuthStateChanged((user) => {
    const dash = document.getElementById('dashboard-content');
    if (user) {
      dash.innerHTML = `
        <img src="${user.photoURL}" style="width:100px; border-radius:50%; border:3px solid var(--linkB);"/>
        <h2>Welcome, ${user.displayName}</h2>
        <p>Email: ${user.email}</p>
        <button onclick="logout()" class="button ln">Logout</button>`;
    } else {
      dash.innerHTML = `<h3>Please login to access your dashboard.</h3>`;
    }
  });
</script>
      

Congratulations! You have successfully implemented a Google Login system and a custom User Dashboard on your blog. This adds a layer of professionalism and trust to your site.

Conclusion

By following this guide, you have turned your Blogger site into a modern membership platform. The combination of Plus UI's sleek design and Firebase's secure authentication provides an excellent user experience. If you encounter any errors or have questions regarding the implementation, feel free to leave a comment below. Happy Blogging!

Go to Link