Login and Logout Portal by Web App Script

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट ओर वेब एप स्‍क्रीप्‍ट की मदद से Login and Logout Portal बना सकते है ा

For Demo

User ID :- site

Password :- 123

Loading…

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 3 File

Code.gs
index.html

css.html

Step 4 :- Copy of Code.gs file and Paste to Step 3 Create Code.gs File

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent()
}

function signup(obj){
  var ss = SpreadsheetApp.getActive().getSheets()[0]
  ss.appendRow([new Date(),obj.input1,obj.input2,obj.input3])
  return true
}

function signin(obj){
  var data = SpreadsheetApp.getActive().getSheets()[0].getDataRange().getDisplayValues()
  var output = false
  data.forEach(f=>{
    if(f[4].indexOf(obj.input1)>-1 && f[5].indexOf(obj.input2)>-1){
      var name = f[6] 
      var ss = SpreadsheetApp.getActive().getSheets()[1]
      ss.appendRow([new Date(),name])
      output = true
    }
  })
  return output
}

Step 5 :- Copy of index.html file and Paste to Step 3 Create index.html File

index.html

<!DOCTYPE html>  <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>registration system</title> <?!= include ('css') ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <section id="page1" > <div class="wrapper mx-auto mt-3">  <div class="form-container"> <div class="slide-controls"> <input type="radio" name="slide" id="login" checked> <input type="radio" name="slide" id="signup"> <label for="login" class="slide login">Login</label> <label for="signup" class="slide signup">Register</label> <div class="slider-tab"></div> </div> <div class="form-inner"> <form action="#" class="login" id="form2" onsubmit="sumitSignIn(this)"> <div class="field"> <input type="text" style="text-align:center" placeholder="User ID" name ="input1" required> </div> <div class="field"> <input type="password" style="text-align:center" placeholder="password" name ="input2" required> </div> <div class="alert" id="output1"></div>  <div class="field btn"> <div class="btn-layer"></div> <input type="submit" value="Login"> </div> <div class="signup-link"> Make New User ID & Password Click here to Register? <a href="">Register</a> </div> </form> <form action="#" class="signup" id="form1" onsubmit="sumitSignUp(this)"> <div class="field"> <input type="text" placeholder="User ID" name ="input1" required> </div> <div class="field"> <input type="password" placeholder="password" name="input2" required> </div> <div class="field"> <input type="text" placeholder="Your Name" name="input3" required> </div> <div class="field btn"> <div class="btn-layer"></div> <input type="submit" value="Register"> </div> <div class="alert" id="output2"></div> </form> </div> </div> </div> </section> <section id="page2" style="display:none"> <div class="container"> <button type="button" class="btn btn-primary mb-3 mt-3" onclick="logout()">log out</button> <button onclick="window.location.href='https://script.google.com/macros/s/AKfycbw67lr50BS8wOurZ-Lr2T-InEtuV5w4tt0CLfqugUKH62zceEn8IHVGG7kMiuqeuHsKxw/exec';"> PMKISAN Data Update</button> <iframe width="100%" height="800" src="https://datastudio.google.com/embed/reporting/ed18c199-23a9-4e45-9f7b-d053d79a9c8d/page/1M" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </section> <script> function logout(){ Swal.fire({ title: 'want to log out?', text: "Do you want to log out?!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'YES', cancelButtonText: 'NO' }).then((result) => { if (result.isConfirmed) { document.getElementById('page2').style.display="none"; document.getElementById('page1').style.display="block"; } }) } const loginText = document.querySelector(".title-text .login"); const loginForm = document.querySelector("form.login"); const loginBtn = document.querySelector("label.login"); const signupBtn = document.querySelector("label.signup"); const signupLink = document.querySelector("form .signup-link a"); signupBtn.onclick = (()=>{ loginForm.style.marginLeft = "-50%"; loginText.style.marginLeft = "-50%"; }); loginBtn.onclick = (()=>{ loginForm.style.marginLeft = "0%"; loginText.style.marginLeft = "0%"; }); signupLink.onclick = (()=>{ signupBtn.click(); return false; }); function sumitSignUp(obj){ event.preventDefault() google.script.run.withSuccessHandler(success1).signup(obj) } function success1(){ document.getElementById('output2').innerHTML = "Registration successfully,After User ID Verified then you can Login" document.getElementById('form1').reset() } function sumitSignIn(obj){ event.preventDefault() google.script.run.withSuccessHandler(success2).signin(obj) document.getElementById('output1').innerHTML = "" } function success2(output){ if(output == true){ document.getElementById('output1').innerHTML = "Signed in successfully" document.getElementById('form2').reset() document.getElementById('page1').style.display="none"; document.getElementById('page2').style.display="block"; }else{ document.getElementById('output1').innerHTML = "User ID Not Verify / User ID Inactive / Wrong User ID & Password Enter!" } } </script> <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"> </script> </body> </html>

Step 6 :- Copy of css.html file and Paste to Step 3 Create css.html File

css.html

Step 7 :- Click to >> Deploy >> New Deployment >>

Step 8 :- Form Multiple Button Insert In Portal Then Copy Below Code and Paste To Index.html File Sr no 80

<form action ="Paste First URL " method="get" target="iframe_a"><button type="submit">Button Name</a></form></button> <form action="Paste Secound URL " method="get" target="iframe_a"> <button type="submit">Button Name</a></form></button> <iframe src="Pate Home Page URL" name="iframe_a" height="900px" width="100%" title="Login"></iframe>