本文章說明如何使用ChatGPT來建立 －登入／註冊系統簡易版 －整合前端與後端(GAS)
影片：
程式分享
試算表建立，試算表名稱Sheet1
code.gs
//連結login.html檔
function doGet() {
return HtmlService.createHtmlOutputFromFile('login.html');
}
//驗證帳號、密碼
function loginUser(email, password) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = sheet.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
if (data[i][0].toString().trim() === email.trim() && data[i][1].toString().trim() === password.trim()) {
return true; // 登入成功
}
}
return false; // 登入錯誤
}
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login System</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<style>
.container {
width: 50%;
margin: 20px auto; /* 將左右邊界設為 auto，使元素水平置中 */
border:1px solid gray;
padding:20px;
}
</style>
</head>
<body>
<div class="container ">
<h1 class="text-center">登入系統</h1>
<form id="loginForm">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">密碼</label>
<input type="password" class="form-control" id="password" required>
</div>
<button type="submit" class="btn btn-primary">登入</button>
</form>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
// Get form values
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Call GAS function to authenticate user
google.script.run.withSuccessHandler(loginSuccess).loginUser(email, password);
});
function loginSuccess(result) {
if (result) {
// Display success message
alert('🎉登入成功！');
} else {
// Display error message
alert('❗️錯誤的帳號或密碼');
}
}
</script>
</body>
</html>
完整版的功能
✅ 此文章介紹的是簡易版，如果要完整版的登入／註冊系統，這點選此： 連結
✅ 完整版登入系統：連結
| 系統功能說明V1 |
| 這個Google Apps Script登入／註冊系統為您的網站提供了一個強大的身份驗證解決方案。這個系統能夠讓您輕鬆地在您的網站上實現使用者帳戶的管理和登入功能。 這個系統包含了： ✅1. 安全登入與註冊機制：系統透過Google Apps Script實現安全的登入與註冊功能，確保您的使用者數據得到保護，防止未授權訪問。 ✅2. 簡單易用：以直觀的方式實現登入和註冊，使用者只需輸入帳號和密碼即可完成登入，同時也能進行使用者帳戶的註冊管理。 ✅3. 忘記密碼：如果忘記密碼，可以輸入Email，確認資料裡有相同的email後，會寄出密碼的Email給會員。 ✅4. 自訂系統名稱：根據網站的名稱，使用者可以透過設定來更變系統名稱。 ✅5. 即時反饋：系統能夠提供即時的反饋訊息，如使用者名稱或密碼錯誤，註冊成功等，為使用者提供更好的使用體驗。 ✅6. 彈性擴展：基於Google Apps Script的系統，具有高度的擴展性，您可以根據需求擴展更多的功能和安全層。 ✅7. 登入後頁面：成功登入後，可以自行設計自己喜歡的內容，建立起完整的網站系統。 無論您是在建立一個全新的網站還是需要更新現有網站的使用者身份驗證系統，這個Google Apps Script登入／註冊系統都能夠滿足您的需求，為您的網站提供穩健和可靠的使用者身份驗證解決方案。 |