How to Create advanced Login System in Web Appscript | Get User Data After Sucessful Login

🎉 Welcome to our website, where exploration meets inspiration! 🌟 Join us on our journey by subscribing to our YouTube channel, fueling our motivation to craft innovative projects. 🚀

Setup Video Guide Video

Steps to Install The Google Web App in your End.

What You Exactly Need 

A Google Account / Google Sheet File

Basic Knowledge of HTML , CSS , JAVASCRIPT 

Basic Knowledge of Google Appscript

Learn How to Deploy a New Web or Manage Web App in Appscript

Important!You need to have basic programming knowledge of HTML, CSS, and JavaScript to modify the code in this post. However, I will try my best to make the code readable and editable by non-programmers too.

Please Follow The Steps Here

Click On Make a Copy To Copy the File In your Drive

Now Click on Extension and Choose a Appscript Option

Click on Deploy and Press on New Deployment

Now Here You Need to Select Anyone and Press on Deploy

After Deploy Allow Permission After Permission Given a URL Comes Which is Used to Access Your Web App and if You change in codes after deployment You need to apply Changes Need Deploy Again or Manage Deployments,

For Custom Projects!If You want a Custom Project For Your Business then Conatct Us :  +923224083545

Important!We always deliver what we promise to our clients. Quality over quantity is our motto! Our custom projects are priced reasonably and affordably for everyone. Join us and let's create something amazing together! 🎉🚀 Conatct Us :  +923224083545

DOWNLOAD CODE FILES

Contact us For Project

Access all of Our Google sheets

JOIN VIP MEMBERSHIP

code.gs

function doGet(e) {
  var x = HtmlService.createTemplateFromFile("index");
  var y = x.evaluate();
  var z = y.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return z;
}

function checkLogin(username, password) {
  var url = '//// YOUR SHEET URL ///////////';
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("DATA");
  var getLastRow = webAppSheet.getLastRow();
  var found_record = '';

  for (var i = 1; i <= getLastRow; i++) {
    if (webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() && 
        webAppSheet.getRange(i, 2).getValue().toUpperCase() == password.toUpperCase()) {
      var userRecord = webAppSheet.getRange(i, 5).getValue(); // Assuming URL is in column E
      if (userRecord) {
        return { result: 'TRUE', url: userRecord };
      }
    }
  }

  return { result: 'FALSE', url: '' };
}

function AddRecord(usernamee, passwordd, email, phone) {
  var url = '///// YOUR SHEET ID /////';
  var ss = SpreadsheetApp.openByUrl(url);
  var webAppSheet = ss.getSheetByName("/// SHEET NAME ////");
  webAppSheet.appendRow([usernamee, passwordd, email, phone, '']); // Empty URL initially
}

function doPost(e) {
  var formData = JSON.parse(e.postData.contents);
  var username = formData.username;
  var password = formData.password;
  var email = formData.email;
  var phone = formData.phone;

  AddRecord(username, password, email, phone);

  return ContentService.createTextOutput("Record added successfully.");
}

PASTE CODE IN INDEX.HTML SCRIPT SECTION

   function LoginUser() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        google.script.run.withSuccessHandler(function(output) {
          if (output.result == 'TRUE') {
            if (output.url) {
              window.open(output.url, '_blank'); // Open user-specific URL in a new tab
            } else {
              document.getElementById('errorMessage').innerHTML = 'URL not found for the user';
            }
          } else if (output.result == 'FALSE') {
            document.getElementById('errorMessage').innerHTML = 'Username or Password Not Correct';
          }
        }).checkLogin(username, password);
      }


       function function1(){
    document.getElementById("page1_id1").className = "page1_class1-off";
    document.getElementById("page2_id1").className = "page2_id1";
}
 
function function3(){ 
  document.getElementById("page3_id1").className = "page3_id1-off";
  document.getElementById("page1_id1").className = "page1_id1"; 
}

function AddRow()
    {
      var usernamee = document.getElementById("usernamee").value;
      var passwordd = document.getElementById("passwordd").value;
      var email = document.getElementById("email").value;
      var phone = document.getElementById("phone").value;
      if (usernamee==""|| passwordd==""|| email==""|| phone=="") {
        return false;
      }
      else {
      google.script.run.AddRecord(usernamee,passwordd,email,phone);
      document.getElementById("page2_id1").className = "page2_id1-off";
      document.getElementById("page3_id1").className = "page3_id1";
     }
    }

PASTE THIS CODE IN STYLE SECTION OF INDEX.HTML

      .page1_class1-off {
        display: none;
      }
      /*page2*/
      .page2_class1 {
        display: none;
      }
      .page2_id1-off {
        display: none;
      }
      /*page3*/
      .page3_class1 {
        display: none;
      }
      .page3_id1-off {
        display: none;
      }
      input[type=text]:hover {
        border-bottom: 2px solid black;
      }
      input[type=number]:hover {
        border-bottom: 2px solid black;
      }
      input[type=password]:hover {
        border-bottom: 2px solid black;
      }
      body {
        background-image: url('Custom Code');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

     .neon-text {
      font-weight: bold;
      color: #00ff00; /* Neon green color */
      text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; /* Multiple shadows for neon glow */
    }

    /* Enhanced Glassmorphism */
    .glass-container {
      background: rgba(255, 255, 255, 0.15); 
      border: 2px solid rgba(128, 128, 128, 0.3); 
      backdrop-filter: blur(35px); 
      box-shadow: 0 16px 12px rgba(0, 0, 0, 0.2); 
      width: 300px; 
      padding: 25px 30px; 
      margin: 40px auto; 
    }

    /* Polymorphism for smaller screens */
    @media (max-width: 800px) {
      .glass-container {
        width: 80%;
        padding: 15px;
      }
    }

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <br><br>
    <!--page1-->
    <center>
      <div class="glass-container page1_class1" id="page1_id1">
        <h1>Login</h1>
        <br>
        <input type="text" id="username" placeholder="Username" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>
        <br>
        <input type="password" id="password" placeholder="Password" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/>
        <br><span id="errorMessage" style="color: red" ></span><br>
        <input type="submit" value="Login" onclick="LoginUser()"  style="float: right;padding-top: 1px;padding-bottom: 1px;padding-left: 10px;padding-right: 10px;font-size: 0.9em;font-weight:bold;" /><br>
        <br>
        <b>If you don't have an account,</b><input type="button" onClick="function1()" value="Create New" style="margin-top: 5px;font-weight:bold;" />
      </div>

      <!--page2-->
          <div class="glass-container page2_class1" id="page2_id1">
        <h1>Create Account</h1>
        <input type="text" id="usernamee" placeholder="Name" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>
        <br>
        <input type="password" id="passwordd" placeholder="Create password" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size: 0.9;width: 50%;font-weight:bold;" /><br>
        <br>
        <input type="text" id="email" placeholder="Email" style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;"/><br>
        <br>
        <input type="number" id="phone" placeholder="Phone no." style="border-top: none;border-right: none;border-left: none;outline: none; text-align: center;font-size:0.9em ;width: 50%;font-weight:bold;" /><br><br>
        <b style="color:red;">Password must contain letters and numbers. It will not work without letters and numbers.</b><br><br>
        <input type="submit" value="Create" onclick="AddRow()" style="float: right;padding-top: 1px;padding-bottom: 1px;padding-left: 10px;padding-right: 10px;font-size: 0.9em;font-weight:bold;" />
        <br>
      </div>

      <!--page3-->
        <div class="glass-container page3_class1" id="page3_id1">
        <center>
          <h2>Your account has been successfully created. Login to your account</h2>
          <input type="submit" onClick="function3()" value="Login" style="font-weight:bold;"><br>
        </center>
      </div>
    </center>
  </body>
  <script>
  </script>
</html>

For Custom Projects!If You want a Custom Project For Your Business then Conatct Us :  +923224083545 . 

Terms of Use

If you want to use this Code in your posts, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Codebox by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.rameezimdad.blogspot.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about to help uou to Automate Your Business. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!