{"id":11407,"date":"2023-09-06T08:22:58","date_gmt":"2023-09-06T02:52:58","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=11407"},"modified":"2023-12-27T20:56:26","modified_gmt":"2023-12-27T15:26:26","slug":"secure-login-logout-user-registration-session","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/secure-login-logout-user-registration-session\/","title":{"rendered":"Secure Login, Logout and User Registration with Apps Script using Session Management"},"content":{"rendered":"\n<p>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&#8217;s security and user experience today!<\/p>\n\n\n\n<p>\u0907\u0938 Article \u092e\u0947 \u0939\u092e\u0928\u0947 Secure Login System \u092c\u0928\u093e\u092f\u093e \u0939\u0948\u0902 \u091c\u093f\u0938\u092e\u0947 \u0915\u0940 Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948 \u091c\u094b \u092a\u0942\u0930\u0940 \u0924\u0930\u0939 \u0938\u0947 Secure \u0939\u0948\u0902, \u0938\u093e\u0925 \u092e\u0947 Logout Functionality \u092d\u0940 \u092c\u0928\u093e\u0908 \u0939\u0948\u0902 \u0914\u0930 User \u0916\u0941\u0926 \u0939\u0940 Registration \u0915\u0930 \u0938\u0915\u0947 \u0910\u0938\u093e \u092d\u0940 \u092c\u0928\u093e\u092f\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p><\/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=\"#session-management\">Session Management<\/a><ul><li><a href=\"#apps-script-\u092e\u0947-session-\u0915\u093e-\u0909\u092a\u092f\u094b\u0917-\u0915\u0930\u0928\u0947-\u0915\u0947-\u0915\u094d\u092f\u093e-\u092b\u093e\u092f\u0926\u0947-\u0939\u0948\u0902\">Apps Script \u092e\u0947 Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u0915\u0947 \u0915\u094d\u092f\u093e \u092b\u093e\u092f\u0926\u0947 \u0939\u0948\u0902 ? <\/a><\/li><\/ul><\/li><li><a href=\"#1-google-sheet\">1. Google Sheet <\/a><\/li><li><a href=\"#2-login-page-for-secure-login-system\">2. Login Page for Secure Login System<\/a><ul><li><a href=\"#2-1-html-code-for-secure-login\">2.1 HTML Code For Secure Login <\/a><\/li><li><a href=\"#2-2-css-code-for-secure-login\">2.2 CSS Code for Secure Login<\/a><\/li><li><a href=\"#2-3-java-script-for-secure-login\">2.3 JavaScript for Secure Login <\/a><\/li><\/ul><\/li><li><a href=\"#3-user-registration\">3. User Registration <\/a><ul><li><a href=\"#3-1-html-code-for-user-registration\">3.1 HTML Code for User Registration <\/a><\/li><li><a href=\"#3-2-java-script-code-for-user-registration\">3.2  JavaScript Code for User Registration <\/a><\/li><\/ul><\/li><li><a href=\"#4-home-page\">4. Home Page<\/a><ul><li><a href=\"#4-1-html-code-for-home-page-main-html\">4.1 HTML Code for Home Page (main.html) <\/a><\/li><li><a href=\"#4-2-css-code-for-home-page\">4.2 CSS Code for Home Page <\/a><\/li><li><a href=\"#4-3-java-script-code-for-home-page\">4.3 JavaScript Code for Home Page<\/a><\/li><\/ul><\/li><li><a href=\"#5-apps-script-code\">5. Apps Script Code <\/a><\/li><li><a href=\"#6-deploy-code\">6. Deploy Code <\/a><\/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<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"session-management\">Session Management<\/h2>\n\n\n\n<p>\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u092e\u0947 \u0906\u092a\u0915\u094b Session Management \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947 \u092c\u093e\u0924 \u0926\u0947\u0924\u093e \u0939\u0941, Apps Script \u092e\u0947 Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e Client Side \u0938\u0947 \u090f\u0915 \u092f\u093e \u090f\u0915 \u0938\u0947 \u0905\u0927\u093f\u0915 Value \u0915\u094b \u090f\u0915 \u0910\u0938\u0947 \u0938\u094d\u0925\u093e\u0928 \u092a\u0930 Store \u0915\u0930\u0935\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u091c\u0940\u0938\u0947 \u0915\u0940 Apps Script \u091c\u094b \u0915\u0940 Server Side Execute \u0939\u094b\u0924\u0940 \u0939\u0948\u0902 \u0935\u0939 \u0909\u0938\u0947 Use \u0915\u0930 \u092a\u093e\u090f\u0964 <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"apps-script-\u092e\u0947-session-\u0915\u093e-\u0909\u092a\u092f\u094b\u0917-\u0915\u0930\u0928\u0947-\u0915\u0947-\u0915\u094d\u092f\u093e-\u092b\u093e\u092f\u0926\u0947-\u0939\u0948\u0902\">Apps Script \u092e\u0947 Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u0915\u0947 \u0915\u094d\u092f\u093e \u092b\u093e\u092f\u0926\u0947 \u0939\u0948\u0902 ? <\/h3>\n\n\n\n<p>Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0928\u0947 \u0938\u0947 \u0939\u092e \u0905\u092a\u0928\u0947 Page \u0915\u094b Secure \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u092f\u093e\u0928\u093f \u0915\u0940 unauthorized Access \u0938\u0947 \u092c\u091a\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902\u0964 \u0907\u0938 Secure Login System \u092e\u0947 \u0939\u092e\u0928\u0947 Login \u0915\u094b Secure \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-google-sheet\">1. Google Sheet <\/h2>\n\n\n\n<p>\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u090f\u0915 Google Sheet \u092c\u0928\u093e \u0932\u0940\u091c\u093f\u090f, \u091a\u093e\u0939\u0947 \u0924\u094b \u0906\u092a \u0907\u0938\u092e\u0947 \u092a\u0939\u0932\u0947 \u0938\u0947 ID \u0914\u0930 Password \u0915\u0940 Entry \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902, \u0914\u0930 \u0928\u0939\u0940\u0902 \u092d\u0940 \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u094b \u0939\u092e \u091c\u092c User Registration Page \u092c\u0928\u093e\u090f\u0902\u0917\u0947 \u0924\u092c \u0935\u0939\u093e\u0901 \u0938\u0947 Entry \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u094b \u0935\u0939 \u0906\u0915\u093e\u0930 Google Sheet \u092a\u0930 Store \u0939\u094b \u091c\u093e\u090f\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=\"391\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-3.png?resize=640%2C391&#038;ssl=1\" alt=\"\" class=\"wp-image-11422\" style=\"width:456px;height:279px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-3.png?w=667&amp;ssl=1 667w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-3.png?resize=300%2C184&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-3.png?resize=150%2C92&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-login-page-for-secure-login-system\">2. Login Page for Secure Login System<\/h2>\n\n\n\n<p>\u092f\u0939 Login Page \u0939\u0948\u0902, \u092f\u0939\u093e \u0938\u0947 \u0939\u092e User ID \u0914\u0930 Password Enter \u0915\u0930 Google Sheet \u0938\u0947 Validate \u0915\u0930 Home Page \u092a\u0930 \u091c\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 , \u0938\u093e\u0925 \u0939\u0940 \u092e\u0947 \u092f\u0926\u093f \u0939\u092e User Registration \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0947 \u0924\u094b \u092f\u0902\u0939\u093e \u0938\u0947 \u0939\u092e User Registration Page \u092a\u0930 \u092d\u0940 \u091c\u093e \u0938\u0915\u0924\u0947 \u0939\u0948\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=\"582\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image.png?resize=640%2C582&#038;ssl=1\" alt=\"\" class=\"wp-image-11414\" style=\"width:402px;height:366px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image.png?w=643&amp;ssl=1 643w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image.png?resize=300%2C273&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image.png?resize=150%2C136&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<p>\u092f\u0926\u093f \u0939\u092e \u0907\u0938\u092e\u0947 Wrong Credential Enter \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u092c \u0928\u093f\u092e\u094d\u0928 \u092a\u094d\u0930\u0915\u093e\u0930 \u0938\u0947 Alert Message Display \u0939\u094b\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=\"544\" height=\"104\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-4.png?resize=544%2C104&#038;ssl=1\" alt=\"\" class=\"wp-image-11437\" style=\"width:400px;height:76px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-4.png?w=544&amp;ssl=1 544w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-4.png?resize=300%2C57&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-4.png?resize=150%2C29&amp;ssl=1 150w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/figure>\n<\/div>\n\n\n<p>\u0906\u0907\u090f \u0905\u092c \u0907\u0938\u0915\u093e Code \u0926\u0947\u0916\u0924\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\udcf0Secure Login, Logout, and User Registration with Apps Script | Session Management\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/90SQmafC1HU?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=\"2-1-html-code-for-secure-login\">2.1 HTML Code For Secure Login <\/h3>\n\n\n\n<p><\/p>\n\n\n\n<pre title=\"login.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n  &lt;title&gt;Login&lt;\/title&gt;\n  &lt;base target=\"_top\"&gt;\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\"&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"\n    integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"&gt;\n  &lt;\/script&gt;\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"\n    integrity=\"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07\/g=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.3.0\/font\/bootstrap-icons.css\"&gt;\n\n  &lt;style &gt;     &lt;\/style &gt;  &lt;!-- Add CSS --&gt;\n  &lt;script&gt;     &lt;\/script&gt;  &lt;!-- Add JS --&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n\n  &lt;div id=\"DivLogin\" class=\"card shadow rounded-4 rounded \"&gt;\n\n    &lt;h5 class=\"card-header bg-secondary- text-white p-3 mycolor\"&gt;Apps Script Secure Login&lt;\/h5&gt;\n    &lt;a style=\"display:none\" id=\"myid\" href=\"&lt;?= myURL(); ?&gt;\" target=\"_top\"&gt;Link&lt;\/a&gt;\n    &lt;div class=\"card-body p-4\"&gt;\n\n      &lt;center&gt;\n        &lt;i class=\"bi bi-person-circle fs-1 color\"&gt;&lt;\/i&gt;\n      &lt;\/center&gt;\n      &lt;br&gt;\n\n      &lt;div class=\"input-group mb-3\"&gt;\n        &lt;span class=\"input-group-text\" &gt;User&lt;\/span&gt;\n        &lt;input type=\"text\" class=\"form-control\" id=\"uid\" required placeholder=\"User ID\" onchange=\"ClearText()\"&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"input-group mb-3\"&gt;\n        &lt;span class=\"input-group-text\" &gt;Password&lt;\/span&gt;\n        &lt;input type=\"password\" class=\"form-control\" id=\"pass\" required placeholder=\"Password\" onchange=\"ClearText()\" &gt;\n      &lt;\/div&gt;\n      &lt;br&gt;\n\n      &lt;div id=\"RetMsg\" class=\"alert alert-danger \" style=\"display:none\" role=\"alert\"&gt; &lt;\/div&gt;\n\n\n\n\n      &lt;button type=\"button\" onclick=\"login()\"  class=\"btn btn-primary- mycolor float-end px-5 text-white\" &gt;Login&lt;\/button&gt;\n\n      &lt;span href=\"#\"  onclick=\"OpenRegisterPage()\"&gt;Register (New User)&lt;\/a&gt;\n      \n\n    &lt;\/div&gt;\n\n    &lt;form &gt;\n  &lt;\/div&gt;\n  \n  &lt;div id=\"DivRegister\"&gt;&lt;\/div&gt;\n  \n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-2-css-code-for-secure-login\">2.2 CSS Code for Secure Login<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">&lt;style&gt;\n    body {\n      background-color:  rgba(58, 103, 177, 30%); \/\/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: #3a67b1; \/\/#6d3b89;\n    }\n\n    .color {\n      color: #3a67b1; \/\/#6d3b89;\n    }\n\n    .img {\n      width: 60px;\n      margin: auto;\n      display: inline-block;\n    }\n  &lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-3-java-script-for-secure-login\">2.3 JavaScript for Secure Login <\/h3>\n\n\n\n<p>\u0907\u0938 Code \u0915\u094b \u0906\u092a Copy \u0915\u0930 HTML File \u092e\u0947 head tag \u092e\u0947 Paste \u0915\u0930\u0947 , \u092f\u093e \u092b\u093f\u0930 \u0906\u092a \u090f\u0915 \u0905\u0932\u0917 File \u092c\u0928\u093e \u0915\u0930 \u092d\u0940 Include \u0915\u0930 \u092d\u0940 \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">  &lt;script&gt;\n    function login() {\n    var username = document.getElementById(\"uid\").value;\n    var password = document.getElementById(\"pass\").value;\n    \n    google.script.run.withSuccessHandler(function(response) {\n    \n      if (response === \"success\") {\n      document.getElementById(\"myid\").click();\n      } else {\n        $(\"#RetMsg\").removeClass(\"alert-danger\").removeClass(\"alert-success\").addClass(\"alert-danger\");\n        $(\"#RetMsg\").html(\"Invalid User ID or Password\");\n        $(\"#RetMsg\").show();\n      }\n      }).loginUser(username, password);\n    }\n\n\n  function ClearText()\n  {\n      $('#RetMsg').html(\"\");\n      $('#RetMsg').hide();\n      $('#RetMsgReg').html(\"\");\n      $('#RetMsgReg').hide();\n  }\n\n  function OpenRegisterPage()\n  {\n        google.script.run.withSuccessHandler(ShowRegister).OpenPage(\"register\");\n  }\n\n  function ShowRegister(data)\n  {\n    $('#DivLogin').hide();\n    $('#DivRegister').html(data);\n  }\n\n  &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>login() :<\/strong> \u092f\u0939 login() \u091c\u092c \u0939\u092e Login Button \u092a\u0930 Click \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u091c\u092c Call \u0939\u094b\u0924\u093e \u0939\u0948\u0902\u0964 User ID \u0914\u0930 Password Collect \u0915\u0930\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u092f\u0939 Apps Script \u0915\u0947 loginuser Function \u0915\u094b call \u0915\u0930 \u0926\u0947\u0924\u093e \u0939\u0948\u0964  <\/li>\n\n\n\n<li><strong>ClearText() :<\/strong> \u0915\u093f\u0938\u0940 \u092d\u0940 Text \u0915\u0947 OnChange Event \u092a\u0930 Alert Box \u0915\u094b Hide \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0914\u0930 Alert \u092e\u0947 \u0932\u093f\u0916\u0947 Message \u0915\u094b \u0939\u091f\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Function \u0915\u094b Call \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>OpenRegisterPage() :<\/strong> User Registraction Page \u0915\u094b Open \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Function \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 \u0907\u0938\u092e\u0947 \u0938\u0947 Apps Script \u0915\u094b call \u0915\u0930 Register Page \u0915\u0947  HTML \u0915\u094b ShowRegister Function \u092e\u0947 Pass \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>ShowRegister(data) :<\/strong> \u0907\u0938 Function \u0915\u094b OpenRegisterPage() Function \u0915\u0947 \u0926\u094d\u0935\u093e\u0930\u093e Call \u0915\u093f\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902, \u0907\u0938 Function \u0938\u0947 \u0939\u092e\u0928\u0947 \u091c\u094b Apps Script \u0938\u0947 User Registration Page \u0915\u093e HTML Code \u0932\u093e\u090f \u0939\u0948\u0902 \u0909\u0938\u0947 Div \u091c\u093f\u0938\u0915\u093e \u0928\u093e\u092e DivRegister \u0939\u0948\u0902 \u0909\u0938 \u092a\u0930 Set \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0914\u0930 Login \u0915\u094b Hide \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-user-registration\">3. User Registration <\/h2>\n\n\n\n<p>\u0907\u0938 Page \u0938\u0947 \u0939\u092e \u0915\u094b\u0908 \u092d\u0940 \u0928\u090f User \u0915\u093e Registration \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 Example \u0915\u0947 \u0915\u0947\u0935\u0932 \u0935\u0939\u0940 Columns \u0932\u093f\u090f \u0939\u0948\u0902 \u091c\u094b \u091c\u0930\u0942\u0930\u0940 \u0939\u0948\u0902 \u0906\u092a \u091a\u093e\u0939\u0947 \u0924\u094b \u0914\u0930 \u092d\u0940 Columns \u0932\u0947 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938 Page \u092a\u0930 \u0939\u092e\u0928\u0947 \u0915\u0941\u091b Validation \u092d\u0940 \u0932\u0917\u093e\u090f \u0939\u0948\u0902 \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=\"598\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-1.png?resize=640%2C598&#038;ssl=1\" alt=\"\" class=\"wp-image-11416\" style=\"width:348px;height:325px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-1.png?w=650&amp;ssl=1 650w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-1.png?resize=300%2C280&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-1.png?resize=150%2C140&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<p>\u092f\u0926\u093f Password \u0914\u0930 Re-enter Password same \u0928\u0939\u0940\u0902 \u0939\u094b\u0928\u0947 \u092a\u0930 \u0928\u093f\u092e\u094d\u0928 \u092a\u094d\u0930\u0915\u093e\u0930 \u0938\u0947 Message \u0906\u090f\u0917\u093e, \u092f\u0939 JavaScript \u0938\u0947 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \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=\"545\" height=\"106\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-5.png?resize=545%2C106&#038;ssl=1\" alt=\"\" class=\"wp-image-11438\" style=\"width:345px;height:67px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-5.png?w=545&amp;ssl=1 545w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-5.png?resize=300%2C58&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-5.png?resize=150%2C29&amp;ssl=1 150w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/figure>\n<\/div>\n\n\n<p>\u092f\u0926\u093f \u090f\u0915 \u092c\u093e\u0930 \u092a\u0939\u0932\u0947 \u0938\u0947 User Registered \u0939\u0948\u0902 \u0924\u092c User Already Exists \u0915\u093e Message \u0906\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=\"542\" height=\"97\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-9.png?resize=542%2C97&#038;ssl=1\" alt=\"\" class=\"wp-image-11447\" style=\"width:343px;height:61px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-9.png?w=542&amp;ssl=1 542w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-9.png?resize=300%2C54&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-9.png?resize=150%2C27&amp;ssl=1 150w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/figure>\n<\/div>\n\n\n<p>\u091c\u092c User \u0938\u092d\u0940 Validation pass \u0915\u0930 \u0932\u0947\u0917\u093e \u0924\u094b \u0915\u0941\u091b \u0907\u0938 \u0924\u0930\u0939 \u0938\u0947 Message Display \u0939\u094b\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=\"545\" height=\"99\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-8.png?resize=545%2C99&#038;ssl=1\" alt=\"\" class=\"wp-image-11445\" style=\"width:357px;height:65px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-8.png?w=545&amp;ssl=1 545w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-8.png?resize=300%2C54&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-8.png?resize=150%2C27&amp;ssl=1 150w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/figure>\n<\/div>\n\n\n<p>\u0906\u0907\u090f \u0905\u092c \u0907\u0938\u0915\u0947 Code \u0915\u094b \u092d\u0940 \u0938\u092e\u091d \u0932\u0947\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-1-html-code-for-user-registration\">3.1 HTML Code for User Registration <\/h3>\n\n\n\n<pre title=\"register.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;script&gt;&lt;\/script&gt; &lt;!--  Add JS --&gt;\n\n&lt;div class=\"card shadow rounded-4 rounded \"&gt;\n  &lt;h5 class=\"card-header bg-secondary- text-white p-3 mycolor\"&gt;User Registration&lt;\/h5&gt;\n\n  &lt;div class=\"card-body p-4\"&gt;\n\n\n    &lt;div id=\"RegBody\"&gt;\n      &lt;div class=\"input-group mb-3\"&gt;\n        &lt;span class=\"input-group-text\" &gt;User Name&lt;\/span&gt;\n        &lt;input type=\"text\" class=\"form-control\" id=\"reg_uname\" placeholder=\"User Name\" onchange=\"ClearText()\"&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"input-group mb-3\"&gt;\n        &lt;span class=\"input-group-text\" &gt;User ID&lt;\/span&gt;\n        &lt;input type=\"text\" class=\"form-control\" id=\"reg_uid\" placeholder=\"User ID\" onchange=\"ClearText()\"&gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"input-group mb-3\"&gt;\n        &lt;span class=\"input-group-text\" &gt;Password&lt;\/span&gt;\n        &lt;input type=\"password\" class=\"form-control\" id=\"reg_pass\" placeholder=\"Password\" onchange=\"ClearText()\" &gt;\n      &lt;\/div&gt;\n\n      &lt;div class=\"input-group mb-3\"&gt;\n        &lt;span class=\"input-group-text\" &gt;Re-enter&lt;\/span&gt;\n        &lt;input type=\"password\" class=\"form-control\" id=\"reg_repass\" placeholder=\"Re-enter Password\" onchange=\"ClearText()\" &gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div id=\"RetMsgReg\" class=\"alert alert-danger \" style=\"display:none\" role=\"alert\"&gt; &lt;\/div&gt;\n\n    &lt;button type=\"button\" class=\"btn btn-primary- mycolor float-end px-5 text-white\" onclick=\"Register()\"&gt;Register&lt;\/button&gt;\n\n\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-2-java-script-code-for-user-registration\">3.2  JavaScript Code for User Registration <\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n  function Register()\n  {\n    \n    var unm    = document.getElementById(\"reg_uname\").value.trim();\n    var uid    = document.getElementById(\"reg_uid\").value.trim();\n    var pass   = document.getElementById(\"reg_pass\").value.trim();\n    var repass = document.getElementById(\"reg_repass\").value.trim();\n\n    if (pass != repass)\n    {\n      RegReturnMsg(\"danger,Password Not Matched...\");\n    }\n    else\n    {\n      google.script.run.withSuccessHandler(RegReturnMsg).UserRegister(uid,pass,unm);\n    }\n    \n    \n  }\n  \n  function RegReturnMsg(data)\n  {\n      let v = data.split(\",\");\n      let type=v[0];\n\n      $('#RetMsgReg').removeClass(\"alert-success\").removeClass(\"alert-danger\").addClass(\"alert-\"+type);\n      $('#RetMsgReg').html(v[1]);\n      $('#RetMsgReg').show();\n\n      if (type == 'success')\n      {\n        setTimeout(function(){  \n           document.getElementById(\"myid\").click();\n           }, 3000);\n      }\n\n  }\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Register() :<\/strong> \u0907\u0938 Function \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 \u0939\u092e Screen \u0938\u0947 \u0938\u092d\u0940 \u091c\u0930\u0942\u0930\u0940 Columns \u0915\u0940 Value \u0915\u094b \u0932\u0947\u0915\u0930 \u0909\u0938\u0947 Apps Script \u092a\u0930 \u092d\u0947\u091c \u0926\u0947\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0938\u093e\u0925 \u0939\u0940 \u092e\u0947 Screen Level \u0915\u0947 Validation \u092d\u0940 \u0939\u092e\u0928\u0947 \u0907\u0938\u092e\u0947 \u0932\u0917\u093e\u090f \u0939\u0948\u0902 \u0964 \u091c\u094b \u092d\u0940 Apps Script \u0938\u0947 Return \u0906\u0924\u093e \u0939\u0948\u0902 \u0909\u0938\u0938\u0947 \u090f\u0915 \u0928\u092f\u093e Function Call \u0915\u0930 \u0926\u0947\u0924\u0947 \u0939\u0948\u0902 \u091c\u094b \u0915\u0940 \u0928\u093f\u092e\u094d\u0928 \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>RegReturnMsg(data) :<\/strong> \u0907\u0938 Function \u0938\u0947 \u091c\u0940\u0924\u0928\u0947 \u092d\u0940 Validation \u0932\u0917\u093e\u090f \u0939\u0948\u0902 \u0909\u0928\u094d\u0939\u0947 \u0926\u093f\u0916\u093e\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902\u0964 \u0938\u093e\u0925 \u092e\u0947 Success Fully Registerd \u0939\u094b\u0928\u0947 \u0915\u0947 \u092a\u0947\u091c \u0915\u094b Login \u0935\u093e\u0932\u0947 Page \u092a\u0930 \u0932\u0947 \u091c\u093e\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-home-page\">4. Home Page<\/h2>\n\n\n\n<p>\u091c\u092c User Successfully Login \u0915\u0930 \u0932\u0947\u0917\u093e \u0924\u094b \u0935\u0939 \u0907\u0938 Page \u092a\u0930 \u0906 \u091c\u093e\u090f\u0917\u093e, \u092f\u0939 \u092a\u0942\u0930\u0940 \u0924\u0930\u0939 \u0938\u0947 Secure \u0939\u0948\u0902 \u0915\u094d\u092f\u0941\u0915\u0940 \u0939\u092e\u0928\u0947 \u0907\u0938\u092e\u0947 Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 Session \u0938\u0947 user \u0915\u094b \u092c\u093e\u0939\u0930 \u0906\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u0928\u0947 Logout \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u091c\u093f\u0938\u0915\u0940 Functionality \u0906\u092a\u0915\u094b \u0907\u0938\u0940 \u092a\u0947\u091c \u092a\u0930 \u092e\u093f\u0932 \u091c\u093e\u090f\u0917\u0940\u0964 <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0907\u0938 Home \u092a\u0930 \u092a\u0930 \u092f\u0926\u093f \u0906\u092a Navigation bar \u092c\u0928\u093e \u0915\u0930 \u090f\u0915 \u0938\u0947 \u0905\u0927\u093f\u0915 page \u0926\u093f\u0916\u093e\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u094b \u0906\u092a \u0928\u093f\u092e\u094d\u0928 Article \u0915\u094b \u092d\u0940 Read \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0914\u0930 \u0938\u093e\u0925 \u092e\u0947 Source Code \u092d\u0940 \u0938\u092e\u091d \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/multiple-pages-in-google-apps-script-web-app\/\">https:\/\/selfimagination.in\/tips\/multiple-pages-in-google-apps-script-web-app\/<\/a><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"347\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-2.png?resize=640%2C347&#038;ssl=1\" alt=\"\" class=\"wp-image-11418\" style=\"width:551px;height:299px\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-2.png?resize=1024%2C555&amp;ssl=1 1024w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-2.png?resize=300%2C163&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-2.png?resize=768%2C416&amp;ssl=1 768w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-2.png?resize=150%2C81&amp;ssl=1 150w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2023\/09\/image-2.png?w=1185&amp;ssl=1 1185w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"4-1-html-code-for-home-page-main-html\">4.1 HTML Code for Home Page (main.html) <\/h3>\n\n\n\n<p>\u092f\u0939 \u0915\u0947\u0935\u0932 Basic Page \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 \u0915\u0947\u0935\u0932 Welcome Message \u0939\u0940 \u0926\u093f\u0916\u093e\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902 \u0938\u093e\u0925 \u092e\u0947 \u0907\u0938\u092e\u0947 Logout \u0915\u0940 Function \u0915\u093e \u092d\u0940 Implement \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre title=\"main.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\n&lt;head&gt;\n  &lt;base target=\"_top\"&gt;\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\"&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"\n    integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"&gt;\n  &lt;\/script&gt;\n\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"\n    integrity=\"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07\/g=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.3.0\/font\/bootstrap-icons.css\"&gt;  \n\n  &lt;style&gt;    &lt;\/style&gt; &lt;!-- Add CSS --&gt;\n  &lt;script&gt;   &lt;\/script&gt;  &lt;!-- Add JS --&gt;\n&lt;\/head&gt;\n\n&lt;body onload=\"\"&gt;\n   \n  &lt;button class=\"btn  float-end px-5 text-white\" type=\"button\" onclick=\"logout()\"&gt;Log Out&lt;\/button&gt;\n  &lt;a style=\"display:none\" id=\"myid\" href=\"&lt;?= myURL(); ?&gt;\" target=\"_top\"&gt;Link&lt;\/a&gt;\n  \n  &lt;h3 class=\"mycolor p-2 text-white\"&gt;Imagination&lt;\/h3&gt;\n  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\n  &lt;center&gt;\n    &lt;h1&gt;Welcome to Home Page&lt;\/h1&gt;\n    &lt;\/center&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0907\u0938\u092e\u0947 \u092e\u0947 Style \u0914\u0930 Script Tag \u0939\u0948 \u0909\u0938\u092e\u0947 \u0906\u092a \u0928\u093f\u092e\u094d\u0928 Code \u0915\u094b Paste \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u092f\u093e \u0906\u092a \u0905\u0932\u0917 \u0938\u0947 File \u092c\u0928\u093e \u0915\u0930 \u092d\u0940 Include \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-2-css-code-for-home-page\">4.2 CSS Code for Home Page <\/h3>\n\n\n\n<p>\u0907\u0938\u092e\u0947 \u0915\u094b\u0908 \u092d\u0940 Mejor Code \u0928\u0939\u0940\u0902 \u0939\u0948\u0902 \u0915\u0947\u0935\u0932 Background \u0914\u0930 Text Colour \u0915\u094b \u0939\u0940 \u0938\u0947\u091f \u0915\u093f\u092f\u093e \u0939\u0948\u0902  \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">&lt;style&gt;\n    body {\n      background-color:  rgba(58, 103, 177, 30%); \/\/rgba(205, 180, 219, 30%);\n    }\n\n    .mycolor {\n      background-color: #3a67b1;\/\/#6d3b89;\n    }\n\n    .color {\n      color: #3a67b1; \/\/#6d3b89;\n    }\n \n  &lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-3-java-script-code-for-home-page\">4.3 JavaScript Code for Home Page<\/h3>\n\n\n\n<p>\u0939\u092e\u0928\u0947 Apps Script \u092e\u0947 Session \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0907\u0938\u0932\u093f\u090f \u0939\u092e\u0947 Logout \u0915\u0930\u0924\u0947 \u0938\u092e\u092f Apps Script \u0915\u0947 Function \u0915\u094b call \u0915\u0930\u0928\u0947 \u0915\u0940 \u0906\u0935\u0936\u094d\u092f\u0915\u0924\u093e \u0932\u0917\u0940 \u0939\u0948\u0902  \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"> &lt;script&gt;\n    \n    function logout()\n    {\n      google.script.run.withSuccessHandler(AfterLogOut).logoutUser();\n    }\n    function AfterLogOut()\n    {\n         document.getElementById(\"myid\").click();\n    }\n\n  &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>logout() :<\/strong> \u092f\u0939 Function Logout button \u0915\u094b Click \u0915\u0930\u0928\u0947 \u092a\u0930 Call \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0964 \u0914\u0930 \u092f\u0939 Apps Script \u0915\u0947 logoutUser Function \u0915\u094b Call \u0915\u0930 \u0926\u0947\u0924\u093e \u0939\u0948\u0902\u0964 \u091c\u092c Successfully Logout \u0939\u094b \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0924\u092c AfterLogOut() Function \u0915\u094b \u0915\u0932 \u0915\u0930 \u0926\u093f\u092f\u093e \u091c\u093e\u0924 \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>AfterLogOut() :<\/strong> \u0907\u0938 Function \u0938\u0947 Page \u0915\u094b Refresh \u0915\u0930 \u0926\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0924\u093e\u0915\u093f \u092b\u093f\u0930 \u0938\u0947 Login Screen \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0928\u0947 \u0932\u0917\u0947\u0964 <\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-apps-script-code\">5. Apps Script Code <\/h2>\n\n\n\n<p>\u092f\u0939\u093e\u0901 \u0938\u0947 Apps Script \u0915\u093e Code \u0936\u0941\u0930\u0942 \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0964 \u0905\u092d\u0940 \u0924\u0915 \u091c\u093f\u0924\u0928\u0940 \u092d\u0940 Screen \u0914\u0930 page \u0939\u092e\u0928\u0947 \u092c\u0928\u093e\u092f\u0947 \u0939\u0948\u0902 \u0935\u0939 \u0938\u092d\u0940 \u0907\u0938\u0940 Page \u0938\u0947 Communicate \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938\u0932\u093f\u090f \u0907\u0938 page \u092a\u0930 \u0938\u092d\u0940 Page \u0938\u0947 Related Function \u0906\u092a\u0915\u094b \u092e\u093f\u0932 \u091c\u093e\u090f\u0902\u0917\u0947\u0964 \u0928\u093f\u092e\u094d\u0928 \u0938\u092d\u0940 Code \u0915\u094b \u0906\u092a\u0915\u094b code.gs file \u092e\u0947 Paste \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Link Sheet : <\/strong>\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u0939\u092e \u091c\u093f\u0938 Google Sheet \u0938\u0947 Data Get \u0914\u0930 Set \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0909\u0938\u0947 Link \u0915\u0930\u0947\u0902\u0917\u0947\u0964 <\/li>\n<\/ul>\n\n\n\n<pre title=\"Code.gs\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let MySheets  = SpreadsheetApp.getActiveSpreadsheet();\nlet LoginSheet  = MySheets.getSheetByName(\"login\");   <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>doGet() :<\/strong> \u091c\u092c \u092d\u0940 Program Execute \u0939\u094b\u0924\u093e \u0939\u0948\u0902 \u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 doGet Function \u0939\u0940 Call \u0939\u094b\u0924\u093e \u0939\u0948\u0902\u0964 \u0907\u0938 function \u092e\u0947 Default Login page \u0915\u094b \u0939\u0940 open \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0914\u0930 \u092f\u0926\u093f \u0906\u092a Successfully User Check \u0915\u094b pass \u0915\u0930 \u0932\u093f\u092f\u093e \u0924\u094b \u092f\u0939 \u0906\u092a\u0915\u094b Main page \u092a\u0930 redirect \u0915\u0930 \u0926\u0947\u0924\u0947 \u0939\u0948\u0902 \u0964  <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function doGet(e) {\n  var output = HtmlService.createTemplateFromFile('login');\n  \n  var sess = getSession();\n   if (sess.loggedIn) {\n     output = HtmlService.createTemplateFromFile('main');\n  }\n  return output.evaluate();\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>myURL() :<\/strong> \u092f\u0939 \u0939\u092e\u093e\u0930\u0947 Page \u0915\u0947 URL \u0915\u094b Get \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u092c\u0928\u093e\u092f\u093e \u0939\u0948\u0902 \u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function myURL() {\n  return ScriptApp.getService().getUrl();\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>setSession() :<\/strong> \u091c\u092c Used ID \u0914\u0930 Password \u0938\u0939\u0940 \u0939\u094b\u0924\u0947 \u0939\u0948\u0902 \u0924\u092c \u0907\u0938 Function \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930 Session Login Flag \u0915\u094b true \u0915\u0930 \u0926\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0924\u093e\u0915\u093f \u091c\u092c \u0905\u0917\u0932\u0940 \u092c\u093e\u0930 Page Refresh \u0939\u094b \u0924\u094b User Home Page \u092a\u0930 Redirect \u0939\u094b \u0938\u0915\u0947 \u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function setSession(session) {\n  var sId   = Session.getTemporaryActiveUserKey();\n  var uProp = PropertiesService.getUserProperties();\n  uProp.setProperty(sId, JSON.stringify(session));\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>getSession() :<\/strong> \u0907\u0938 Function \u0938\u0947 Session \u092e\u0947 Login \u0915\u0940 value \u0915\u094d\u092f\u093e \u0939\u0948\u0902 \u0935\u0939 Return \u0915\u0930\u0924\u093e \u0939\u0948\u0902 \u0964 \u092f\u093e\u0928\u093f \u0915\u0940 User Login \u0939\u0948\u0902 \u092f\u093e \u0928\u0939\u0940\u0902 \u0907\u0938 Flag \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947 \u091c\u093e\u0928\u0915\u093e\u0930\u0940 \u0939\u092e\u0947 \u092f\u0939 Function \u0926\u0947\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function getSession() {\n  var sId   = Session.getTemporaryActiveUserKey();\n  var uProp = PropertiesService.getUserProperties();\n  var sData = uProp.getProperty(sId);\n  return sData ? JSON.parse(sData) : { loggedIn: false };\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>loginUser() :<\/strong> \u092f\u0939 function JavaScript \u0938\u0947 call \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u092f\u0939 loginCheck function \u0915\u094b Call \u0915\u0930\u0924\u093e \u0939\u0948\u0902 \u0914\u0930 JavaScript \u0915\u094b Return \u0935\u0948\u0932\u094d\u092f\u0942 provide \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function loginUser(pUID, pPassword) {\n    \n    if (loginCheck(pUID, pPassword)) {\n      \n      var sess = getSession();\n      sess.loggedIn = true;\n      setSession(sess);\n\n        return 'success';\n    } \n    else {\n        return 'failure';\n    }\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>logoutUser() :<\/strong> \u092f\u0939 Session \u092e\u0947 Store Login \u0935\u0948\u0932\u094d\u092f\u0942 \u0915\u094b unset \u0915\u0930 \u0926\u0947\u0924\u093e \u0939\u0948\u0902 \u091c\u093f\u0938\u0938\u0947 \u0915\u0940 User Logout \u0939\u094b \u091c\u093e\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function logoutUser() {\n  var sess = getSession();\n  sess.loggedIn = false;\n  setSession(sess);\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>loginCheck :<\/strong> \u092f\u0939 Function Google Sheet \u0938\u0947 \u0926\u093f\u092f\u0947 \u0917\u090f ID Password \u0915\u094b Match \u0915\u0930\u0928\u0947 \u0915\u093e \u0915\u093e\u0930\u094d\u092f \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function loginCheck(pUID, pPassword) {\n  let LoginPass =  false;\n      let ReturnData = LoginSheet.getRange(\"A:A\").createTextFinder(pUID).matchEntireCell(true).findAll();\n        \n        ReturnData.forEach(function (range) {\n          let StartRow = range.getRow();\n          let TmpPass = LoginSheet.getRange(StartRow, 2).getValue();\n          if (TmpPass == pPassword)\n          {\n              LoginPass = true;\n          }\n        });\n\n    return LoginPass;\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>OpenPage() :<\/strong> \u092f\u0939 Registration page \u0915\u0947 HTML \u0915\u094b Return \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function OpenPage(PageName)\n{\n    return HtmlService.createHtmlOutputFromFile(PageName).getContent();\n}\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>UserRegister() :<\/strong> \u0907\u0938 Function \u0938\u0947 \u0939\u092e \u0928\u090f User \u0915\u093e Data Google Sheet \u092e\u0947 Store \u0915\u0930\u0924\u0947 \u0939\u0948\u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">function UserRegister(pUID, pPassword, pName) {\n    \n    let RetMsg = '';\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    if (StartRow &gt; 0) \n    {\n      RetMsg = 'danger, User Already Exists';\n    }\n    else\n    {\n      LoginSheet.appendRow([pUID, pPassword, pName]) ;  \n      RetMsg = 'success, User Successfully Registered'; \n    }\n\n    return  RetMsg;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-deploy-code\">6. Deploy Code <\/h2>\n\n\n\n<p>\u0907\u0938\u0915\u0947 \u092c\u093e\u0926 \u0906\u092a\u0915\u094b project \u0915\u094b deploy \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0914\u0930 Deployment \u0915\u0930\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u091c\u094b \u0932\u093f\u0902\u0915 \u0906\u0924\u0940 \u0939\u0948\u0902 \u0909\u0938\u0947 Click \u0915\u0930 Execute \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p><strong>Deployment \u0938\u0940\u0916\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0906\u092a \u0928\u093f\u092e\u094d\u0928 Article \u0915\u0940 \u092e\u0926\u0926 \u0932\u0947 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/selfimagination.in\/tips\/deploying-apps-script-as-a-web-api\/\">https:\/\/selfimagination.in\/tips\/deploying-apps-script-as-a-web-api\/<\/a><\/p>\n\n\n\n<p>\u0906\u0936\u093e \u0939\u0948\u0902 \u092e\u0941\u091d\u0947 \u0906\u092a\u0915\u094b Secure Login System \u092c\u0939\u0941\u0924 \u0939\u0940 \u0905\u091a\u094d\u091b\u0947 \u0938\u0947 \u0938\u092e\u091d \u092e\u0947 \u0906 \u0917\u092f\u093e \u0939\u0948\u0902, \u0907\u0938 Secure Login Article \u0938\u0947 related \u0915\u094b\u0908 \u092d\u0940 Query \u0939\u094b \u0924\u094b \u0906\u092a \u092e\u0941\u091d\u0947 \u0928\u093f\u0903\u0938\u0902\u0915\u094b\u091a comment \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \u092f\u0939 Article \u0915\u0948\u0938\u093e \u0932\u0917\u093e Comment \u0915\u0930\u0928\u093e \u0928 \u092d\u0942\u0932\u0947 \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 \u0964 <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\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>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&#8217;s security and user experience today! \u0907\u0938 Article \u092e\u0947 \u0939\u092e\u0928\u0947 Secure Login System [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11569,"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-11407","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\/09\/Secure-login-logout.jpg?fit=1280%2C720&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/11407","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=11407"}],"version-history":[{"count":98,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/11407\/revisions"}],"predecessor-version":[{"id":11915,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/11407\/revisions\/11915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/11569"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=11407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=11407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=11407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}