การตั้งค่า Google Sheet
1. UserData: ใช้เก็บข้อมูลผู้ใช้ (Username และ Password)
โค้ด Google Apps Script
1. สร้าง Script
- เปิด Apps Script จาก Google Sheet
- วางโค้ดด้านล่างในไฟล์
Code.gs
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('Login System')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
// ฟังก์ชันเข้ารหัสรหัสผ่าน
function hashPassword(password) {
const rawHash = Utilities.computeDigest(Utilities.DigestAlgorithm.SHA_256, password);
return rawHash.map(byte => (byte + 256).toString(16).slice(-2)).join('');
}
// ฟังก์ชัน Register
function register(obj){
const hashedPassword = hashPassword(obj.pwd);
// ตรวจสอบข้อมูลใน Google Sheet
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('userData');
const rows = sheet.getDataRange().getDisplayValues();
const email = rows.find(row => row[0] === obj.email)
if(email){
return { success: false, message: "There is already someone using this email." };
}else{
sheet.appendRow([obj.email, hashedPassword])
return { success: true, message: "Successful Registration!" };
}
}
2. ตั้งค่าการใช้งาน Web App
- ไปที่ Deploy > New Deployment
- เลือก Web App
- Who has access: ตั้งเป็น "Anyone"
3. ฝั่ง Frontend (HTML)
ใช้ HTML + JavaScript สำหรับ ลงทะเบียน
index.html
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Charm:wght@400;700&family=Concert+One&family=Raleway&display=swap");
body {
background-color: white;
background-color: #948d8b;
}
.wrapper {
width: 350px;
height: 500px;
margin: auto;
margin-top: 50px;
position: relative;
}
.wrapper .form {
border-radius: 10px;
overflow: hidden;
height: inherit;
width: inherit;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 100;
background-color: #320919;
transition: all ease 1s;
box-shadow: 0px 0px 0.5px 0.5px #ffdeb9;
}
.wrapper .form.form-horizontal {
transform: rotate(-90deg);
z-index: 99;
}
.wrapper .form .title {
font-family: "Bebas Neue", serif;
font-size: 2.5rem;
text-align: center;
color: #320919;
text-transform: uppercase;
margin-bottom: 20px;
background-color: #ffaf53;
}
.wrapper .form .title:hover {
cursor: pointer;
}
.wrapper .form form {
padding: 10px 20px;
}
.wrapper .form form .profileImage {
text-align: center;
font-size: 5rem;
color: #ffaf53;
}
.wrapper .form form.loginForm {
margin: 30px auto;
}
.wrapper .form form.signupForm .profileImage {
font-size: 4.5rem;
}
.wrapper .form form .form-group--x {
position: relative;
}
.wrapper .form form .form-group--x .form-icon {
position: absolute;
height: 42px;
width: 40px;
text-align: center;
line-height: 42px;
top: 0;
bottom: 0;
left: 0;
margin: auto;
color: #fff;
background-color: #ffaf53;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
}
.wrapper .form form input {
border-radius: 0px;
background-color: #fff;
padding: 8px;
box-shadow: none;
border-color: #fff;
padding-left: 45px;
color: #ffaf53;
margin: 10px 0px;
}
.wrapper .form form input::placeholder {
color: #ffaf53;
}
.wrapper .form form button[type=submit] {
display: block;
width: 100%;
padding: 5px;
border: none;
border-radius: 0px;
background-color: #ffaf53;
color: #320919;
text-transform: uppercase;
font-weight: 600;
font-size: 1.5rem;
}
/*link*/
.info {
position: fixed;
bottom: 10px;
left: 10px;
right: 10px;
margin: auto;
text-align: center;
color: #212121;
font-weight: 600;
width: 250px;
font-size: 2rem;
}
.info a {
font-size: 5rem;
display: block;
color: #212121;
}
</style>
</head>
<body translate="no">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="wrapper">
<div class="form" id="form1">
<div class="title">Login</div>
<form action="#" class="loginForm" onsubmit="submitLogin()">
<div class="profileImage">
<i class="fa-regular fa-circle-user"></i>
</div>
<div class="form-group--x">
<i class="fa fa-envelope form-icon"></i>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group--x">
<i class="fa fa-lock form-icon"></i>
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">login</button>
</form>
</div>
<div class="form form-horizontal" id="form2">
<div class="title">Sign Up</div>
<form id="register" class="signupForm" onsubmit="submitForm()">
<div class="profileImage">
<i class="fa-regular fa-circle-user"></i>
</div>
<div class="form-group--x">
<i class="fa fa-envelope form-icon"></i>
<input type="email" class="form-control" id="email1" placeholder="Email">
</div>
<div class="form-group--x">
<i class="fa fa-lock form-icon"></i>
<input type="password" class="form-control" id="pwd1" placeholder="Password">
</div>
<div class="form-group--x">
<i class="fa fa-lock form-icon"></i>
<input type="password" class="form-control" id="repwd" placeholder="Retype-Password">
</div>
<button type="submit" class="btn btn-default">Sign up</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script>
<script id="rendered-js" >
$(document).ready(function () {
$("body").on('click', ".form-horizontal", function () {
$(".form").toggleClass("form-horizontal");
});
});
function submitForm(){
event.preventDefault()
const email = document.getElementById("email1").value;
const pwd = document.getElementById("pwd1").value;
const repwd = document.getElementById("repwd").value;
const data = {
email: email,
pwd: pwd
}
if(pwd === repwd){
google.script.run.withSuccessHandler(res => {
alert(res)
}).register(data)
}else{
alert("You typed in two distinct passwords.")
}
}
</script>
</body>
</html>