Creating a Simple Login System with Google Apps Script and Google Sheets (HTML, CSS, Bootstrap, JS)

| December 23, 2023 | Google Apps Script | 1 Comment

In this tutorial, we’ll walk you through the process of building a secure login system using Google Apps Script and Google Sheets. We’ll use HTML, CSS Bootstrap, JavaScript jQuery, and server-side scripting to create a user-friendly login page. If the login credentials are correct, the user will be redirected to a home page, and if the credentials are incorrect, an appropriate error message will be displayed. All login data will be securely stored and validated in a Google Sheet.

इस Tutorial मे एक एक Simple Login Concept के बारे मे बात कर रहे हैं, जो Beginners हैं उनके लिए यह सीखना जरूरी हैं की किस तरह से हम Login Concept बनाते हैं । लेकिन केवल Simple Login काफी नहीं होता हैं Simple के साथ Secure भी होना चाहिए , इस Article मे हम Secure Login की बात करेंगे यह concept आपको किसी ओर Logic मे भी काम आ सकता हैं , Secure Login के लिए मैंने पहले एक Article लिखा हैं आप उसे Read कर सकते हैं। लिंक नीचे दे रहा हु।

SECURE LOGIN, LOGOUT AND USER REGISTRATION WITH APPS SCRIPT USING SESSION MANAGEMENT

Simple Login Flow

  • हम एक Google Sheet बनाएंगे जिसमे की User Id और password को Store करेंगे।
  • इसके बाद एक Login के लिए index.html फाइल बना लेंगे जिसमे हम id password और login button आदि बना लेंगे
  • इसके बाद हम एक main.html बनाएंगे जो की हमारा Home Page होगा यानि की Login Success होने के बाद यह Page दिखाई देने लगे।
  • Login wale page से Google Apps Script से Communicate करने के लिए हम JavaScript का भी उपयोग करेंगे
  • और अंत मे हम code.gs फाइल मे Google Sheet से Login Data को Check करने के work करेंगे।

Simple Login Flow समझने के बाद आइए हम एक एक कर सभी Pages की Script को समझते हैं ।

1. Simple Login Google Sheet

सबसे पहले हम एक Google Sheet बना लेंगे और उसमे एक id और Password के लिए column बना लेंगे आप यदि आगे और Implement करना चाहते हैं तो इसमे User Name आदि भी बना सकते हैं ताकि Login होने पर Home page पर दिखा सकते ।

2. File Structure for Simple Login

अब हम Apps Script मे जा कर कुछ Files बना लेंगे जैसे की index.html और main.html , Code.gs File Automatically बन कर ही आती हैं केवल उसमे हमे Code लिखना होता हैं।

3. Index.html for Simple Login

अब हम index.html File मे Code लिखेंगे जो कि इस प्रकार होगा। यह एक ही Page हैं इसमे हम तीन भागों मे Code लिखेंगे , HTML, CSS, JavaScript , सबसे पहले हम HTML Code लिख रहे हैं ।

3.1 HTML

इसमे हमने Bootstrap और jQuery CDN को लिंक किया हैं । 

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

  <style> /*  Copy From 3.2 */   </style>
  <script> /*  Copy From 3.3 */   </script>
</head>
<body>

  <div id="DivLogin" class="card shadow rounded-4 rounded ">
    <h5 class="card-header bg-secondary- text-white p-3 mycolor">Apps Script Login</h5>

    <div class="card-body p-4">
      <center>
        <i class="bi bi-person-circle fs-1 color"></i>
      </center>
      <br>

      <div class="input-group mb-3">
        <span class="input-group-text" >User</span>
        <input type="text" class="form-control" id="uid" placeholder="User ID" onchange="ClearText()">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" >Password</span>
        <input type="password" class="form-control" id="pass" placeholder="password" onchange="ClearText()" >
      </div>
      <br>

      <div id="RetMsg" class="alert alert-danger " style="display:none" role="alert"></div>
      <button type="button" class="btn btn-primary- mycolor float-end px-5 text-white" onclick="Login()">Login</button>

    </div>
  </div>
  <div id="DivMain">  </div>
</body>
</html>

3.2 CSS

Login को एक अच्छा Look देना के लिए कुछ CSS का उपयोग किया हैं । 

 body {
      background-color: rgba(205, 180, 219, 30%);
    }

    .card {
      width: 400px;
      margin: auto;
      margin-top: 30px;
    }

    .input-group-text {
      width: 100px;
      display: inline-block;
    }

    .mycolor {
      background-color: #6d3b89;
    }

    .color {
      color: #6d3b89;
    }

    .img {
      width: 60px;
      margin: auto;
      display: inline-block;
    }

3.3 JavaScript Code

Event Handling के लिए हमने JavaScript का उपयोग किया हैं 

function Login() {
    var uid  = document.getElementById("uid").value;
    var pass = document.getElementById("pass").value;
    google.script.run.withSuccessHandler(ReturnMsg).LoginCheck(uid,pass);
}

function ReturnMsg(data) {
        if (data == true) {
          google.script.run.withSuccessHandler(OpenMain).OpenPage("main");
        }
        else
        {
            $('#RetMsg').html("Incorrect ID or Password !!!");
            $('#RetMsg').show();
        }
}

function OpenMain(data) {
   $('#DivLogin').hide();
   $('#DivMain').html(data);
}

function ClearText() {
      $('#RetMsg').html("");
      $('#RetMsg').hide();
}

function LogOut() {
    ClearText();
    document.getElementById("uid").value = '';
    document.getElementById("pass").value = '';
    $('#DivLogin').show();
    $('#DivMain').html("");
}
  • Login() : इस Function का उपयोग कर हमने Id और Password के वैल्यू को ले कर Apps Script के Login Check Function को Call किया हैं ।
  • ReturnMsg() : इस function को हमने Apps Script के LoginCheck Function की Return वैल्यू को Get करने के लिए उपयोग किया है । यदि Id Password Match नहीं होता हैं तो Error Message भी Display होने लगेगा।
  • OpenMain() : इस function से Login page hide हो जाता हैं ओर Main.html Load हो जाता हैं ।
  • ClearText() : इस function से हमने Error Message को Clear किया हैं ।
  • LogOut() : इस Function से हमने Main.html के content को हटा कर फिर से Login Page को show किया है ।

4. Main.html for Simple Login

Successfully login होने के बाद यह Page आपको दिखाई देने लगेगा। 

<!DOCTYPE html>
<html>
<head>  <base target="_top"> </head>
<body>
  <button type="button" class="btn  float-end px-5 text-white" onclick="LogOut()">Log Out</button>
  <h3 class="mycolor p-2 text-white">Imagination</h3>
  <br><br><br><br><br><br>
    <center>
       <h1>Welcome to Home Page</h1>
    <center>
</body>
</html>

5. Code.gs for Simple Login

Apps Script से Related सभी Code इस File मे हैं 

let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
let LoginSheet  = MySheets.getSheetByName("login");   

function doGet(e) {
    return HtmlService.createTemplateFromFile("index").evaluate();
}

function LoginCheck(pUID, pPassword) {
  let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
    let StartRow = 0;
    ReturnData.forEach(function (range) {
      StartRow = range.getRow();
    });

    let TmpPass = 0;
    if (StartRow > 0) {
        TmpPass = LoginSheet.getRange(StartRow, 2).getValue();
        if (TmpPass == pPassword) {
            return true;
        }
    }
    return false;
}

function OpenPage(PageName) {
    return HtmlService.createHtmlOutputFromFile(PageName).getContent();
}
  • doGet() : इस function मे हमने Index Page यानि की Login Page को Display किया हैं ।
  • LoginCheck() : इस Function से हमने Google Sheet से दिए गए यूजर id और Password को Match कर true / False Return किया हैं ।
  • OpenPage() : इस Function से हमने Success login होने पर Home page पर यानि की Main.html पर redirect किया हैं

6. Final Output Simple Login

6.1 Open Page

सबसे पहले यह Screen आपको दिखाई देगी ।

6.2 Login with Incorrect Id Password

आपको User IDऔर Password Enter करना हैं यदि Id password Wrong हो तो निम्न प्रकार से Error Message Display हो जाएगा।

Simple Login

6.3 Login With Correct Password Show Main.html

Successfully login होने के बाद आपको कुछ इस तरह से Main Page दिखाई देंगे लगेगा।

आशा हैं मुझे की आपको किस तरह से Simple Login बनाता हैं समझ मे आ गया होगा फिर भी यदि आपको कोई भी Doubt हो या Query हो तो आप मुझे Comment कर सकते हैं। अपना कीमती समय देने के लिए धन्यवाद

हमारे अन्य आर्टिकल

Related Posts

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *