User Registration with OTP in Google Apps Script Tutorial | Send Email Using Apps Script

User Registration with OTP, User Registration with Email OTP, How to Send Mail Using Apps Script

यदि आप चाहते हैं की भी आप जब भी कोई नया User Registered हो तब user के Mail पर के OTP जाए और सही OTP Enter करने के बाद ही User Registered हो सके, इसका एक फायदा यह भी हैं की user अपनी सही mail id ही enter करेगा क्युकी गलत Mail id देने पर OTP उसे नहीं मिलेगा और वह Registration नहीं कर पाएगा।

आइए Step by Step Code को समझते हैं ।

1. Google Sheet For User Registration with OTP

सबसे पहले एक Google Sheet बना लीजिए, हम जो User Registration Page बनाएंगे तब वहाँ से Entry करेंगे तो वह आकार Google Sheet पर Store हो जाएगी। इसलिए इस मे आपको केवल Columns ही बनाना हैं , Entry हम जब Page पर करेंगे तब यहा दिखाई देगी।

इस sheet का नाम login रखना हैं जो की हमे Apps Script से link करते समय काम आएगा ।

2. HTML Code for User Registration with OTP

इसके बाद हम Apps Script मे एक register.html File बना लेंगे। इसमे फाइल मे आप नीचे CSS और JavaScript का Code लिखा हैं उसे भी Add कर लीजिएगा ।

<style></style> <!--  Add CSS -->
<script></script> <!--  Add JS -->
<div class="card shadow rounded-4 rounded ">
  <h5 class="card-header bg-secondary- text-white p-3 mycolor">User Registration with Email OTP</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>

       <div class="input-group mb-3">
         <div class="input-group-prepend">
          <button class="btn btn-outline-success mywidth" type="button" onclick="SendOTP()">Send OTP</button>
          </div>
        <input type="password" class="form-control" id="reg_otp" placeholder="OTP" onchange="ClearText()" required maxlength="4" >

      <div class="input-group-append">
          <button type="button" class="btn btn-primary- mycolor float-end px-4 text-white" onclick="Register()">Register</button>
        </div>

      </div>


  </div>
</div>

आपने जो भी Login Page बनाया हो उस पर आप यह Code add कर दीजिएगा ताकि Login से Register Page open किया जा सके ।

<span href="#"  onclick="OpenRegisterPage()">Register (New User)</a>
<script>
function OpenRegisterPage() {
        google.script.run.withSuccessHandler(ShowRegister).OpenPage("register");
  }
</script>

3. CSS for User Registration with OTP

यह Css का Code भी आपको HTML फाइल मे ही लिखना हैं यदि आप अलग से फाइल बनाना चाहते हैं तो बना कर Add कर लीजिएगा।

<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;
    }

  
  </style>

4. JavaScript Code for User Registration with OTP

यह JavaScript का Code भी आपको HTML File मे ही add करना हैं । इसमे जो function बनाये हैं उसके बारे मे नीचे Detail मे लिखा हैं ।

<script>
 function SendOTP() {
      var unm  = document.getElementById("reg_uname").value.trim();
      var uid  = document.getElementById("reg_uid").value.trim();

      if (unm == "" ) {
        RegReturnMsg("danger,Please Enter User Name...");
        return;
      }
      if (uid == "") {
        RegReturnMsg("danger,Please Enter Correct Email ID...");
        return;
      }

      google.script.run.withSuccessHandler(RegReturnMsg).sendPassword(uid,unm);
  }

  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();
    var otp  = document.getElementById("reg_otp").value.trim();

    if (pass != repass) {
      RegReturnMsg("danger,Password Not Matched...");
    }
    else {      
      google.script.run.withSuccessHandler(RegReturnMsg).CheckOTP(uid,pass,unm, otp);

    }
  }
  
  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>

• SendOTP() : इस Function से E-mail पर OTP send किया जाएगा।
• Register() : इस Function का उपयोग कर हम Screen से सभी जरूरी Columns की Value को लेकर उसे Apps Script पर भेज देते हैं । साथ ही मे Screen Level के Validation भी हमने इसमे लगाए हैं । जो भी Apps Script से Return आता हैं उससे एक नया Function Call कर देते हैं जो की निम्न हैं । इसमे हमारे द्वारा दिया गया OTP ओर जो हमे Mail पर OTP प्राप्त हुवा हैं जब दोनों ही मैच होंगे तब है User Registration हो पाएगा।
• RegReturnMsg(data) : इस Function से जीतने भी Validation लगाए हैं उन्हे दिखाया गया हैं।

5. Apps Script Code for User Registration with OTP

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

function doGet(e) {
  var output = HtmlService.createTemplateFromFile('login');   
  return output.evaluate();
}

function OpenPage(PageName) {
    return HtmlService.createHtmlOutputFromFile(PageName).getContent();
}

function setSession(session) {
  var sId   = Session.getTemporaryActiveUserKey();
  var uProp = PropertiesService.getUserProperties();
  uProp.setProperty(sId, JSON.stringify(session));
}

function getSession() {
  var sId   = Session.getTemporaryActiveUserKey();
  var uProp = PropertiesService.getUserProperties();
  var sData = uProp.getProperty(sId);
  return sData ? JSON.parse(sData) : { loggedIn: false };
}

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;
}

function sendPassword(id,nm)
{
   let OTP = "" + Math.ceil((Math.random() + 1) * 1000);
   OTP = OTP.substring(0,4);

   let MsgBody =   "<h4>Hello, <b>"+nm+"</b><p>Your OTP for Login</p></h4><h1>"+OTP+"</h1>";
   
   //MailApp.sendEmail(id, "OTP For Login", MsgBody);
    MailApp.sendEmail({to: id, subject: "OTP For Login", htmlBody: MsgBody});
    

    var sess = getSession();
    sess.OTP = OTP;
    setSession(sess);

    return 'success, OTP has been sent to your Mail';
}

function CheckOTP(pUID, pPassword, pName, pOTP)
{

    var sess = getSession();
     if (sess.OTP == pOTP) 
     {
          return UserRegister(pUID, pPassword, pName) ;
     }
     else
     {
          return 'danger, OTP Not Matched';

     }
}

6. Video के माध्यम से समझने के लिए

7. Execution (User Registration)

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

सभी Field Enter करने के बाद आप Send OTP Button पर Click करेंगे ऐसा करने पर आपके Mail पर एक OTP प्राप्त होगा और साथ ही मे आपको निम्न प्रकार से Message दिखाई देगा।

Mail मे OTP कुछ इस प्रकार से दिखाई देगा।

इस OTP को आपको Screen पर Type करना हैं सही सही हुवा तो आगे के Success के Message आएंगे

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

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

8. Google Apps Script Email Quotas (Daily Mail Sending Limit)

Google Apps Script पूरी तरह से Free नहीं हैं , एक लिमिट तक आप Free मे उपयोग कर सकते हैं उसके बाद आपको निम्न Table के अनुसार Charges लगेंगे। यह टेबल 16-08-2023 को बनाई हैं इस समय के Charges यह हैं ।

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

---

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

• MySQL Function
• MySQL Stored Procedure
• PHP Get /Post Method के बारे में जाने
• PHP Math Function के बारे में जाने
• C से C ++ सीखे सरल शब्दों में
• PHP Variable के बारे में जाने
• Arduino Control Structure 
• Union in C
• Declaration of Pointer in C
• jQuery Search Filter
• MySQL Create Table | Alter Table | Drop Table
• API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
• CPANEL In Hindi