If you're building a web app or service that requires users to log in, you might also need to access files or documents that they have stored in Google Drive or another cloud storage provider. Fortunately, with Google Apps Script, you can easily retrieve the user's files after they have successfully logged in. In this blog post, we'll show you how to do just that.
Step 1: Create a Login Page
First, you'll need to create a login page for your web app or service. There are many ways to do this, but one common method is to use HTML and JavaScript to create a form that prompts the user to enter their userId and password. When the user submits the form, you'll need to validate their credentials and redirect them to the appropriate page if they're successful. Here we are going to design a html form to post user data on apps script webapp url. Let's see how.
adtxt
login.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
.center{margin: auto;width: 50%;padding: 5px;}
/* (C) NO SELECT + HIGHLIGHT COLOR */
* { user-select: none; }
*::selection { background: none; }
*::-moz-selection { background: none; }
fieldset{border-radius:10px;border:1px solid teal;width:50%;margin-left:25%;margin-top:40px;}
legend{color:teal;}
</style>
</head>
<body>
<fieldset class="w3-border-teal w3-small">
<legend><i>Welcome to CodyLab:</i></legend>
<br>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>">
<div class="w3-row center">
<label>UserId:</label>
<input type="text"placeholder="UserId"class="w3-input w3-col s12 w3-center w3-border-green w3-hover-yellow w3-animate-left" name="username"required>
</div><div class="w3-row center">
<label>Password:</label>
<input type="password"name="password"class="w3-input w3-col s12 w3-center w3-border-green w3-hover-yellow w3-animate-rignt"
placeholder="Password" required>
</div><div class="w3-row center">
<input type="submit" value="Login" name="LoginButton"class="w3-input w3-hover-red w3-col s12 w3-teal w3-animate-bottom">
</div>
<div class="center w3-center w3-animate-top"><?= message ?></div>
<hr>
</form>
<input type="submit" value="Recover Password" name="fpassword"
class="w3-red w3-border-white w3-hover-teal w3-left w3-animate-right w3-display-bottom">
<input type="submit" value="Join with us" name="fpassword"
class="w3-green w3-border-white w3-hover-teal w3-right w3-animate-left">
<div class="w3-display-bottommiddle w3-green">©Created by <a href="https://codylab.blogspot.com" target="_blank">CodyLab.</a></div>
</fieldset>
</body>
</html>
adtxt
Step 2: Authenticate the User
After the user has entered their userId and password, you'll need to authenticate their credentials. Here we are going to authenticate credentials base on data like UserId and password that have been stored in Google spreadsheet. If data matched, user redirect to the index.html page
adtxt
code.gs
function doGet(e) {
var html = HtmlService.createTemplateFromFile('login');
html.message = '';
return html.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
var z = (num, places) => String(num).padStart(places, '0');
var wss = SpreadsheetApp.getActiveSpreadsheet();
var us = wss.getSheetByName("Users");
var sa = wss.getSheetByName("active");
var sv = wss.getSheetByName("view");
var s1 = wss.getSheetByName("Sheet1");
var s2 = wss.getSheetByName("Sheet2");
var s3 = wss.getSheetByName("Sheet3");
var pgi;
function doPost(e) {
Logger.log(JSON.stringify(e));
if(e.parameter.LoginButton == 'Login'){
var username = e.parameter.username;
var password = e.parameter.password;
pgi = username;
var vdate = vlogin(username, password);
if(vdate == 'TRUE'){
var html = HtmlService.createTemplateFromFile('index');
var nm = us.getDataRange().getValues();
for(var i=1;i<nm.length;i++){if(username === nm[i][4]){var accv = nm[i][6];var name = nm[i][7];}}
html.username = username;
html.message = name;
html.acc = accv;
return html.evaluate();
}else{
var html = HtmlService.createTemplateFromFile('login');
html.message = 'Failed to Login';
return html.evaluate();
}}else if(e.parameter.LogoutButton == 'Logout'){
louNow(e.parameter.username);
var html = HtmlService.createTemplateFromFile('login');
html.message = 'Logged Out';
return html.evaluate();
}else if(e.parameter.Pcv == 'Pcv'){
louNow(e.parameter.username);
var html = HtmlService.createTemplateFromFile('login');
html.message = 'Access denied.';
return html.evaluate();
}else if(e.parameter.null == null){
louNow(e.parameter.username);
var html = HtmlService.createTemplateFromFile('login');
html.message = 'Login to continue...';
return html.evaluate();
}}
function vlogin(username, password){
var time = Utilities.formatDate(new Date(),"Asia/Kolkata", 'yyyy-MM-dd\'T\'HH:mm:ss');
var clr = sa.getLastRow();
var vlr = us.getLastRow();
var flag ='';
for(var x =1;x<=clr; x++){
if(sa.getRange(x,3).getValue()==username&&username!=""){
flag = 'TRUE';
sa.getRange(x,5).setValue(time);
}}if( flag == ''){
for(var i = 1;i<=vlr; i++){
if(us.getRange(i,2).getValue()=="Yes"&&us.getRange(i,5).getValue()==username&&us.getRange(i,6).getValue()==password&& username!=""){
flag = 'TRUE';
var v2 = us.getRange(i,4).getValue();
var v3 = us.getRange(i,8).getValue();
sa.insertRowAfter(clr).appendRow([time,v2,username,v3]);
}}}if(flag == ''){
flag = 'FALSE';
}return flag;};
adtxt
Step 3: After Authenticate the User.
After successfully logged in, User data displayed.