Create Login Google Web App using Google Account

In this video, I demonstrate how to log in to a Google Web App using a Google Account but also control who has editor access through the Google Sheets Share.

How to Video:

Video Notes:

Code in Video:

function doGet(e) {
    const userEmail = Session.getActiveUser().getEmail();
    var htmlOutput =  HtmlService.createTemplateFromFile('Index');
    htmlOutput.email = userEmail;
    return htmlOutput.evaluate();
}

function AddRecord(firstname, lastname, street, city, state, zip) {
  const userEmail = Session.getActiveUser().getEmail();
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName("DATA");
  dataSheet.appendRow([firstname, lastname, street, city, state, zip, userEmail, new Date()]);
  return 'Record Added';
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css"  />
    <base target="_top">
    <script>
    function onFailure(error) {
      document.getElementById('display').innerHTML = "ERROR: " + error.message;
    }
    function onSuccess(message) {
      document.getElementById("firstname").value = '';
      document.getElementById("lastname").value = '';
      document.getElementById("street").value = '';
      document.getElementById("city").value = '';
      document.getElementById("state").value = '';
      document.getElementById("zip").value = '';
      document.getElementById('display').innerHTML = message;
    } 
    function AddRow()
    {
      document.getElementById('display').innerHTML = "";
      var firstname = document.getElementById("firstname").value;
      var lastname = document.getElementById("lastname").value;
      var street = document.getElementById("street").value;
      var city = document.getElementById("city").value;
      var state = document.getElementById("state").value;
      var zip = document.getElementById("zip").value;
      google.script.run.withSuccessHandler(onSuccess).
                        withFailureHandler(onFailure).
                        AddRecord(firstname, lastname, street, city, state, zip);      
    }
    </script>
  </head>
  <body>
  <div style="padding: 10px;" > 
  <h1>Web App Login</h1>
  <span>Logged In: <?= email ?></span>
  <hr>
  <form>
  <div class="form-row">
  <div class="form-group col-md-3">
  <label for="firstname">First Name</label>
  <input type="text" id="firstname" class="form-control" />
  </div>
  <div class="form-group col-md-3">
  <label for="lastname">Last Name</label>
  <input type="text" id="lastname" class="form-control" />
  </div> 
  </div>
  <div class="form-row">
  <div class="form-group col-md-6">
  <label for="street">Street</label>
  <input type="text" id="street" class="form-control" />
  </div> 
  </div>
  <div class="form-row">
  <div class="form-group col-md-3">
  <label for="city">City</label>
  <input type="text" id="city" class="form-control" />
  </div> 
  <div class="form-group col-md-2">
  <label for="state">State</label>
  <input type="text" id="state" class="form-control" />
  </div> 
  <div class="form-group col-md-1">
  <label for="zip" >Zip</label>
  <input type="text" id="zip" class="form-control" />
  </div> 
  </div>
  <div class="form-group col-md-12">
  <input type="button" value="Add Record" class="btn btn-primary" onclick="AddRow()" />
    <span id="display" ></span>
  </div>
  </form> 
  </div>
  </body>
</html>

Related Posts

Embed Map with Marker Google Web App Embed Map with Marker on Google Web App - In this post, I demonstrate how to embed a map with a marker on a Web App using locations from Google Sheets. I am using the Leaflet Javascript Library.
Create Custom HTML Form Google Sheets Create Custom HTML Form for Google Sheets - In this post, I demonstrate the steps on creating a Custom HTML Form for Google Sheets using Google Apps Script.
Bootstrap Sidebar Form Google Sheets How to Create a Bootstrap Sidebar Form on Google Sheets - In this post, I demonstrate how to create a Bootstrap sidebar HTML Form on Google Sheets.
Link Web App Pages How to Link Between Google Web App Pages - In this post, I demonstrate how to link Web App HTML pages together and pass parameters to the Web App HTML pages using Google Apps Script.
Create Charts in Google Web App Create Charts in Web Apps using Google Sheets - In this post, I demonstrate how to use the Chart.js JavaScript library to create Charts on a Web App using data from Google Sheets.
Create Date Picker on Web App How to Create Date Picker on Google Web App - In this post, I demonstrate how to create a Date Picker on HTML form in a Google Web App. This helps the user to easily select the date as well as keep it in a uniform format.
Call Apps Script Function From Web App How to Call Google Apps Script Function from Web App - In this post, I demonstrate how to call Google Apps Script Functions from Web App. I also show how to pass parameters in and out of functions.
Create Web App Form on Google Sheets How to Create Web App Form on Google Sheets - In this post, I demonstrate how to create a simple Web App form that populates Google Sheets using Google Apps Script.
Display Pictures Web App Display Pictures on Google Web App - In this post, I demonstrate how to display pictures from Google Drive on a Web App using Google Apps Script.
Autocomplete Field Google Web App How to use Autocomplete Field on Google Web App - In this post, I demonstrate how to use the JQuery Autocomplete Field within a Bootstrap Form on Google Web App. This helps with narrowing down a list of values for easier selection on a dropdown
JQuery Tablesorter Web App JQuery Tablesorter on Google Web App - In this post, I demonstrate how to use the JQuery Tablesorter on a Google Web App. This is a good way to sort, filter and scroll through a table data.
JSON Web App Convert Google Sheet into JSON Web App - In this post, I demonstrate how to convert a Google Sheet into a JSON Web App. The JSON Web App can be used as a web service to bring data into a website.
How to Deploy a Google Web App - In this post, I demonstrate how to deploy a Google Web App. I cover all the settings that are involved in deploying a web app.
Multi Select Web App Google Sheets Create Multi-Select Dropdown in Web App on Google Sheets - In this post, I demonstrate how to use a multi-select dropdown in a Web App on Google Sheets. This will in turn store the multiple values in a cell on Google Sheets.
File Loader Google Web App Create File Loader Google Web App to Google Drive - In this post, I demonstrate how to create a File Loader Google Web App to Google Drive on Google Sheets. It works with such files as PNG, JPG, DOC, XLS, PDF, and many more.
Sort Google Sheet Web App How to Sort Google Sheet on Google Web App - In this post, I demonstrate how to Sort a Google Sheet on a Google Web Application. It is set up for each Column to be Sorted in Ascending Order.
Using Bootstrap Modal Using Bootstrap Modal on Google Web App - In this post, I demonstrate how to use Bootstrap Modal on a Google Web Application to show Nested Data.
CRUD Google Web App Create a Bootstrap CRUD Google Web App using Google Sheets - In this post, I demonstrate how to create a Bootstrap CRUD application using Google Web App and Google Sheets
Filter Google Sheet in Web App How to Filter Google Sheet in Google Web App - In this post, I demonstrate how to Filter a Google Sheet in a Google Web Application using HTML and Google Apps Script.
Colorbox Google Web App Create Nested View on Google Web App using Colorbox - In this post, I demonstrate how to create a nested view using Colorbox jQuery library on Google Web Application.