Skip to content

Instantly share code, notes, and snippets.

@git-janus
Last active August 19, 2021 03:54
How To: Build Web App in Google Apps Script with Sheets as Database Log-in
/**
LOGIN PAGE .GS COMPONENT
*/
function doGet(request) {
return HtmlService
.createTemplateFromFile('HTML')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('SUNNYSIDEUP');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
function LogInAccepted(username,password){
var ss = SpreadsheetApp.openById("1U7sWHbli6npx4RyuwYpoNa1kZS_rzpY8AsDVVYB3av8");//<--SPREADSHEET ID
var ws = ss.getSheetByName("Users");
var ws_log = ss.getSheetByName("Login History");
var tbl = ws.getDataRange().getValues();
var user = ArrayLib.filterByValue(tbl, 4, username);//<--INSTALL ArrayLib library. app id is MOHgh9lncF2UxY-NXF58v3eVJ5jnXUK_T
if(user.length === 0){
return {ACCEPTED:false,ERROR_MSG:"User not recognized"};
}else{
var email = user[0][2];
var isAdmin = user[0][3];
var pass = user[0][5];
var activated = user[0][6];
var avatar_link = user[0][7];
var userdata = {USERNAME:username,EMAIL:email,IMAGELINK:avatar_link,ISADMIN:isAdmin};
if(activated){
if(pass === password){
ws_log.appendRow([new Date,username,true,"Log-in Accepted"]);
return {ACCEPTED:true,ERROR_MSG:"Log-in Accepted",USERDATA:userdata};
}else{
ws_log.appendRow([new Date,username,false,"Incorrect Password"]);
return {ACCEPTED:false,ERROR_MSG:"Incorrect Password",USERDATA:userdata};
}
}else{
ws_log.appendRow([new Date,username,false,"Deactivated account"]);
return {ACCEPTED:false,ERROR_MSG:"Deactivated account",USERDATA:userdata};
}
}
}
function LogSession(){
}
<!--LOGIN PAGE HTML-->
<!DOCTYPE html>
<?!= include("SCRIPT"); ?>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button onclick="submit_credential()">Login</button>
</div>
</body>
</html>
<!--LOGIN PAGE HTML SCRIPT COMPONENT-->
<script>
var appLink = {DEV:"https://script.google.com/macros/s/AKfycbyLjLk-HFsgDAvpxoJQXXaJWmvfKg9XfZAoHt8D4A5-/dev",
EXEC:"https://script.google.com/macros/s/AKfycbw9H6Ca0qYkcSZncPjWPMlJ_Ik1rhK4tRiLrGlxA4wVZWioRkpk/exec"};
function submit_credential(){
var uname = document.getElementById("uname").value;
var psw = document.getElementById("psw").value;
google.script.run.withSuccessHandler(credential_submisstion).LogInAccepted(uname,psw);
}
function credential_submisstion(result){
var post_user_data = "?username=" + result.USERDATA.USERNAME + "&email=" + result.USERDATA.EMAIL + "&imgUrl=" + result.USERDATA.IMAGELINK;
var appUrl;
if(result.ACCEPTED){
if(result.USERDATA.ISADMIN){
appUrl = appLink.EXEC + post_user_data;
}else{
appUrl = appLink.DEV_USER + post_user_data;
}
window.open(appUrl, '_top');
}else{
alert(result.ERROR_MSG);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment