Right Click Is Disabled...

Web Development

OTP Generator

OTP (One Time Password) Send it from any SMS Service, and how it is used.

What is OTP?

A one-time password (OTP) is an automatically generated numeric or alphanumeric string of characters that authenticates a user for a single transaction or login session.

 Why to use OTP?

An OTP is more secure than a static password, especially a user-created password, which can be weak or reused across multiple accounts.

OTPs may replace authentication login information or may be used in addition to it to add another layer of security.

[HttpPost]
public JsonResult SendOTP(string number)
{
    var status = "fail";
    if (number != "")
    {
        status = "Invalid";
        if (number.Length == 10)
        {
            string otpValue = new Random().Next(100000, 999999).ToString();
            try
            {
                ///   Sms Sending Code.
                var messageAPI = new MessageAPI();
                string smsBody = "Your OTP Number is " + otpValue 
                + " ( Sent By : XT)";
                
                //SMS Service Logic//
                string smsResult = messageAPI.SendSmsViaNewAPI(smsBody, 
                number);
                status = smsResult;
                Otp createOtp = new Otp()
                {
                    PhoneNo = number,
                    OtpValue = otpValue,
                    CreatedDate = DateTime.Now,
                    ExpiryDate = DateTime.Now.AddMinutes(10),
                    IsVerify = 0
                };
                otpManager.InsertOtp(createOtp);
                return Json(status, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                throw (e);
            }
        }
    }
    return Json(status, JsonRequestBehavior.AllowGet);
}

Why I wrote this article?

To describe how the one-time password works in a simple way and How you can use it in your application.

For sending the OTP, We can create a post method, which will have the Phone Number as input and the OTP will be sending to that 10-digit mobile number in form of a text SMS.

This Above Code will send the OTP to  Mobile Number.

Now How to Verify the OTP? Which the user will enter what has been received in the SMS.

For that We need a Verify or Validating OTP Method ,Which will check the Enter OTP is correct or not.

[HttpPost]
public JsonResult VerifyOTP(string otp)
{
    bool result = false;

    //Code to Verify the OTP
    var resultData = otpManager.VerifyOtp(otp);
    if (resultData != null && resultData.Tables[0] != null && resultData.Tables[0].Rows.Count > 0)
    {
        result = true;

        // Code to Update that the OTP which is entered is used.
        otpManager.UpdateVerifyOtp(otp);
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}

The above code will verify the OTP.

OTP Generator Read More »

Document Preview

(For Previewing the PNG, JPEG,PDF, and DOCX) File Directly on the page, without Downloading it.

 In this project, document can be previewed in the current tab, new tab as well as new window on a click of a link.

You can use the same link for all preview method or you can change the link.

Just you need to make the perfect URL with the website name then folder name then file name that’s all, and it is done your preview for the document will work fine.

For example :

string websitePath = "https://xtremethoughts.com/";
string LocationPath = "Documents/";
string fileName = "VivekDocumentPreview.pdf";

It will make the perfect URL, which can be used to view the File.

For the example of Image File. While clicking on JPEG preview.

For the example of PDF File. While clicking on PDF preview.

For the example of Word File. While clicking on Word preview.

For the example of PNG File. While clicking on PNG preview.

For the example of Word File. While clicking on Word preview in new window.

For the example of PDF File. While clicking on PDF preview in new window.

Source code

Source code for this sample is available on GitHub at github.com/vjvivekjaiswal1998/DocumentPreview

Document Preview Read More »

Create Mobile Responsive Web map Application Using Leaflet.js

Leaflet.Js is an open-source, lightweight, mobile-friendly javascript library created by Vladimir Agafonkin. In which you can implement map content on different map tiles like google-maps, OpenStreetMap, Mapbox, Maptiler, and your custom tile layer also using lots of plugins available in leafletjs.Com and also develop our own plugin by publishing on their Github repository. We can implement it in vanilla javascript, and its framework like react, angular, and Vue.

Features of Leaflet.js :

  1. It supports the WMS layer, Geojson layer, vector layer, tile layers, and also supports other types of layers using their supported plugin.
  2. It supports creating markers on the map with its events. Also, create a custom marker as our choice using images or create an SVG marker.
  3. Use different map tiles(like OpenStreetMap, Google Map, Mapbox, bing), and easy to change its tiles.
  4. It supports clustering, declustering Mechanism. Also, add a heatmap on the map.
  5. Add vector layers on the map like point, circle, polygon, polyline, SVG, canvas, circle marker, path and etc.
  6. It supports creating custom control on maps, adding image overlays, video overlays on maps, animate marker showing tooltip.
  7. Customizing all the map elements using javascript.

How To Use Leaflet.js:

For use Leaflet.js . It has to include Leaflet.js (CSS and Js) which is available on https://leafletjs.com/examples/quick-start so include a library.

Mapping Text

Mapping Image

In setView, It contains two parameter LatLng(first is latitude, second is longitude). So Above Value shows the LatLng of New Delhi.Zoom level.

TileLayer contains the URL of the map-tile in which the Map is shown. and the parameter json block use for Setting its property.

For Google Maps:-

L.tileLayer(‘http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}’,{maxzoom: 18,subdomains: [‘mt0’, ‘mt1’, ‘mt2’, ‘mt3’],}).addTo(map);
L.tileLayer(‘http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}’,{maxzoom: 18,subdomains: [‘mt0’, ‘mt1’, ‘mt2’, ‘mt3’],}).addTo(map);

Adding markers and vector layer on the map.

L.marker([28.644800,77.216721],{tooltip:’mymarker’}).bindPopup(‘mymap’).addTo(map);
L.circle([28.644800,77.22],{radius:20,color:’red’}).addTo(map);
L.polyline([[28.634800,77.22],[28.644800,77.20],[28.65,77.20]],{color:’green’}).addTo(map);
L.polygon([[28.674800,77.22],[28.624800,77.20],[28.65,77.30]],{color:’yellow’}).addTo(map);

Here is a basic overview of how to use a leaflet and its elements.it is pretty easy .just put elements and then add them to view.

Advantages:

1. Lightweight. only weighting 39KB.
2. Fast performance.
3. Easy to implement.
4. Open source and freely available
5. Easy to change map (as only the URL of tile layer should be changed).
6. Powerful API, and plugins
7. Easy customization.
8. Support on multiple js frameworks.

Disadvantages

1. The developer should be familiar with javascript.
2. In some base layers, it should cost(like Mapbox).
3. It needs to use GIS programming for setting up information.
4. customization takes more effort on elements sometimes.

Create Mobile Responsive Web map Application Using Leaflet.js Read More »