{"id":11392,"date":"2023-12-23T07:00:00","date_gmt":"2023-12-23T01:30:00","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=11392"},"modified":"2023-12-22T22:14:19","modified_gmt":"2023-12-22T16:44:19","slug":"creating-a-simple-login-apps-script","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/creating-a-simple-login-apps-script\/","title":{"rendered":"Creating a Simple Login System with Google Apps Script and Google Sheets (HTML, CSS, Bootstrap, JS)"},"content":{"rendered":"\n<p>In this tutorial, we&#8217;ll walk you through the process of building a secure login system using Google Apps Script and Google Sheets. We&#8217;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.<\/p>\n\n\n\n<p>\u0907\u0938 Tutorial \u092e\u0947 \u090f\u0915 \u090f\u0915 Simple Login Concept \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947 \u092c\u093e\u0924 \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902, \u091c\u094b Beginners \u0939\u0948\u0902 \u0909\u0928\u0915\u0947 \u0932\u093f\u090f \u092f\u0939 \u0938\u0940\u0916\u0928\u093e \u091c\u0930\u0942\u0930\u0940 \u0939\u0948\u0902 \u0915\u0940 \u0915\u093f\u0938 \u0924\u0930\u0939 \u0938\u0947 \u0939\u092e Login Concept \u092c\u0928\u093e\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0932\u0947\u0915\u093f\u0928 \u0915\u0947\u0935\u0932 Simple Login \u0915\u093e\u092b\u0940 \u0928\u0939\u0940\u0902 \u0939\u094b\u0924\u093e \u0939\u0948\u0902 Simple \u0915\u0947 \u0938\u093e\u0925 Secure \u092d\u0940 \u0939\u094b\u0928\u093e \u091a\u093e\u0939\u093f\u090f , \u0907\u0938 Article \u092e\u0947 \u0939\u092e Secure Login \u0915\u0940 \u092c\u093e\u0924 \u0915\u0930\u0947\u0902\u0917\u0947 \u092f\u0939 concept \u0906\u092a\u0915\u094b \u0915\u093f\u0938\u0940 \u0913\u0930 Logic \u092e\u0947 \u092d\u0940 \u0915\u093e\u092e \u0906 \u0938\u0915\u0924\u093e \u0939\u0948\u0902 , Secure Login \u0915\u0947 \u0932\u093f\u090f \u092e\u0948\u0902\u0928\u0947 \u092a\u0939\u0932\u0947 \u090f\u0915 Article \u0932\u093f\u0916\u093e \u0939\u0948\u0902 \u0906\u092a \u0909\u0938\u0947 Read \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \u0932\u093f\u0902\u0915 \u0928\u0940\u091a\u0947 \u0926\u0947 \u0930\u0939\u093e \u0939\u0941\u0964 <\/p>\n\n\n\n<p><a href=\"https:\/\/selfimagination.in\/tips\/secure-login-logout-user-registration-session\/\">SECURE LOGIN, LOGOUT AND USER REGISTRATION WITH APPS SCRIPT USING SESSION MANAGEMENT<\/a><\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#simple-login-flow\">Simple Login Flow <\/a><\/li><li><a href=\"#1-simple-login-google-sheet\">1. Simple Login Google Sheet <\/a><\/li><li><a href=\"#2-file-structure-for-simple-login\">2. File Structure for Simple Login <\/a><\/li><li><a href=\"#3-index-html-for-simple-login\">3. Index.html  for Simple Login<\/a><ul><li><a href=\"#3-1-html\">3.1 HTML<\/a><\/li><li><a href=\"#3-2-css\">3.2 CSS<\/a><\/li><li><a href=\"#3-3-java-script-code\">3.3 JavaScript Code <\/a><\/li><\/ul><\/li><li><a href=\"#4-main-html-for-simple-login\">4. Main.html  for Simple Login<\/a><\/li><li><a href=\"#5-code-gs-for-simple-login\">5. Code.gs  for Simple Login<\/a><\/li><li><a href=\"#6-final-output-simple-login\">6. Final Output Simple Login<\/a><ul><li><a href=\"#6-1-open-page\">6.1 Open Page <\/a><\/li><li><a href=\"#6-2-login-with-incorrect-id-password\">6.2 Login with Incorrect Id Password <\/a><\/li><li><a href=\"#6-3-login-with-correct-password-show-main-html\">6.3 Login With Correct Password Show Main.html<\/a><\/li><\/ul><\/li><li><a href=\"#\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932\">\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"simple-login-flow\">Simple Login Flow <\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0939\u092e \u090f\u0915 Google Sheet \u092c\u0928\u093e\u090f\u0902\u0917\u0947 \u091c\u093f\u0938\u092e\u0947 \u0915\u0940 User Id \u0914\u0930 password \u0915\u094b Store \u0915\u0930\u0947\u0902\u0917\u0947\u0964 <\/li>\n\n\n\n<li>\u0907\u0938\u0915\u0947 \u092c\u093e\u0926 \u090f\u0915 Login \u0915\u0947 \u0932\u093f\u090f index.html \u092b\u093e\u0907\u0932 \u092c\u0928\u093e \u0932\u0947\u0902\u0917\u0947 \u091c\u093f\u0938\u092e\u0947 \u0939\u092e id password \u0914\u0930 login button \u0906\u0926\u093f \u092c\u0928\u093e \u0932\u0947\u0902\u0917\u0947 <\/li>\n\n\n\n<li>\u0907\u0938\u0915\u0947 \u092c\u093e\u0926 \u0939\u092e \u090f\u0915 main.html \u092c\u0928\u093e\u090f\u0902\u0917\u0947 \u091c\u094b \u0915\u0940 \u0939\u092e\u093e\u0930\u093e Home Page \u0939\u094b\u0917\u093e \u092f\u093e\u0928\u093f \u0915\u0940 Login Success \u0939\u094b\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u092f\u0939 Page \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0928\u0947 \u0932\u0917\u0947\u0964 <\/li>\n\n\n\n<li>Login wale page \u0938\u0947 Google Apps Script \u0938\u0947 Communicate \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e JavaScript \u0915\u093e \u092d\u0940 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947\u0902\u0917\u0947 <\/li>\n\n\n\n<li>\u0914\u0930 \u0905\u0902\u0924 \u092e\u0947 \u0939\u092e code.gs \u092b\u093e\u0907\u0932 \u092e\u0947 Google Sheet \u0938\u0947 Login Data \u0915\u094b Check \u0915\u0930\u0928\u0947 \u0915\u0947 work \u0915\u0930\u0947\u0902\u0917\u0947\u0964 <\/li>\n<\/ul>\n\n\n\n<p>Simple Login Flow \u0938\u092e\u091d\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u0906\u0907\u090f \u0939\u092e \u090f\u0915 \u090f\u0915 \u0915\u0930 \u0938\u092d\u0940 Pages \u0915\u0940 Script \u0915\u094b \u0938\u092e\u091d\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-simple-login-google-sheet\">1. Simple Login Google Sheet <\/h2>\n\n\n\n<p>\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u0939\u092e \u090f\u0915 Google Sheet \u092c\u0928\u093e \u0932\u0947\u0902\u0917\u0947 \u0914\u0930 \u0909\u0938\u092e\u0947 \u090f\u0915 id \u0914\u0930 Password \u0915\u0947 \u0932\u093f\u090f column \u092c\u0928\u093e \u0932\u0947\u0902\u0917\u0947 \u0906\u092a \u092f\u0926\u093f \u0906\u0917\u0947 \u0914\u0930 Implement \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u0907\u0938\u092e\u0947 User Name \u0906\u0926\u093f \u092d\u0940 \u092c\u0928\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0924\u093e\u0915\u093f Login \u0939\u094b\u0928\u0947 \u092a\u0930 Home page \u092a\u0930 \u0926\u093f\u0916\u093e \u0938\u0915\u0924\u0947 \u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"370\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-2.png?resize=640%2C370&#038;ssl=1\" alt=\"\" class=\"wp-image-11393\" style=\"width:543px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-2.png?w=793&amp;ssl=1 793w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-2.png?resize=300%2C173&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-2.png?resize=768%2C444&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-2.png?resize=150%2C87&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"2-file-structure-for-simple-login\">2. File Structure for Simple Login <\/h2>\n\n\n\n<p>\u0905\u092c \u0939\u092e Apps Script \u092e\u0947 \u091c\u093e \u0915\u0930 \u0915\u0941\u091b Files \u092c\u0928\u093e \u0932\u0947\u0902\u0917\u0947 \u091c\u0948\u0938\u0947 \u0915\u0940 index.html \u0914\u0930 main.html , Code.gs File Automatically \u092c\u0928 \u0915\u0930 \u0939\u0940 \u0906\u0924\u0940 \u0939\u0948\u0902 \u0915\u0947\u0935\u0932 \u0909\u0938\u092e\u0947 \u0939\u092e\u0947 Code \u0932\u093f\u0916\u0928\u093e \u0939\u094b\u0924\u093e \u0939\u0948\u0902\u0964 <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"222\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-3.png?resize=640%2C222&#038;ssl=1\" alt=\"\" class=\"wp-image-11395\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-3.png?resize=1024%2C355&amp;ssl=1 1024w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-3.png?resize=300%2C104&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-3.png?resize=768%2C267&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-3.png?resize=150%2C52&amp;ssl=1 150w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-3.png?w=1311&amp;ssl=1 1311w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-index-html-for-simple-login\">3. Index.html  for Simple Login<\/h2>\n\n\n\n<p>\u0905\u092c \u0939\u092e index.html File \u092e\u0947 Code \u0932\u093f\u0916\u0947\u0902\u0917\u0947 \u091c\u094b \u0915\u093f \u0907\u0938 \u092a\u094d\u0930\u0915\u093e\u0930 \u0939\u094b\u0917\u093e\u0964 \u092f\u0939 \u090f\u0915 \u0939\u0940 Page \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 \u0939\u092e \u0924\u0940\u0928 \u092d\u093e\u0917\u094b\u0902 \u092e\u0947 Code \u0932\u093f\u0916\u0947\u0902\u0917\u0947 , HTML, CSS, JavaScript , \u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u0939\u092e HTML Code \u0932\u093f\u0916 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ud83d\udcf0Creating a Simple Login System with Google Apps Script and Google Sheets (HTML, CSS, Bootstrap, JS)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Ls1JR8QUrbA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-1-html\">3.1 HTML<\/h3>\n\n\n\n<p>\u0907\u0938\u092e\u0947 \u0939\u092e\u0928\u0947 Bootstrap \u0914\u0930 jQuery CDN \u0915\u094b \u0932\u093f\u0902\u0915 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;base target=\"_top\">\n  &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n\n  &lt;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\">\n  &lt;\/script>\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"\n    integrity=\"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07\/g=\" crossorigin=\"anonymous\">&lt;\/script>\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.3.0\/font\/bootstrap-icons.css\">\n\n  &lt;style> \/*  Copy From 3.2 *\/   &lt;\/style>\n  &lt;script> \/*  Copy From 3.3 *\/   &lt;\/script>\n&lt;\/head>\n&lt;body>\n\n  &lt;div id=\"DivLogin\" class=\"card shadow rounded-4 rounded \">\n    &lt;h5 class=\"card-header bg-secondary- text-white p-3 mycolor\">Apps Script Login&lt;\/h5>\n\n    &lt;div class=\"card-body p-4\">\n      &lt;center>\n        &lt;i class=\"bi bi-person-circle fs-1 color\">&lt;\/i>\n      &lt;\/center>\n      &lt;br>\n\n      &lt;div class=\"input-group mb-3\">\n        &lt;span class=\"input-group-text\" >User&lt;\/span>\n        &lt;input type=\"text\" class=\"form-control\" id=\"uid\" placeholder=\"User ID\" onchange=\"ClearText()\">\n      &lt;\/div>\n\n      &lt;div class=\"input-group mb-3\">\n        &lt;span class=\"input-group-text\" >Password&lt;\/span>\n        &lt;input type=\"password\" class=\"form-control\" id=\"pass\" placeholder=\"password\" onchange=\"ClearText()\" >\n      &lt;\/div>\n      &lt;br>\n\n      &lt;div id=\"RetMsg\" class=\"alert alert-danger \" style=\"display:none\" role=\"alert\">&lt;\/div>\n      &lt;button type=\"button\" class=\"btn btn-primary- mycolor float-end px-5 text-white\" onclick=\"Login()\">Login&lt;\/button>\n\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div id=\"DivMain\">  &lt;\/div>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-2-css\">3.2 CSS<\/h3>\n\n\n\n<p>Login \u0915\u094b \u090f\u0915 \u0905\u091a\u094d\u091b\u093e Look \u0926\u0947\u0928\u093e \u0915\u0947 \u0932\u093f\u090f \u0915\u0941\u091b CSS \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\"> body {\n      background-color: rgba(205, 180, 219, 30%);\n    }\n\n    .card {\n      width: 400px;\n      margin: auto;\n      margin-top: 30px;\n    }\n\n    .input-group-text {\n      width: 100px;\n      display: inline-block;\n    }\n\n    .mycolor {\n      background-color: #6d3b89;\n    }\n\n    .color {\n      color: #6d3b89;\n    }\n\n    .img {\n      width: 60px;\n      margin: auto;\n      display: inline-block;\n    }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-3-java-script-code\">3.3 JavaScript Code <\/h3>\n\n\n\n<p>Event Handling \u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u0928\u0947 JavaScript \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function Login() {\n    var uid  = document.getElementById(\"uid\").value;\n    var pass = document.getElementById(\"pass\").value;\n    google.script.run.withSuccessHandler(ReturnMsg).LoginCheck(uid,pass);\n}\n\nfunction ReturnMsg(data) {\n        if (data == true) {\n          google.script.run.withSuccessHandler(OpenMain).OpenPage(\"main\");\n        }\n        else\n        {\n            $('#RetMsg').html(\"Incorrect ID or Password !!!\");\n            $('#RetMsg').show();\n        }\n}\n\nfunction OpenMain(data) {\n   $('#DivLogin').hide();\n   $('#DivMain').html(data);\n}\n\nfunction ClearText() {\n      $('#RetMsg').html(\"\");\n      $('#RetMsg').hide();\n}\n\nfunction LogOut() {\n    ClearText();\n    document.getElementById(\"uid\").value = '';\n    document.getElementById(\"pass\").value = '';\n    $('#DivLogin').show();\n    $('#DivMain').html(\"\");\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Login() :<\/strong> \u0907\u0938 Function \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e\u0928\u0947 Id \u0914\u0930 Password \u0915\u0947 \u0935\u0948\u0932\u094d\u092f\u0942 \u0915\u094b \u0932\u0947 \u0915\u0930 Apps Script \u0915\u0947 Login Check Function \u0915\u094b Call \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>ReturnMsg() :<\/strong> \u0907\u0938 function \u0915\u094b \u0939\u092e\u0928\u0947 Apps Script \u0915\u0947 LoginCheck Function \u0915\u0940  Return \u0935\u0948\u0932\u094d\u092f\u0942 \u0915\u094b Get \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948 \u0964 \u092f\u0926\u093f Id Password Match \u0928\u0939\u0940\u0902 \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0924\u094b Error Message \u092d\u0940 Display \u0939\u094b\u0928\u0947 \u0932\u0917\u0947\u0917\u093e\u0964  <\/li>\n\n\n\n<li><strong>OpenMain() :<\/strong> \u0907\u0938 function \u0938\u0947 Login page hide \u0939\u094b \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0913\u0930 Main.html Load \u0939\u094b \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>ClearText() :<\/strong> \u0907\u0938 function \u0938\u0947 \u0939\u092e\u0928\u0947 Error Message \u0915\u094b Clear \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>LogOut() :<\/strong> \u0907\u0938 Function \u0938\u0947 \u0939\u092e\u0928\u0947 Main.html \u0915\u0947 content \u0915\u094b \u0939\u091f\u093e \u0915\u0930 \u092b\u093f\u0930 \u0938\u0947 Login Page \u0915\u094b show \u0915\u093f\u092f\u093e \u0939\u0948 \u0964 <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-main-html-for-simple-login\">4. Main.html  for Simple Login<\/h2>\n\n\n\n<p>Successfully login \u0939\u094b\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u092f\u0939 Page \u0906\u092a\u0915\u094b \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0928\u0947 \u0932\u0917\u0947\u0917\u093e\u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>  &lt;base target=\"_top\"> &lt;\/head>\n&lt;body>\n  &lt;button type=\"button\" class=\"btn  float-end px-5 text-white\" onclick=\"LogOut()\">Log Out&lt;\/button>\n  &lt;h3 class=\"mycolor p-2 text-white\">Imagination&lt;\/h3>\n  &lt;br>&lt;br>&lt;br>&lt;br>&lt;br>&lt;br>\n    &lt;center>\n       &lt;h1>Welcome to Home Page&lt;\/h1>\n    &lt;center>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-code-gs-for-simple-login\">5. Code.gs  for Simple Login<\/h2>\n\n\n\n<p>Apps Script \u0938\u0947 Related \u0938\u092d\u0940 Code \u0907\u0938  File \u092e\u0947 \u0939\u0948\u0902  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let MySheets  = SpreadsheetApp.getActiveSpreadsheet();\nlet LoginSheet  = MySheets.getSheetByName(\"login\");   \n\nfunction doGet(e) {\n    return HtmlService.createTemplateFromFile(\"index\").evaluate();\n}\n\nfunction LoginCheck(pUID, pPassword) {\n  let ReturnData = LoginSheet.getRange(\"A:A\").createTextFinder(pUID).matchEntireCell(true).findAll();\n    let StartRow = 0;\n    ReturnData.forEach(function (range) {\n      StartRow = range.getRow();\n    });\n\n    let TmpPass = 0;\n    if (StartRow > 0) {\n        TmpPass = LoginSheet.getRange(StartRow, 2).getValue();\n        if (TmpPass == pPassword) {\n            return true;\n        }\n    }\n    return false;\n}\n\nfunction OpenPage(PageName) {\n    return HtmlService.createHtmlOutputFromFile(PageName).getContent();\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>doGet() :<\/strong> \u0907\u0938 function \u092e\u0947 \u0939\u092e\u0928\u0947 Index Page \u092f\u093e\u0928\u093f \u0915\u0940 Login Page \u0915\u094b Display \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>LoginCheck() :<\/strong> \u0907\u0938 Function \u0938\u0947 \u0939\u092e\u0928\u0947 Google Sheet \u0938\u0947 \u0926\u093f\u090f \u0917\u090f \u092f\u0942\u091c\u0930 id \u0914\u0930 Password \u0915\u094b Match \u0915\u0930 true \/ False Return \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>OpenPage() :<\/strong> \u0907\u0938 Function \u0938\u0947 \u0939\u092e\u0928\u0947 Success login \u0939\u094b\u0928\u0947 \u092a\u0930 Home page \u092a\u0930 \u092f\u093e\u0928\u093f \u0915\u0940 Main.html \u092a\u0930 redirect \u0915\u093f\u092f\u093e \u0939\u0948\u0902 <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-final-output-simple-login\">6. Final Output Simple Login<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-1-open-page\">6.1 Open Page <\/h3>\n\n\n\n<p>\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u092f\u0939 Screen \u0906\u092a\u0915\u094b \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u0940 \u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"642\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-4.png?resize=640%2C642&#038;ssl=1\" alt=\"\" class=\"wp-image-11398\" style=\"width:431px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-4.png?w=736&amp;ssl=1 736w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-4.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-4.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-4.png?resize=96%2C96&amp;ssl=1 96w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"6-2-login-with-incorrect-id-password\">6.2 Login with Incorrect Id Password <\/h3>\n\n\n\n<p>\u0906\u092a\u0915\u094b User ID\u0914\u0930 Password Enter \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u092f\u0926\u093f Id password Wrong \u0939\u094b \u0924\u094b \u0928\u093f\u092e\u094d\u0928 \u092a\u094d\u0930\u0915\u093e\u0930 \u0938\u0947 Error Message Display \u0939\u094b \u091c\u093e\u090f\u0917\u093e\u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"693\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-6.png?resize=640%2C693&#038;ssl=1\" alt=\"Simple Login\" class=\"wp-image-11400\" style=\"width:434px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-6.png?w=665&amp;ssl=1 665w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-6.png?resize=277%2C300&amp;ssl=1 277w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-6.png?resize=150%2C162&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"6-3-login-with-correct-password-show-main-html\">6.3 Login With Correct Password Show Main.html<\/h3>\n\n\n\n<p>Successfully login \u0939\u094b\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u0906\u092a\u0915\u094b \u0915\u0941\u091b \u0907\u0938 \u0924\u0930\u0939 \u0938\u0947 Main Page \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0902\u0917\u0947 \u0932\u0917\u0947\u0917\u093e\u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"421\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-7.png?resize=640%2C421&#038;ssl=1\" alt=\"\" class=\"wp-image-11401\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-7.png?w=771&amp;ssl=1 771w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-7.png?resize=300%2C197&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-7.png?resize=768%2C505&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/image-7.png?resize=150%2C99&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<p>\u0906\u0936\u093e \u0939\u0948\u0902 \u092e\u0941\u091d\u0947 \u0915\u0940 \u0906\u092a\u0915\u094b \u0915\u093f\u0938 \u0924\u0930\u0939 \u0938\u0947 Simple Login \u092c\u0928\u093e\u0924\u093e \u0939\u0948\u0902 \u0938\u092e\u091d \u092e\u0947 \u0906 \u0917\u092f\u093e \u0939\u094b\u0917\u093e \u092b\u093f\u0930 \u092d\u0940 \u092f\u0926\u093f \u0906\u092a\u0915\u094b \u0915\u094b\u0908 \u092d\u0940 Doubt \u0939\u094b \u092f\u093e Query \u0939\u094b \u0924\u094b \u0906\u092a \u092e\u0941\u091d\u0947 Comment \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \u0905\u092a\u0928\u093e \u0915\u0940\u092e\u0924\u0940 \u0938\u092e\u092f \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0927\u0928\u094d\u092f\u0935\u093e\u0926 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932\"><strong>\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-function\/\">MySQL Function<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-stored-procedure\/\">MySQL Stored Procedure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/get-post-method\/\">PHP Get \/Post Method \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-math-function\/\">PHP Math Function \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/learn-cpp-from-c\/\">C \u0938\u0947 C ++ \u0938\u0940\u0916\u0947 \u0938\u0930\u0932 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947\u0902<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-variables\/\">PHP Variable \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/arduino-control-structure\/\">Arduino Control Structure<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-union\/\">Union in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-pointer\/\">Declaration of Pointer in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/search-jquery\/\">jQuery Search Filter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-table-create-alter-drop\/\">MySQL Create Table | Alter Table | Drop Table<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/api-using-node-react-express-mysql\/\">API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/cpanel\/\">CPANEL In Hindi<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll walk you through the process of building a secure login system using Google Apps Script and Google Sheets. We&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[],"class_list":["post-11392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-apps-script"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/08\/Login-System-Google-Apps-Script.jpg?fit=1280%2C720&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/11392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/comments?post=11392"}],"version-history":[{"count":29,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/11392\/revisions"}],"predecessor-version":[{"id":11765,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/11392\/revisions\/11765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/11402"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=11392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=11392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=11392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}