How to e-mail password when forgot password Using Apps Script | Forgot Password Tutorial

| December 27, 2023 | Google Apps Script | No Comments

In this step-by-step Forgot Password tutorial, discover how to effortlessly recover your forgotten registration password using Google Apps Script and Google Sheets integration. If you’ve ever struggled with a lost password during app registration, worry not! We guide you through implementing a seamless “Forgot Password” solution with email notification. With just a click, your password is retrieved from the linked Google Sheet and promptly sent to your registered email address, ensuring a stress-free user experience.

पिछले Article मे हमने User Registration मे E-mail OTP का उपयोग किया था , उसी को आगे Implement करते हुवे अब हम Forgot Password बना रहे हैं ।

1. Google Sheet For Forgot Password

हमने जो इसके पहले User Register के लिए Page बनाया था उसमे जो Google Sheet बनाई हैं उसी मे से Password को हम Mail पर Send करेंगे ।

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

2. HTML Code for Forgot Password

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

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

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

</head>

<body>


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

    <h5 class="card-header bg-secondary- text-white p-3 mycolor">Apps Script Secure Login</h5>
    
    <div class="card-body p-4">

      <center>
        <i class="bi bi-person-circle fs-1 color"></i>
      </center>
      <br>

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

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

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




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

      <span href="#"  onclick="OpenRegisterPage()">Register (New User)</span><br>
      <span href="#"  onclick="ForgotPassword()" class="badge bg-secondary">Forgot Password</span>
    </div>

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

</html>

3. CSS for Forgot Password

यह 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, .mywidth {
      width: 100px;
      display: inline-block;
    }

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

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

    .img {
      width: 60px;
      margin: auto;
      display: inline-block;
    }

     
    #uid {
        color: transparent;
        text-shadow: 0 0 8px #000;
      }
  </style>

4. JavaScript Code for Forgot Password

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

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

  }


  function OpenRegisterPage() {  }

  function ForgotPassword() {
        var uid = document.getElementById("uid").value.trim();

        if (uid == "" )
        {
            ShowReturnMsg("danger, Please Enter User ID");
            return;
        }

        google.script.run.withSuccessHandler(ShowReturnMsg).forgotPass(uid);
  }

  function ShowReturnMsg(data)
  {
      let v = data.split(",");
      let type=v[0];
      $('#RetMsg').removeClass("alert-success").removeClass("alert-danger").addClass("alert-"+type);
      $('#RetMsg').html(v[1]);
      $('#RetMsg').show();
  }

  </script>

5. Apps Script Code for Forgot Password

यह Apps Script का कोड हैं । 

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


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

function forgotPass(pUID)
 {

    let RetrunMsg = 'warning,User Not Registered';

    let ReturnData = LoginSheet.getRange("A:A").createTextFinder(pUID).matchEntireCell(true).findAll();
    let StartRow = 0;
    ReturnData.forEach(function (range) {
      StartRow = range.getRow();
    });


    if (StartRow > 0) 
    {
        let userName = LoginSheet.getRange(StartRow, 3).getValue();
        let userPass = LoginSheet.getRange(StartRow, 2).getValue();

        let MsgBody  =   "<h4>Hello, <b>"+userName+"</b><p>Your Password is </p></h4><h1>"+userPass+"</h1>";
      
        MailApp.sendEmail({to: pUID, name:"Imagination", subject: "Your Password", htmlBody: MsgBody});
        RetrunMsg = 'success, Password has been sent to your Mail';
    }

    return RetrunMsg;
}
  • doGet() : इस Function से हमने login Page को Display करवाया हैं ।
  • forgotPass() : इस Function से हमने जो आपके द्वारा दी गई Mail ID हैं उस पर Google Sheet मे Store Password को आपके द्वारा दिए गए Mail ID पर भिजवाया हैं । इसमे पहले आपके द्वारा दी गई ID को सर्च करता हैं ओर फिर यदि Record मिलता है तो Password को Mail कर देता हैं ।

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

7. Execution (Forgot Password)

Deploy करने के बाद जब आप Link को Click करेंट गो आपको कुछ इस तरह से Login Screen दिखाई देगी ।

इसमे Email ID Enter करने के बाद आप Forgot Password Button पर Click करेंगे। यदि आपके द्वारा दी गई ID सही होगी तो उस पर Mail चला जाएगा ओर आपको इस तरह का message दिखाई देने लगेगा

Mail कुछ इस तरह से आपको आएगा।

Forgot Password mail using Apps Script

Mail से Password देखने के बाद आप Login कर सकते हैं ।

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

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

Apps Script Email Quota Daily Limit

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

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

Related Posts

Add a Comment

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