For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.

Introduction

Mastering Web Development with Google Apps Script

Google Apps Script serves as a robust bridge connecting various Google services, allowing for seamless data manipulation and interface customization. This tutorial delves deep into leveraging Google Apps Script to build a secure login system, complete with HTML form creation and sophisticated user authentication mechanisms.

Key Learning Points

Key Learning Points:

Google Apps Script Basics: Explore the foundational elements of Google Apps Script and its powerful integration capabilities with Google Sheets, setting the stage for data-driven web applications.
Creating a Custom Login Page: Learn the intricacies of developing a secure login page, where users can sign in using their credentials. This section covers everything from HTML form creation to the implementation of secure login logic using Google Apps Script.
Designing a User-Friendly Registration Page: Follow our detailed instructions to establish a registration page that allows new users to sign up. This includes formulating data validation checks and storing user information securely in Google Sheets.
Script Implementation and Custom Function Creation: Dive into scripting with Google Apps Script to automate the login and registration process. Understand how to write custom functions that interact with Google Sheets, fetching and validating user credentials while ensuring data integrity and security.

Tips and best practices

Practical Applications:

This tutorial not only equips you with the technical know-how to create and manage custom login and registration pages but also empowers you to apply these skills in various scenarios—ranging from managing access to content, securing user data, to enhancing the overall user experience in your web applications.

Conclusion

By the conclusion of this tutorial, you’ll possess a thorough understanding of web development principles, the versatility of Google Apps Script, and the confidence to implement custom login and registration functionalities in your projects. Whether you’re looking to secure a personal project or develop enterprise-level solutions, the skills acquired here will serve as a solid foundation for your web development endeavors.

Script.gs

Copy to Clipboard

/**
 * Serves the login HTML page when a GET request is received.
 * @return {HtmlOutput} The HTML content of the login page.
 */
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index.html');
}

/**
 * Checks the provided login credentials against the data in the spreadsheet.
 * @param {string} email - The user's email.
 * @param {string} password - The user's password.
 * @return {boolean} True if credentials match, false otherwise.
 */
function checkLogin(email, password) {
  // Open the spreadsheet using its ID
  const ss = SpreadsheetApp.openById('YOUR SPREADSHEET ID');
  // Access the specific sheet where credentials are stored
  const sheet = ss.getSheetByName('Credential');
  // Retrieve all data from the sheet
  const data = sheet.getDataRange().getValues();
  
  // Loop through the data to find a matching email and password
  for(let i = 0; i < data.length; i++) {
    if(data[i][0] == email && data[i][1] == password) {
      return true; // Match found
    }
  }
  return false; // No match found
}

/**
 * Retrieves the HTML content for the menu page.
 * @return {HtmlOutput} The HTML content of the menu page.
 */
function getMenuPage() {
  return HtmlService.createHtmlOutputFromFile('menu').getContent();
}

/**
 * Retrieves the HTML content for the registration page.
 * @return {HtmlOutput} The HTML content of the registration page.
 */
function getRegistrationPage() {
  return HtmlService.createHtmlOutputFromFile('registration').getContent();
}

/**
 * Retrieves the HTML content for the login page.
 * @return {HtmlOutput} The HTML content of the login page.
 */
function getLoginPage() {
  return HtmlService.createHtmlOutputFromFile('index').getContent();
}

/**
 * Registers a new user by adding their credentials to the spreadsheet.
 * Throws an error if the user already exists.
 * @param {string} email - The new user's email.
 * @param {string} password - The new user's password.
 */
function registerNewUser(email, password) {
  // Open the spreadsheet using its ID
  const ss = SpreadsheetApp.openById('YOUR SPREADSHEET ID');
  // Access the specific sheet where credentials are stored
  const sheet = ss.getSheetByName('Credential');
  // Retrieve all data from the sheet
  const data = sheet.getDataRange().getValues();

// Check if the email already exists in the spreadsheet
  for(let i = 0; i < data.length; i++) {
    if(data[i][0] == email) {
      throw new Error('User already exists');
    }
  }
  // Append the new user's email and password to the spreadsheet
  sheet.appendRow([email, password]);
}

Index.Html

Copy to Clipboard

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
  <style>
    /* Style for the body: Sets the background image, covers the entire view, centers content */
    body {
      background-image: url(' IMAGE URL ');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

/* Style for the container: White background, padding, rounded borders, shadow, and specific width */
    .container {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 300px;
    }

/* Style for the logo: Centers the logo image within its container */
    .logo {
      background-image: url(' IMAGE URL ');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      height: 100px;
      width: 100%;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    
    <div class="logo"></div>

<h1>Login Page</h1>

<form id="login-form">
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email"><br>
      <label for="pwd">Password:</label><br>
      <input type="password" id="pwd" name="password"><br><br>
      <input type="button" value="Submit" onclick="validateLogin()">
    </form>

<p>New user? <a href="#" onclick="loadRegistration()">Click here</a></p>

<script>
      // Function to validate login credentials
      function validateLogin() {
        google.script.run.withSuccessHandler(function(response) {
          if(response) {
            // Redirects to the menu page if login is successful
            google.script.run.withSuccessHandler(function(html) {
              document.open();
              document.write(html);
              document.close();
            }).getMenuPage();
          } else {
            // Shows an alert if credentials are invalid
            window.alert('Invalid Credentials');
          }
        }).checkLogin(document.getElementById('email').value, document.getElementById('pwd').value);
      }

// Function to load the registration page
      function loadRegistration() {
        google.script.run.withSuccessHandler(function(html) {
          document.open();
          document.write(html);
          document.close();
        }).getRegistrationPage();
      }
    </script>
  </div>
</body>
</html>

Registration.Html

Copy to Clipboard

<!DOCTYPE html>
<html>
<head>
  <title>Registration Page</title>
  <style>
    /* Style for the body: Sets the background image, covers the entire view, centers content */
    body {
      background-image: url(' IMAGE URL ');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

/* Style for the container: White background, padding, rounded borders, shadow, and specific width */
    .container {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 300px;
    }

/* Style for the logo: Centers the logo image within its container */
    .logo {
      background-image: url(' IMAGE URL ');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      height: 100px;
      width: 100%;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    
    <div class="logo"></div>

<h1>Registration Page</h1>

<form id="registration-form">
      <label for="new-email">Email:</label><br>
      <input type="email" id="new-email" name="email"><br>
      <label for="new-pwd">Password:</label><br>
      <input type="password" id="new-pwd" name="password"><br><br>
      <input type="button" value="Register" onclick="registerUser()">
    </form>

<p>Existing user? <a href="#" onclick="loadLogin()">Click here</a></p>

<script>
      // Function to handle user registration
      function registerUser() {
        var email = document.getElementById('new-email').value;
        var password = document.getElementById('new-pwd').value;
        // Calls the server-side function to register the new user
        google.script.run.withSuccessHandler(function(){
            loadLogin(); // Redirects to login page after successful registration
        }).registerNewUser(email, password);
      }

// Function to load the login page
      function loadLogin() {
        // Calls the server-side function to retrieve the login page content
        google.script.run.withSuccessHandler(function(html) {
          document.open();
          document.write(html);
          document.close();
        }).getLoginPage();
      }
    </script>
  </div>
</body>
</html>

Menu.Html

Copy to Clipboard

This blog is my canvas, where I paint with words, sharing tutorials, tips, and tidbits that have enriched my life.

I welcome you. Dive into my articles, engage with my stories, and let’s embark on this journey of discovery together.

Happy reading, and thank you for visiting ArisAzhar.com!

Aris Azhar
Knowledge Seeker

Over 8,000
Benefited from my Channel

Check out my tutorials

I hope you can join in as well!

One Comment

Gerard 1 November 2024 at 10:15 PM - Reply

Is there a way to run the AppSheet app so it first redirects to a login page (created with Apps Script), then returns to the AppSheet app after a successful login?

Create your own custom login and registration page

Introduction

Key Learning Points

Tips and best practices

Script.gs

Index.Html

Registration.Html

Menu.Html

Introduction