Login system - Apps Script and g-sheet
บทช่วยสอนนี้ใช้ระบบการเข้าสู่ระบบในโปรเจ็กต์เว็บแอป เว็บแอปสามารถเข้าถึงได้โดยผู้ใช้ที่ถูกต้องที่มีสิทธิ์เข้าถึงเว็บแอปเท่านั้น หลังจากตรวจสอบความถูกต้องของผู้ใช้แล้ว หน้าใหม่จะเปิดขึ้นโดยที่ผู้ใช้สามารถใช้งานคุณสมบัติอื่นๆ ที่ซ่อนอยู่ของแอปได้ ที่นี่ฉันได้เพียงพยายามแสดงให้เห็นว่าฟังก์ชันนี้ทำงานอย่างไร หากคุณต้องการสร้าง crud web app, click here.
Note: To test this demo use 'u141456' as userId and 'p141456' as password.
Login Example Page Image
ไปที่ขั้นตอนในการสร้างแอปกัน ขั้นแรกให้สร้างสเปรดชีตตามตัวอย่างต่อไปนี้ สเปรดชีตมีสามแผ่นอยู่ ฉันได้ตั้งชื่อชีตแรกเป็น vUsers, แผ่นงานที่สองเป็น cUsers และแผ่นที่สามเป็น stores .
ในแผ่นงานแรกฉันได้เก็บข้อมูลผู้ใช้ตัวต้านทาน เมื่อเราพยายามเข้าสู่ระบบเว็บแอปฟังก์ชันจะตรวจสอบให้ตรงกับข้อมูลป้อนเข้าจากแผ่นงานนี้ (ชื่อ - vUsers) ถ้าข้อมูลตรงกันจากอินพุตที่กําหนด ฟังก์ชันจะย้ายไปยังหน้าดัชนีที่มีคุณลักษณะที่ได้รับการป้องกันถูกรวมฟังก์ชันอื่นไว้ด้วย
เมื่อผู้ใช้พยายามเข้าสู่ระบบเว็บแอปและฟังก์ชันผ่านไปหลังจากเลือกแล้ว ชื่อแผ่นงาน 'cUsers' จะจัดเก็บข้อมูลผู้ใช้ที่เข้าสู่ระบบในปัจจุบัน ข้อมูลที่เก็บไว้ในที่เก็บมีข้อมูลชนิดต่อไปนี้:
- 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'.
ในชื่อแผ่นงาน stores g มีข้อมูลไฟล์ทั้งหมดของผู้ใช้ที่ฟังก์ชันใช้ในการดําเนินการตามคําขอของผู้ใช้ให้เสร็จสมบูรณ์ ตามคําขอของผู้ใช้ฟังก์ชันใช้ไฟล์ เมื่อต้องการค้นหาแฟ้มของผู้ใช้ใน 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('-----Your spreadsheet Id-------')
where vUsers = ss.getSheetByName('vUsers');
where cUsers = ss.getSheetByName('cUsers');
where passid = ss.getSheetByName('stores');
where userlr = vUsers.getLastRow()+1;
where currlr = cUsers.getLastRow()+1;
var storlr = passports .getLastRow () + 1 ; function getUrl () {
where url = ScriptApp.getService().getUrl();
return url;
}
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('login');
htmlOutput.message = '';
return htmlOutput.evaluate();
}
function doPost(e) {
Logs . 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.toUpperCase();
htmlOutput.message = '';
return htmlOutput.evaluate();
}else{
var htmlOutput = HtmlService.createTemplateFromFile('login');
htmlOutput.message = 'Failed to Login';
return htmlOutput.evaluate();
}}else if(e.parameter.LogoutButton == 'Logout'){
louNow(e.parameter.username);
var htmlOutput = HtmlService.createTemplateFromFile('login');
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().toUpperCase() == username.toUpperCase()){
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().toUpperCase() == username.toUpperCase() &&
vUsers.getRange(i, 2).getValue().toUpperCase() == password.toUpperCase()){
flag = 'TRUE';
var sv = vUsers.getRange(i,8).getValue();
cUsers.insertRowAfter(1).appendRow([new Date(),username.toUpperCase(),,sv]);
}
}
}if(flag == ''){
flag = 'FALSE';
}return flag;}
}
function louNow(username){
for(var b = 1; b <= currlr; b++){
if(cUsers.getRange(b, 2).getValue() == username.toUpperCase()){
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>
ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red}
>>>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 thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!
-------------------------- -------------------------