Google sheet Apps script web app Login form với User, password
Giaoan.link chia sẻ đến các bạn cách sử dụng Google sheet Apps script web app Login form với User để đăng nhập và thực hiện tác vụ khác. Bạn có thể cấp nhiều user khác nhau thông qua spreadsheet.
Các bài thực hành excel ứng dụng khác:
- Appscript Webapp | Kéo thả các Items theo 2 chiều Dọc – Ngang, Ứng dụng sắp xếp chu trình công việc
- GOOGLE SHEET WEBAPP TRA CỨU 34 TỈNH THÀNH VIỆT NAM MỚI NHẤT (SÁP NHẬP 2025)
- Quản Lý Tài Chính Cá Nhân Hiệu Quả Với Web App Google Apps Script
- Google sheet, apps script, webapp “Bé Vui Phép Nhân” – Công Cụ Luyện Toán Trực Quan Cho Học Sinh Tiểu Học
- Google sheet webapp Bé Vui Học Toán – Ứng dụng Luyện Phép Chia Trực Quan Cho Học Sinh Lớp 3
- Googlesheet appscript – Hệ Thống Đăng Ký Hồ Sơ Trực Tuyến (Online Registration Portal)
- [Share Code] Biến Google Sheet thành Web App Tra Cứu Dự Án & Tài Liệu (Miễn Phí Hosting)
- Hệ Thống Quản Lý Phòng Game “Cloud-Native” với Google Apps Script
- Hệ Thống Điều Phối & Quản Lý Đội Xe Thông Minh (Web App)
- Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
Code trong file “Code.gs”
function doGet(e) {
return HtmlService.createTemplateFromFile("index").evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function checkLogin(username, password) {
var url = 'here is url spreadsheet';
var ws= SpreadsheetApp.openByUrl(url);
var ss = ws.getSheetByName("Login");
var getLastRow = ss.getLastRow();
var found_record = '';
for(var i = 2; i <= getLastRow; i++)
{
if(ss.getRange(i, 1).getDisplayValue().toUpperCase() == username.toUpperCase() &&
ss.getRange(i, 2).getDisplayValue().toUpperCase() == password.toUpperCase())
{
found_record = 'TRUE';
}
}
if(found_record == '')
{
found_record = 'FALSE';
}
return found_record;
}Code file “index.html”
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans";
color: #000;
}
section {
background: url("url image background");
height: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
}
.form-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
padding: 50px 30px;
border-radius: 10px;
box-shadow: 7px 7px 60px #000;
}
h1 {
color: #000;
font-size: 2em;
text-transform: uppercase;
text-align: center;
margin-bottom: 2rem;
}
.control input {
font-size: 16px;
display: block;
width: 100%;
color: #000;
background: #ddd;
outline: none;
border: none;
margin: 1em 0;
border-radius: 30px;
padding: 15px;
}
.control .btn {
color: #fff;
text-transform: uppercase;
background: crimson;
opacity: .7;
transition: opacity .3s ease;
}
.btn:focus {
opacity: 1;
}
p {
text-align: center;
}
a {
text-decoration: none;
color: #000;
opacity: .7;
}
a:hover {
opacity: 1;
}
</style>
</head>
<body>
<section>
<div class="form-container">
<div class="page1_class1" id="page1_id1">
<h1>Login</h1>
<div class="control">
<label for="username">Username</label>
<input type="text" id="username" >
</div>
<div class="control">
<label for="password">Password</label>
<input type="password" id="password" >
</div>
<br>
<div class="control">
<input type="submit" class="btn" value="Login"onclick="LoginUser()">
<span id="errorMessage" style="color: red" ></span>
</div>
</div>
</section>
<script>
function LoginUser()
{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
google.script.run.withSuccessHandler(function(output)
{
if(output == 'TRUE')
{
window.open('https://giaoan.link');
}
else if(output == 'FALSE')
{
document.getElementById("errorMessage").innerHTML = "Please, Login again!";
}
}).checkLogin(username, password);
}
</script>
</body>
</html>