WhatsApp login in Django Application using OPT-less
Published: 2023-05-11 13:17:28

In digital security, user authentication plays a vital role in safeguarding sensitive information and preventing unauthorized access. Traditionally, one-time passwords (OTPs) have been a reliable method to verify users' identities. However, as technology evolves and threats become increasingly sophisticated, the limitations of OTP-based authentication are becoming evident. Innovative solutions are emerging to replace OTPs with more secure and convenient alternatives.
In today's article, we will see how to integrate OTP Less with Django. Let's start without wasting your time.

You can test it by login into our website via WhatsApp. You will have a pop-up show on the top right side.

For this, you need some requirements which we will discuss below.

### Requirements
1. You need a hosted website or you can use ngrok. Click here to [download ngrok](https://ngrok.com/download).

2. Django must be installed on your system.

#### Installation Process
We will integrate this into our old project [How to Build a mini blog project with Django: A Step-by-Step Guide](https://espere.in/How-to-Build-a-mini-blog-project-with-Django:-A-Step-by-Step-Guide/). You need to see this, we will add WhatsApp logging in to it. In this article, we will tell only that.

We will put the script of its OTP-less inside our head tag in our base.html. You will find it on the website of OTP-less.

`
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="{% static 'blog/css/bootstrap.css' %}">
 <link rel="stylesheet" href="{% static 'blog/css/style.css' %}">

 
<!-- otpless script -->
{% if not request.user.is_authenticated %}
    <script type="text/javascript" src="https://otpless.com/auth.js"></script>
{% endif %}
<!-- otpless script end-->


 <title>Document</title>
</head>

`

1. <link rel="stylesheet" href="{% static 'blog/css/bootstrap.css' %}">: This line includes an external CSS file called "bootstrap.css" from the "blog/css" directory. The {% static ... %} syntax suggests that this code is likely used within a web framework that handles static file serving.

2. <link rel="stylesheet" href="{% static 'blog/css/style.css' %}">: Similar to the previous line, this line includes another external CSS file called "style.css" from the same directory.

3. {% if not request.user.is_authenticated %}: This is a conditional statement that checks if the user is not authenticated. The {% ... %} syntax suggests that this code is part of a server-side templating language or framework.

4. <script type="text/javascript" src="https://otpless.com/auth.js"></script>: If the user is not authenticated, this line includes an external JavaScript file from "https://otpless.com/auth.js". It allows the website to incorporate the authentication functionality provided by the "otpless.com" service.

5. {% endif %}: This line marks the end of the conditional statement. 
 
Now we will create a JavaScript function which is given to us by OTP-less.

`
<!-- OTP less -->
 <script type="text/javascript">
    function otpless(otplessUser) {
     var waName = otplessUser.waName;
     var waNumber = otplessUser.waNumber;
     $.ajax({
          type: "GET",
          url: '/whatsapp-login/',
          data: {
              "waName": waName,
              "waNumber":waNumber,
          },
          dataType: "json",
          success: function (data) {
              // any process in data
              
              window.location.assign('{% url "dashboard" %}');
          },
          failure: function () {
              alert("failure");
          }
      });
      window.location.href="{% url 'dashboard' %}";
    }
  </script>
  <!-- OTP less -->
`

1. The code defines a JavaScript function named otpless that takes an object otplessUser as a parameter. Here's an explanation of the code:

2. The otpless function extracts the values of waName and waNumber from the otplessUser object.

3. It then makes an AJAX GET request using the $.ajax function. The request is sent to the URL '/whatsapp-login/' and includes the waName and waNumber as data.

4. The dataType property is set to "json", indicating that the expected response from the server is in JSON format.

5. If the AJAX request is successful, the code inside the success callback function is executed. The specific process in  data returned by the server is not shown in the provided code snippet.

6. After the success callback function, the window.location.assign function is called, which redirects the user to the URL specified by '{% url "dashboard" %}'. The {% url ... %} syntax suggests that this code is part of a server-side templating language or framework that dynamically generates the URL for the "dashboard" page.

7. If the AJAX request fails, the failure callback function is executed, which displays an alert message saying "failure".

8. After the AJAX request block, the code also includes window.location.href = "{% url 'dashboard' %}";. This line will immediately redirect the user to the URL specified by '{% url "dashboard" %}' without waiting for the AJAX request to complete. It seems redundant and may be unnecessary.

Now our base.html will look like this:

`
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="{% static 'blog/css/bootstrap.css' %}">
 <link rel="stylesheet" href="{% static 'blog/css/style.css' %}">

 
<!-- otpless -->
{% if not request.user.is_authenticated %}
    <script type="text/javascript" src="https://otpless.com/auth.js"></script>
{% endif %}
<!-- otpless -->


 <title>Document</title>
</head>
<body>
 <div class="container-fluid bg-dark">
  {% include 'blog/navbar.html' %}
 </div>
 <div class="container">
  <div class="row">
   <div class="col-sm-12">
    {% block msg %}
    {% endblock msg %}
   </div>
  </div>

  <div class="row">
   {% block side %}
   {% endblock side %}

   {% block content %}
   {% endblock content %}
  </div>
 </div>


<!-- OTP less -->
 <script type="text/javascript">
    function otpless(otplessUser) {
     var waName = otplessUser.waName;
     var waNumber = otplessUser.waNumber;
     $.ajax({
          type: "GET",
          url: '/whatsapp-login/',
          data: {
              "waName": waName,
              "waNumber":waNumber,
          },
          dataType: "json",
          success: function (data) {
              // any process in data
              
              window.location.assign('{% url "dashboard" %}');
          },
          failure: function () {
              alert("failure");
          }
      });
      window.location.href="{% url 'dashboard' %}";
    }
  </script>
  <!-- OTP less -->

 <script src="{% static 'blog/js/jquery.js' %}"></script>
 <script src="{% static 'blog/js/popper.js' %}"></script>
 <script src="{% static 'blog/js/bootstrap.js' %}"></script>
</body>
</html>
`
Our WhatsApp login function will be like this:

Read more here👇

[https://espere.in/WhatsApp-login-in-Django-Application-using-OPT-less/
](https://espere.in/WhatsApp-login-in-Django-Application-using-OPT-less/
)