{"id":58609,"date":"2023-09-26T16:06:23","date_gmt":"2023-09-26T10:36:23","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=58609"},"modified":"2023-09-28T16:32:21","modified_gmt":"2023-09-28T11:02:21","slug":"otp-verification-through-mobile-number-using-javascript","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/otp-verification-through-mobile-number-using-javascript\/","title":{"rendered":"OTP Verification through Mobile Number using Javascript"},"content":{"rendered":"

Verifying a One-Time Password (dru) typically involves comparing the OTP a user provides to the one generated by a trusted system or service. OTPs are commonly used for authentication and security purposes. Here’s a general outline of how to verify an OTP.<\/p>\n

\"login-form\"<\/h3>\n

User Input<\/b><\/h3>\n

The user provides an OTP through an application.<\/span><\/p>\n

Generate an OTP<\/b><\/h3>\n

On the server side, an OTP is generated by a third-party api by clicking the get OTP button.<\/span><\/p>\n

Validation<\/b><\/h3>\n

The below steps are to validate the OTP.<\/span><\/p>\n

1. Put the OTP in the OTP field with the validate OTP button.<\/span><\/p>\n

2. If <\/span>validate-otp-by-number<\/span> api returns success, then display the matched message and add a class isValidateOtp else, throw an error.<\/span><\/p>\n

$<\/span>(<\/span>'.validate-otp'<\/span>).<\/span>once<\/span>().<\/span>click<\/span>(<\/span>function<\/span> (<\/span>e<\/span>) {<\/span>\r\n\u00a0\u00a0var<\/span> mobile_element<\/span> = <\/span>$<\/span>(<\/span>'.mobile-number<\/span>);<\/span>\r\n\u00a0\u00a0var<\/span> mobileNumber<\/span> = <\/span>mobile_element<\/span>.<\/span>val<\/span>();<\/span>\r\n\u00a0\u00a0var<\/span> otp<\/span> = <\/span>$<\/span>(<\/span>'.otp'<\/span>).<\/span>val<\/span>();<\/span>\r\n\u00a0\u00a0var<\/span> data<\/span> = [<\/span>otp<\/span>, <\/span>mobileNumber<\/span>];<\/span>\r\n\u00a0\u00a0if<\/span> (<\/span>\/<\/span>^<\/span>\\d<\/span>{5,}<\/span>$<\/span>\/<\/span>.<\/span>test<\/span>(<\/span>mobile_element<\/span>.<\/span>val<\/span>())) {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0$<\/span>(<\/span>'.error-otp<\/span>).<\/span>empty<\/span>();<\/span>\r\n\u00a0\u00a0\u00a0\u00a0$<\/span>.<\/span>ajax<\/span>({<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type:<\/span> 'POST'<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url:<\/span> '\/validate-otp-by-number\/'<\/span> + <\/span>data<\/span>, <\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dataType:<\/span> \"json\"<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cache:<\/span> false<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success<\/span>:<\/span> function<\/span> (<\/span>result<\/span>) {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if<\/span>(<\/span>result<\/span>.<\/span>status<\/span> == <\/span>'success'<\/span>) {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$<\/span>(<\/span>'.otp'<\/span>).<\/span>addClass<\/span>(<\/span>'isValidateOtp'<\/span>);<\/span>\r\n\u00a0 \u00a0 <\/span>$<\/span>(<\/span>'.otp'<\/span>).<\/span>append<\/span>(<\/span>'<span class=\"green\">'<\/span>+<\/span>result<\/span>.<\/span>message<\/span>+<\/span>'<\/span>'<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>else<\/span>{<\/span>\r\n$<\/span>(<\/span>'.otp'<\/span>).<\/span>append<\/span>(<\/span>'<span class=\"error\">'<\/span>+<\/span>result<\/span>.<\/span>message<\/span>+<\/span>'<\/span>'<\/span>);<\/span>\r\n \u00a0\u00a0\u00a0});<\/span>\r\n \u00a0}<\/span>\r\n});\r\n<\/span><\/pre>\n
\"otp<\/span><\/p>\n
 <\/p>\n
\u00a0<\/span><\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
3.<\/strong> If the user changes the number, then remove the isValidateOtp class\u00a0<\/span><\/p>\n
\u00a0\u00a0\u00a0\u00a0jQuery('.mobile-number').change(function(){\r\n<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.otp').removeClass('isValidateOtp');\r\n<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})<\/span>\r\n<\/span><\/pre>\n
\"validate-otp-erro\"<\/h3>\n
Conclusion<\/b><\/h3>\n
The above article is used for the OTP validation and to prevent access to the other accounts.<\/span><\/p>\n
Thanks for reading this article, Hope, you will find this helpful. Please comment below if you have any questions regarding the same.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
Verifying a One-Time Password (dru) typically involves comparing the OTP a user provides to the one generated by a trusted system or service. OTPs are commonly used for authentication and security purposes. Here’s a general outline of how to verify an OTP. User Input The user provides an OTP through an application. Generate an OTP […]<\/p>\n","protected":false},"author":1546,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":865},"categories":[3602,3429],"tags":[4862,4860,4857,2591],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58609"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1546"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=58609"}],"version-history":[{"count":4,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58609\/revisions"}],"predecessor-version":[{"id":58839,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58609\/revisions\/58839"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=58609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=58609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=58609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}