Login system - Apps Script and g-sheet
This tutorial is based on login system in web app project. The web app only can access by valid users that have permission to access the web app. After validation of a user, a new page open where user can operate other hidden features of the app. Here I have only try to show how this function works. If you want to create a crud web app, click here.
Note: To test this demo use 'USER1' as userId and '12345678' as password.
Login Example Page Image
for advance login system Whatsapp-9801740685
Let's move to the steps to create the app. First create a spreadsheet as following example. The spreadsheet has three sheets on it. I have named first sheet as vUsers, second sheet as cUsers and third sheet as stores .
In First sheet, I have stored the resistered users data. When we try to login to the web app, function checks match the input data from this sheet (name- vUsers). If data matches from given inputs, function moves to the index page where protected features have been included else function returns with error.
When any user tries to login to the web app and function passes after checked, The sheet name 'cUsers' stores users data that currently have logged in. In stored data has following type information:
- Timestamp : Time when a user logged in.
- User-Id : ID that user used to logged in.
- Service-Id : Id that helps the function to get the user's file.
- Controll-Id : ID that admin can use to controll the user.
- Level : Permission level as 'Only can read' or 'all crud function'.
In the sheet name stores g has all file information of the users that function uses to complete the user request. According to the user request, function uses the file. To find out the user's file in stores, fuction uses Service-Id.
In following example, I have only show the login function.
Create three file in apps script project. Code.gs, login.html, index.html.
Paste following code in Code.gs file.
Code.gs
var ss = SpreadsheetApp.openById('sheet id')
var vUsers = ss.getSheetByName('vUsers');
var cUsers = ss.getSheetByName('cUsers');
var passid = ss.getSheetByName('stores');
var userlr = vUsers.getLastRow()+1;
var currlr = cUsers.getLastRow()+1;
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('plogin');
htmlOutput.message = '';
return htmlOutput.evaluate();
}
function doPost(e) {
Logger.log(JSON.stringify(e));
if(e.parameter.LoginButton == 'Login'){
var username = e.parameter.username;
var password = e.parameter.password;
var vdate = vlogin(username, password);
if(vdate == 'TRUE'){
var htmlOutput = HtmlService.createTemplateFromFile('index');
htmlOutput.username = username;
htmlOutput.message = '';
return htmlOutput.evaluate();
}else{
var htmlOutput = HtmlService.createTemplateFromFile('plogin');
htmlOutput.message = 'Failed to Login';
return htmlOutput.evaluate();
}}else if(e.parameter.LogoutButton == 'Logout'){
louNow(e.parameter.username);
var htmlOutput = HtmlService.createTemplateFromFile('plogin');
htmlOutput.message = 'Logged Out';
return htmlOutput.evaluate();
}
function vlogin(username, password){
var flag = '';
for(var x = 1; x <= currlr; x++){
if(cUsers.getRange(x, 2).getValue()== username){
flag = 'TRUE';
var d = new Date();
cUsers.getRange(x, 1).setValue(d);
}}
if( flag == ''){
for(var i = 1; i <= userlr; i++){
if(vUsers.getRange(i, 1).getValue()== username&&
vUsers.getRange(i, 2).getValue() == password){
flag = 'TRUE';
var sv = vUsers.getRange(i,8).getValue();
cUsers.insertRowAfter(1).appendRow([new Date(),username,,sv]);
}
}
}if(flag == ''){
flag = 'FALSE';
}return flag;}
}
function louNow(username){
for(var b = 1; b <= currlr; b++){
if(cUsers.getRange(b, 2).getValue() == username){
cUsers.deleteRow(b);
}
}
}
Paste following code in login.html.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{text-align:center;font-family:times;margin-top:90px;}
input{
width:190px;
height:20px;
border:1px dashed black;
font-family:times;margin:5px;
padding:5px;text-align:center;
border-radius:15px
}
input[type="submit"]{
background-color:green;
color:white;width:100px;
border-radius:15px;
padding:0px;height:30px;
}
input:hover[type="submit"] {
background: red;
}
hr{border:1px solid red;}
</style>
</head>
<body >
<?var url = getUrl();?>
<form method="post" action="<?= url ?>">
<label>User Name</label><br>
<input type="text"placeholder="UserId" name="username"><br>
<label>Password</label><br>
<input type="password"name="password" placeholder="password"/><br>
<input type="submit" value="Login" name="LoginButton" /><hr>
<span><?= message ?></span>
</body>
</html>
Paste following code in index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Index</h1>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<span style="font-weight: bold" >Welcome <?= username ?></span>
<input type="hidden" value="<?= username ?>" name="username" />
<input type="submit" value="Logout" name="LogoutButton" />
<span><?= message ?></span>
</form>
Other function include here.
</body>
</html>
ONLY FOR LOGIN SYSTEM - LIVE DEMO
Note: To test this demo use 'USER1' as userId and '12345678' as password.
FOR ADVANCE VISIT FOLLOWING LINKS:
for advance login system Whatsapp-9801740685
How can I include? See here
Source Code Read this article
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------