Login or Signup page

Agar aap Blogger me Login/Signup system add karna chahte hain, toh sabse easy aur secure tareeka Firebase Authentication ka use karna hai. Main yaha Firebase Authentication ko Google Login aur Email/Password Login ke saath Blogger me integrate karne ka step-by-step process bata raha hoon.

Step 1: Firebase Account Banayein

Google Firebase Console par jayein: Firebase Console
"Create a Project" button par click karein.
Project ka naam daalein (Jaise "MyBloggerLogin").
Terms accept karein aur "Continue" karein.
Google Analytics ko disable ya enable karein, fir "Create Project" par click karein.
Jab project create ho jaye, "Continue" par click karein.

Step 2: Firebase Authentication Enable Karein

Firebase Console me "Authentication" section me jayein.
Sign-in method tab par click karein.
"Email/Password" aur "Google Sign-in" enable karein.
Save button par click karein.

Step 3: Blogger ke HTML me Firebase SDK Add Karein

Blogger ke dashboard me jayein:

Blogger Dashboard → Theme → Edit HTML par click karein.
<head> tag ke andar Firebase ka SDK add karein:

<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js"></script>

Ab Firebase ko initialize karein. Yeh script <body> ke andar ya <head> ke neeche paste karein:

<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  firebase.initializeApp(firebaseConfig);
</script>

⚠ Note:

apiKey, authDomain, etc. aapko Firebase Console → Project Settings me milega.
"YOUR_API_KEY", "YOUR_PROJECT_ID" ko apne Firebase ke credentials se replace karein.

Step 4: Login & Signup Form Create Karein

Ab aapko ek Login aur Signup form create karna hoga. Blogger ke HTML section me yeh code add karein:

<h2>Signup</h2>
<input type="email" id="signupEmail" placeholder="Enter Email">
<input type="password" id="signupPassword" placeholder="Enter Password">
<button onclick="signup()">Signup</button>

<h2>Login</h2>
<input type="email" id="loginEmail" placeholder="Enter Email">
<input type="password" id="loginPassword" placeholder="Enter Password">
<button onclick="login()">Login</button>
<button onclick="googleLogin()">Login with Google</button>

<button onclick="logout()">Logout</button>

<script>
  function signup() {
    var email = document.getElementById("signupEmail").value;
    var password = document.getElementById("signupPassword").value;
    
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        alert("Signup successful!");
      })
      .catch((error) => {
        alert(error.message);
      });
  }

  function login() {
    var email = document.getElementById("loginEmail").value;
    var password = document.getElementById("loginPassword").value;

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        alert("Login successful!");
      })
      .catch((error) => {
        alert(error.message);
      });
  }

  function googleLogin() {
    var provider = new firebase.auth.GoogleAuthProvider();

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        alert("Google Login Successful!");
      })
      .catch((error) => {
        alert(error.message);
      });
  }

  function logout() {
    firebase.auth().signOut().then(() => {
      alert("Logout successful!");
    }).catch((error) => {
      alert(error.message);
    });
  }
</script>

Step 5: Test Karein

Blogger me "Save" button dabayein.
Apni Blogger site open karein aur Signup/Login test karein.
Firebase ke Authentication section me jaakar check karein ki naye users add ho rahe hain ya nahi.

Bonus: User Login Status Show Karein

Agar aap chahte hain ki user ka login status automatically show ho, toh yeh code bhi add karein:

<script>
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      alert("User logged in: " + user.email);
    } else {
      alert("No user logged in");
    }
  });
</script>

Final Result:

✅ Aapke Blogger site me ek Login aur Signup system successfully add ho gaya hai jo Firebase Authentication ka use karta hai.

✅ Users apne Email aur Google Account se login kar sakenge.

✅ Data Firebase ke authentication section me store hoga.

Agar aap chahte hain ki main aur customization bataun (jaise ki profile page, user dashboard, etc.), toh bata sakte hain!

Go to Link

Learna The Teaching Hub