Secure Login, Logout and User Registration with Apps Script using Session Management

| September 6, 2023 | Google Apps Script | 9 Comments

Learn how to create a secure login, logout, and user registration system using Google Apps Script. This comprehensive tutorial covers session management, login/logout functionality, user registration with duplicate checking, success and error messages, and automatic redirection after successful registration. Enhance your web app’s security and user experience today!

इस Article मे हमने Secure Login System बनाया हैं जिसमे की Session का उपयोग किया है जो पूरी तरह से Secure हैं, साथ मे Logout Functionality भी बनाई हैं और User खुद ही Registration कर सके ऐसा भी बनाया हैं ।

Session Management

सबसे पहले मे आपको Session Management के बारे मे बात देता हु, Apps Script मे Session का उपयोग कर हम Client Side से एक या एक से अधिक Value को एक ऐसे स्थान पर Store करवा सकते हैं जीसे की Apps Script जो की Server Side Execute होती हैं वह उसे Use कर पाए।

Apps Script मे Session का उपयोग करने के क्या फायदे हैं ?

Session का उपयोग करने से हम अपने Page को Secure कर सकते हैं यानि की unauthorized Access से बचा सकते हैं। इस Secure Login System मे हमने Login को Secure करने के लिए Session का उपयोग किया हैं।

1. Google Sheet

सबसे पहले एक Google Sheet बना लीजिए, चाहे तो आप इसमे पहले से ID और Password की Entry कर सकते हैं, और नहीं भी करेंगे तो हम जब User Registration Page बनाएंगे तब वहाँ से Entry करेंगे तो वह आकार Google Sheet पर Store हो जाएगी।

2. Login Page for Secure Login System

यह Login Page हैं, यहा से हम User ID और Password Enter कर Google Sheet से Validate कर Home Page पर जा सकते हैं , साथ ही मे यदि हम User Registration करना चाहे तो यंहा से हम User Registration Page पर भी जा सकते है।

यदि हम इसमे Wrong Credential Enter करेंगे तब निम्न प्रकार से Alert Message Display होगा।

आइए अब इसका Code देखते हैं ।

2.1 HTML Code For Secure Login 

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <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 >     </style >  <!-- Add CSS -->
  <script>     </script>  <!-- Add JS -->

</head>

<body>


  <div id="DivLogin" class="card shadow rounded-4 rounded ">

    <h5 class="card-header bg-secondary- text-white p-3 mycolor">Apps Script Secure Login</h5>
    <a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a>
    <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" required 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" required placeholder="Password" onchange="ClearText()" >
      </div>
      <br>

      <div id="RetMsg" class="alert alert-danger " style="display:none" role="alert"> </div>




      <button type="button" onclick="login()"  class="btn btn-primary- mycolor float-end px-5 text-white" >Login</button>

      <span href="#"  onclick="OpenRegisterPage()">Register (New User)</a>
      

    </div>

    <form >
  </div>
  
  <div id="DivRegister"></div>
  
</body>

</html>

2.2 CSS Code for Secure Login

<style>
    body {
      background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%);
    }

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

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

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

    .color {
      color: #3a67b1; //#6d3b89;
    }

    .img {
      width: 60px;
      margin: auto;
      display: inline-block;
    }
  </style>

2.3 JavaScript for Secure Login

इस Code को आप Copy कर HTML File मे head tag मे Paste करे , या फिर आप एक अलग File बना कर भी Include कर भी उपयोग कर सकते है। 

  <script>
    function login() {
    var username = document.getElementById("uid").value;
    var password = document.getElementById("pass").value;
    
    google.script.run.withSuccessHandler(function(response) {
    
      if (response === "success") {
      document.getElementById("myid").click();
      } else {
        $("#RetMsg").removeClass("alert-danger").removeClass("alert-success").addClass("alert-danger");
        $("#RetMsg").html("Invalid User ID or Password");
        $("#RetMsg").show();
      }
      }).loginUser(username, password);
    }


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

  function OpenRegisterPage()
  {
        google.script.run.withSuccessHandler(ShowRegister).OpenPage("register");
  }

  function ShowRegister(data)
  {
    $('#DivLogin').hide();
    $('#DivRegister').html(data);
  }

  </script>
  • login() : यह login() जब हम Login Button पर Click करते हैं जब Call होता हैं। User ID और Password Collect करने के बाद यह Apps Script के loginuser Function को call कर देता है।
  • ClearText() : किसी भी Text के OnChange Event पर Alert Box को Hide करने के लिए और Alert मे लिखे Message को हटाने के लिए इस Function को Call किया जाता हैं।
  • OpenRegisterPage() : User Registraction Page को Open करने के लिए इस Function का उपयोग किया हैं। इसमे से Apps Script को call कर Register Page के HTML को ShowRegister Function मे Pass किया हैं।
  • ShowRegister(data) : इस Function को OpenRegisterPage() Function के द्वारा Call किया गया हैं, इस Function से हमने जो Apps Script से User Registration Page का HTML Code लाए हैं उसे Div जिसका नाम DivRegister हैं उस पर Set किया हैं और Login को Hide किया हैं।

3. User Registration

इस Page से हम कोई भी नए User का Registration कर सकते हैं । इसमे Example के केवल वही Columns लिए हैं जो जरूरी हैं आप चाहे तो और भी Columns ले सकते हैं । इस Page पर हमने कुछ Validation भी लगाए हैं ।

यदि Password और Re-enter Password same नहीं होने पर निम्न प्रकार से Message आएगा, यह JavaScript से किया हैं ।

यदि एक बार पहले से User Registered हैं तब User Already Exists का Message आएगा।

जब User सभी Validation pass कर लेगा तो कुछ इस तरह से Message Display होगा ।

आइए अब इसके Code को भी समझ लेते हैं ।

3.1 HTML Code for User Registration 

<script></script> <!--  Add JS -->

<div class="card shadow rounded-4 rounded ">
  <h5 class="card-header bg-secondary- text-white p-3 mycolor">User Registration</h5>

  <div class="card-body p-4">


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

      <div class="input-group mb-3">
        <span class="input-group-text" >User ID</span>
        <input type="text" class="form-control" id="reg_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="reg_pass" placeholder="Password" onchange="ClearText()" >
      </div>

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

    <div id="RetMsgReg" 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="Register()">Register</button>


  </div>
</div>

3.2 JavaScript Code for User Registration 

<script>
  function Register()
  {
    
    var unm    = document.getElementById("reg_uname").value.trim();
    var uid    = document.getElementById("reg_uid").value.trim();
    var pass   = document.getElementById("reg_pass").value.trim();
    var repass = document.getElementById("reg_repass").value.trim();

    if (pass != repass)
    {
      RegReturnMsg("danger,Password Not Matched...");
    }
    else
    {
      google.script.run.withSuccessHandler(RegReturnMsg).UserRegister(uid,pass,unm);
    }
    
    
  }
  
  function RegReturnMsg(data)
  {
      let v = data.split(",");
      let type=v[0];

      $('#RetMsgReg').removeClass("alert-success").removeClass("alert-danger").addClass("alert-"+type);
      $('#RetMsgReg').html(v[1]);
      $('#RetMsgReg').show();

      if (type == 'success')
      {
        setTimeout(function(){  
           document.getElementById("myid").click();
           }, 3000);
      }

  }
</script>
  • Register() : इस Function का उपयोग कर हम Screen से सभी जरूरी Columns की Value को लेकर उसे Apps Script पर भेज देते हैं । साथ ही मे Screen Level के Validation भी हमने इसमे लगाए हैं । जो भी Apps Script से Return आता हैं उससे एक नया Function Call कर देते हैं जो की निम्न हैं ।
  • RegReturnMsg(data) : इस Function से जीतने भी Validation लगाए हैं उन्हे दिखाया गया हैं। साथ मे Success Fully Registerd होने के पेज को Login वाले Page पर ले जाया गया हैं।

4. Home Page

जब User Successfully Login कर लेगा तो वह इस Page पर आ जाएगा, यह पूरी तरह से Secure हैं क्युकी हमने इसमे Session का उपयोग किया हैं। Session से user को बाहर आने के लिए हमने Logout का उपयोग किया हैं जिसकी Functionality आपको इसी पेज पर मिल जाएगी।

  • इस Home पर पर यदि आप Navigation bar बना कर एक से अधिक page दिखाना चाहते हैं तो आप निम्न Article को भी Read कर सकते हैं और साथ मे Source Code भी समझ सकते हैं ।
  • https://selfimagination.in/tips/multiple-pages-in-google-apps-script-web-app/

4.1 HTML Code for Home Page (main.html)

यह केवल Basic Page हैं इसमे केवल Welcome Message ही दिखाया गया हैं साथ मे इसमे Logout की Function का भी Implement किया हैं । 

<!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>    </style> <!-- Add CSS -->
  <script>   </script>  <!-- Add JS -->
</head>

<body onload="">
   
  <button class="btn  float-end px-5 text-white" type="button" onclick="logout()">Log Out</button>
  <a style="display:none" id="myid" href="<?= myURL(); ?>" target="_top">Link</a>
  
  <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>
  • इसमे मे Style और Script Tag है उसमे आप निम्न Code को Paste कर सकते हैं या आप अलग से File बना कर भी Include कर सकते हैं ।

4.2 CSS Code for Home Page

इसमे कोई भी Mejor Code नहीं हैं केवल Background और Text Colour को ही सेट किया हैं । 

<style>
    body {
      background-color:  rgba(58, 103, 177, 30%); //rgba(205, 180, 219, 30%);
    }

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

    .color {
      color: #3a67b1; //#6d3b89;
    }
 
  </style>

4.3 JavaScript Code for Home Page

हमने Apps Script मे Session का उपयोग किया हैं इसलिए हमे Logout करते समय Apps Script के Function को call करने की आवश्यकता लगी हैं । 

 <script>
    
    function logout()
    {
      google.script.run.withSuccessHandler(AfterLogOut).logoutUser();
    }
    function AfterLogOut()
    {
         document.getElementById("myid").click();
    }

  </script>
  • logout() : यह Function Logout button को Click करने पर Call होता हैं । और यह Apps Script के logoutUser Function को Call कर देता हैं। जब Successfully Logout हो जाता हैं तब AfterLogOut() Function को कल कर दिया जात हैं।
  • AfterLogOut() : इस Function से Page को Refresh कर दिया जाता हैं ताकि फिर से Login Screen दिखाई देने लगे।

5. Apps Script Code

यहाँ से Apps Script का Code शुरू होता हैं । अभी तक जितनी भी Screen और page हमने बनाये हैं वह सभी इसी Page से Communicate करते हैं । इसलिए इस page पर सभी Page से Related Function आपको मिल जाएंगे। निम्न सभी Code को आपको code.gs file मे Paste करना हैं ।

  • Link Sheet : सबसे पहले हम जिस Google Sheet से Data Get और Set करना हैं उसे Link करेंगे। 
let MySheets  = SpreadsheetApp.getActiveSpreadsheet();
let LoginSheet  = MySheets.getSheetByName("login");
  • doGet() : जब भी Program Execute होता हैं सबसे पहले doGet Function ही Call होता हैं। इस function मे Default Login page को ही open किया हैं और यदि आप Successfully User Check को pass कर लिया तो यह आपको Main page पर redirect कर देते हैं । 
function doGet(e) {
  var output = HtmlService.createTemplateFromFile('login');
  
  var sess = getSession();
   if (sess.loggedIn) {
     output = HtmlService.createTemplateFromFile('main');
  }
  return output.evaluate();
}

  • myURL() : यह हमारे Page के URL को Get करने के लिए बनाया हैं । 
function myURL() {
  return ScriptApp.getService().getUrl();
}

  • setSession() : जब Used ID और Password सही होते हैं तब इस Function का उपयोग कर Session Login Flag को true कर दिया जाता हैं ताकि जब अगली बार Page Refresh हो तो User Home Page पर Redirect हो सके । 
function setSession(session) {
  var sId   = Session.getTemporaryActiveUserKey();
  var uProp = PropertiesService.getUserProperties();
  uProp.setProperty(sId, JSON.stringify(session));
}

  • getSession() : इस Function से Session मे Login की value क्या हैं वह Return करता हैं । यानि की User Login हैं या नहीं इस Flag के बारे मे जानकारी हमे यह Function देता हैं। 
function getSession() {
  var sId   = Session.getTemporaryActiveUserKey();
  var uProp = PropertiesService.getUserProperties();
  var sData = uProp.getProperty(sId);
  return sData ? JSON.parse(sData) : { loggedIn: false };
}

  • loginUser() : यह function JavaScript से call किया जाता हैं यह loginCheck function को Call करता हैं और JavaScript को Return वैल्यू provide करता हैं। 
function loginUser(pUID, pPassword) {
    
    if (loginCheck(pUID, pPassword)) {
      
      var sess = getSession();
      sess.loggedIn = true;
      setSession(sess);

        return 'success';
    } 
    else {
        return 'failure';
    }
}

  • logoutUser() : यह Session मे Store Login वैल्यू को unset कर देता हैं जिससे की User Logout हो जाता हैं। 
function logoutUser() {
  var sess = getSession();
  sess.loggedIn = false;
  setSession(sess);
}

  • loginCheck : यह Function Google Sheet से दिये गए ID Password को Match करने का कार्य करता हैं। 
function loginCheck(pUID, pPassword) {
  let LoginPass =  false;
      let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
        
        ReturnData.forEach(function (range) {
          let StartRow = range.getRow();
          let TmpPass = LoginSheet.getRange(StartRow, 2).getValue();
          if (TmpPass == pPassword)
          {
              LoginPass = true;
          }
        });

    return LoginPass;
}

  • OpenPage() : यह Registration page के HTML को Return करता हैं। 
function OpenPage(PageName)
{
    return HtmlService.createHtmlOutputFromFile(PageName).getContent();
}

  • UserRegister() : इस Function से हम नए User का Data Google Sheet मे Store करते है। 
function UserRegister(pUID, pPassword, pName) {
    
    let RetMsg = '';
    let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
    let StartRow = 0;
    ReturnData.forEach(function (range) {
      StartRow = range.getRow();
    });

    if (StartRow > 0) 
    {
      RetMsg = 'danger, User Already Exists';
    }
    else
    {
      LoginSheet.appendRow([pUID, pPassword, pName]) ;  
      RetMsg = 'success, User Successfully Registered'; 
    }

    return  RetMsg;
}

6. Deploy Code

इसके बाद आपको project को deploy करना हैं और Deployment करने के बाद जो लिंक आती हैं उसे Click कर Execute करना हैं ।

Deployment सीखने के लिए आप निम्न Article की मदद ले सकते हैं ।

https://selfimagination.in/tips/deploying-apps-script-as-a-web-api/

आशा हैं मुझे आपको Secure Login System बहुत ही अच्छे से समझ मे आ गया हैं, इस Secure Login Article से related कोई भी Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । यह Article कैसा लगा Comment करना न भूले । अपना कीमती समय देने के लिए धन्यवाद ।

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

Related Posts

9 Comments
  1. Sharad Reply

    Code.gs wali file ismen nahi hai, pls pue source code dal den.

    • Sandip Nigam Reply

      Thanks. HTML, CSS, Javascript ke bad aakhri me Code.gs bhi hain, ek sath pura code n dekar Step by Step diya hain, app ek bar fir se dekhe.

  2. srinivasan Reply

    1st, Thank you for sharing,
    after user registration, it wont redirects to login page sir, how can fix it, how put email validation in registration

    • Sandip Nigam Reply

      Welcome,
      1. To redirect to the login page, reload the page again.
      2. For email validation, use the concept of E-mail OTP. You will find a video related to this on my channel.

  3. srinivasan Reply

    Thank for sharing,
    after registration, the page wont redirects, to login page, how to fix it, please explain

    • Sandip Nigam Reply

      Once you try calling AfterLogOut() function from JavaScript

  4. Srinivasa Reply

    Respected Sir,
    Thanks for Sharing,
    After User Registration, it won’t be redirects to, login page, how to fix,
    Thank you

    • Sandip Nigam Reply

      Once you try calling AfterLogOut() function from JavaScript

Add a Comment

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