Reading list Switch to dark mode

    OTP (One Time Password) for Magento 2

    Updated 18 April 2024

    OTP (One Time Password) is a string of numeric or alphanumeric characters that generates automatically. And it is the most reliable authentication process.

    With the help of this module, the admin can integrate OTP (One Time Password) verification feature on the Adobe Commerce store.

    Thus, OTP verification can use for the new customer while they are registering on the store, during sign-in, when they want to reset their password, and during the checkout process.

    Watch the below video tutorial to understand the extension workflow:

    KFWcpVitPd4

    OTP (One Time Password) Extension Features

    • Admin can configure to enable/disable the OTP module.
    • Admin can set OTP Expiry duration.
    • One Time Password verification of the customers at the time of registration.
    • Admin can enable/disable OTP verification of the customers at the time of checkout.
    • The admin can select the payment option, for which the customers will verify OTP.
    • Admin can set email templates for OTP verification notifications.
    • This module supports all Payment Methods.
    • The customer cannot reuse the expiration/use OTP.
    • The customer receives the Mobile OTP (SMS) on the registered mobile if Twilio Mobile Verification enables otherwise customer receives the OTP on the email address.
    • OTP string supports numeric digits only.
    • The One Time Password can be resent to the customer.
    • The customer can’t use the OTP for cross-customer accounts.
    • Need OTP validation on Customer Forget Password
    • OTP validation while login as a customer
    • Send OTP in an Email in case of mobile OTP failure.

    OTP Extension Installation

    Customers will get a zip folder then they have to extract the contents of this zip folder on their system.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Once you extract the file you will find an src folder, inside the src folder you have the app folder.

    You need to transfer this app folder into the Adobe Commerce root directory on the server as shown below.

    M2-installation

    After the successful installation, you have to run these commands in the Adobe Commerce Cloud root directory:

    composer require twilio/sdk
    
    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy

    After running the commands, you have to flush the cache from the Adobe Commerce admin panel by navigating through->System->Cache management as shown below.

    OTP(One Time Password) installation

    Configuration For Multi-Lingual Support

    For multilingual support, the admin will navigate through

    Store->Configuration->General ->Locale Options

    then select the locale as English (the language into which the admin wants to translate his store content).

    magento 2 otp locale configuration

    Language Translation

    For module translation, navigate to the following path in your system app/code/Webkul/Otp/i18n/en_US.csv. 
    Open the file named en_US.CSV for editing as shown in the below screenshot.

    OTP(One Time Password) LANGUAGE TRANSLATION

    Then replace the words after the comma(,) on the right in the file with your translated words.

    translation

    After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as – de_DE.CSV.

    Henceforth by uploading the translated file to the same folder from where you have obtained it. Now your module translation is complete.

    OTP Module configuration

    To do the module configuration in the admin panel, please navigate through Stores>Configuration>Webkul>One Time Password(OTP).

    Thus, the following options will appear for doing module configuration:

    Magento 2 OTP Configuration

    One time password

    • Enable Module on Frontend – Select the “YES” option to enable the module on the front end or else select “NO“.
    • OTP Validation On New Customer Registration – Select the “YES” option to enable OTP verification for the new customer at the time of registration or else select “NO“.
    • Need Otp Validation On Customer Login – Select the “Yes” option to enable Otp validation on customer login or else select “No“.
    • Need OTP Validation On Customer Forget Password – Select the “YES” option to enable OTP verification for the customer at the time of the customer forgetting a password or else select “NO“.
    • Need OTP Validation On Checkout – Select the “YES” option for enabling OTP validation during the checkout or else select “NO“.
    • Add Payment methods for OTP Validations – Admin can select for which payment method, he/she wants to enable the OTP verification.
    • OTP Expiry – Admin can set expiry time in seconds and between range [60 – 300] else automatically 60 will be taken.

    Also, if you want to provide OTP authentication before a customer logs in or signs up in your store then check the Magento 2 Firebase OTP Login extension for the Magento 2 store.

    OTP email settings

    • Select OTP Notification Template – Select the OTP notification template that will be sent to the new customer during REGISTRATION.
    • Select OTP Notification Template – Select the OTP notification template that will be sent to the customer at the time of CHECKOUT.

    twilio-config

    Twilio Auth

    “Twilio” is a communications platform for sending and receiving text messages using it’s web service APIs.

    The admin can signup for the Twilio services and register to the Twilio. To register, the admin can visit Twilio then click on the signup button. 

    twilio signup

    Here, the admin can fill the required feild as shown in the image below-

    twilio signup details

    Now, from the Twilio account, the admin can access the information which will be required in the admin dashboard. 

    twilio auth key

    So, using the Twilio, the admin can enable the Mobile OTP. To enable this, the admin has to enter the Auth Id, Token, and message. The store owner can generate these login credentials from Twilio.

    • Enable Mobile Verification – Select the “YES” option to send the Mobile OTP (SMS) or else select “NO” to send the OTP through the email.
    • Send OTP Email in Failure – When selected “Yes” OTP will be sent via email in the failure of the SMS.
    • Auth ID – The admin has to enter Auth ID from Twilio
    • Token – The admin has to enter the Token generated from the Twilio.
    • Message – In the message section the admin can enter the message format for the OTP
    • Sender number – Here admin has to enter his Twilio auth registration number.
    • Send OTP Via– Here admin can select the means of sending OTP.

    Magento 2 OTP twilio auth configuration

    Now, Admin can click Save Config to apply your changes.

    Thus, there are three scenarios to receive OTP-

    1. Through E-mail
    2. On Mobile Number (SMS)
    3. Both

    One Time Password Generation (new registration)- Through E-mail

    OTP will be sent via email only if, In the Twilio auth section in the OTP module, the admin disables the Mobile Verification.
    So, if the admin enables the module and “Need OTP Validation On New Customer Registration” is set to “YES”, the customer will receive the OTP in the email.

    magento2-otp-extension_otp_generation

    The customer’s email id receives the OTP, as shown in the image below.

    magento2-otp-extension_email_for_otp

    However, the OTP pop box appears, as shown in the image below.

    Create-Account-OTP

    After entering the correct OTP, the customer needs to click on the submit button for the completion of the process.

    So,  in case the OTP is filled incorrectly, the following image will be displayed.

    Create-Account-Incorrect-OTP

     

    One Time Password Generation (during checkout)- Through E-mail

    The customer will receive the OTP via E-mail only if in the Twilio auth section admin disables the Mobile Verification.

    Hence, the “Need OTP Validation On Checkout” is set to “YES”.

    When a customer adds the product to the cart and desired payment method selected and the “Place Order” button click the OTP pop-up box will appear on the store, as shown below.

    Otp-for-Payment-Method

    Thus, the registered mail id will get the OTP, as shown in the image below.

    magento2-otp-extension_email_for_otp

    After the entering correct OTP, the submit button should be clicked for the completion of the process.

    However, entering the invalid OTP will generate an error message.

    NOTE: The customer can use the OTP for a single time only.

    One Time Password Generation (during sign-in)- Through E-mail

    OTP will also be sent when signing in to the account.

    Sign In OTP

    It will ask the customer to enter the OTP to sign-in. The customer will receive the OTP to their registered email id or mobile number configures by the admin.

    The customer will receive the OTP in their mail and that can use to login to their account.

    Screenshot-from-2020-08-10-17-10-03

    One Time Password Generation (if forget the password)-Through E-mail

    To recover the password using the “forget password” option, the customer can reset the password by verifying the OTP.

    The customer will receive the OTP to their registered email or mobile number as per the configuration of the module. 

    Reset Password OTP extension

    After filling the details like email, captcha code, the customer can click on the “Reset My Password.”

    Now the customer will receive the OTP that will be used to verify and get the link to change the password. 

    Now the customer will receive the OTP in their email address and it can be used to validate and process further to receive the password reset link.

    After successfully validating the link the customer will receive the link to reset their password.

    One Time Password Generation(new registration)- Through Mobile

    The customer will receive the OTP in form of SMS on Mobile only if in the Twilio auth section the Mobile Verification enables by the admin.

    So, if the admin enables the module and “Need OTP Validation On New Customer Registration” is set to “YES”, the customer will receive the OTP (SMS) in the mobile.

    OTP (One Time Password)-new-registration-Through-Mobile

    Thus, the customer receives the OTP (SMS) on the mobile, as shown in the image below.

    OTP (One Time Password)_mobile-otp

    And OTP pop box appears, as shown in the image below.

    Mobile-OTP-Verification

    After entering the correct OTP, the customer needs to click on the submit button for the completion of the process.

    So, if in case the OTP is filled incorrectly, the following image will be displayed.

    Incorrect-Mobile-OTP-Verification

     

    One Time Password Generation (during checkout)- Through Mobile

     If- In the Twilio auth section in the OTP module, the admin enables the Mobile Verification option, the customer will receive the OTP in mobile-only.

    Hence, if the “Need OTP Validation On Checkout” is set to “YES”.

    So, the customer will receive the OTP (SMS) when the product is added to the cart and the customer selects the payment method. Now, click the “Place Order” button.

    Hence, the OTP pop-up box will appear in the store, as shown below.

    Generate OTP (During Checkout) through mobile

    The registered mobile will receive the OTP via SMS, as shown in the image below.

    OTP (One Time Password)_Verification

    After entering the correct OTP, the submit button should be clicked for the completion of the process. However, the customer will be redirected to the thank you page.

    OTP (One Time Password)_order_id

    Thus, entering the invalid OTP will generate the error message.

    This Module offers the store owner an additional layer of security to prevent false order placement and prevents false customer registration over the online store.

    Hence, it offers a unique OTP code for a specific duration for each validation process.

    The OTP strings are auto-generated and mailed to the customers over the registered mail address or send through the SMS on their mobile.

    NOTE: The customer can use the OTP for a single time only.

    One Time Password Generation (during sign-in)- Through Mobile

    The customer can generate the One Time Password through mobile during the sign-in process and can sign in after entering the OTP as shown in the image.

    Sign In OTP Extension

    One Time Password Generation(if forget the password)-Through Mobile

    As per the configuration, customers can now reset their password after entering the One Time Password that is sent to their mobile.

    Generate OTP (if Forget the Password)

    after entering the OTP customer can reset the password easily.

    One Time Password Generation(New-Registration)-Through both

    In this scenario, the customer will receive the OTP to their registered email as well as through SMS on their mobile number at the time of their registration.

    Create Account with OTP Extension

     

    One Time Password Generation (During Checkout)-Through both

    The customer will receive the OTP during checkout to their registered email address and through SMS on their registered mobile number.

    OTP Generation(During Checkout) through both

    One Time Password Generation (During Sign-in)-Through both

    At the time of login, customers will receive the OTP through SMS on their mobile number and their registered email address also.

    OTP Generation(During Sign-in) through both

    One Time Password Generation (if forget the password)-Through both

    In this case, the customer will receive the OTP to their registered email address as well as on their mobile number through SMS if they forget their password.

    OTP Generation (if forget the password) through both

    So, that’s all for the  One Time Password(OTP) Module for Magento 2. Still, if you have any issues, feel free to add a ticket at webkul.uvdesk.com.

    Current Product Version - 5.0.3

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .

    Leave a Comment

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


    8 comments

  • Dima
    • Ritika Singh (Moderator)
  • Tito Rex Nivera
    • Subhangi (Moderator)
  • Allan
    • gunjita joshi (Moderator)
      • Allan
        • abhishek oberoi (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content