How to integrate the new Login with OTP widget
MSG91 has introduced a new widget for OTP Login that clients can integrate on their end and all the Send, Resend, and Verify OTP APIs can be called by MSG91 in one place.
To integrate it, follow the below steps -
1. Log in to your MSG91 panel and select the OTP section.
2. This is the only widget where you can view the channels you've used within it and enable or disable their status. Simply click on the new widget to create your own.
3. Give your widget a name. Choose the contact point (SMS, Email, or both). Then, pick the primary channel (SMS, Whatsapp, or Voice) for sending the OTP. Lastly, select the length of the OTP.
To resend OTP, you have the options of SMS, WhatsApp, and Voice channels.
You can set the resend time in seconds and the OTP expiration time in minutes.
NOTE: To use the Whatsapp OTP you need to subscribe to the Whatsapp services
To create a new SMS flow, refer to this guide.
To create a new email template, refer to this guide.
To create a new Whatsapp template, refer to this guide
4. We have introduced a new security feature "The Invisible OTP", which enhances security during phone number verification by sending an OTP without displaying it visibly to the user. If the Invisible OTP fails, it automatically reverts to using the Mobile primary channel as a backup for verification. This approach simplifies and secures the verification process without exposing the OTP directly to the user interface.
NOTE:
We've added a feature to our OTP widget that allows users to enable and disable Google re-Captcha validation. This option will be available in the OTP widget's settings, and it's designed to give you more control.
By default, re-Captcha validation is turned on, which is great for protecting your widget against bot attacks. Bots can cause problems by flooding your system with fake or automated requests, so re-Captcha is like a security guard, making sure real people are using your widget.
However, there's a unique situation to consider. If you're using our OTP widget in a desktop application, like an Electron app, re-Captcha might not work properly because it's meant for websites, not desktop apps.
So, we're adding this option for you. By disabling the re-Captcha validation, you can use the OTP widget in your desktop app without any hiccups.
5. Now, click on "Next." You will then add the template for the selected channel. Choose the template from the dropdown menu, map the variables, and you'll see a preview of the SMS or email that will be sent to the user.
For voice, you have two options: global caller ID and local caller ID. You can also select the template, which includes a preview for voice.
6. After configuring the channel, click "Next." You'll find the integration code for both client-side and server-side integration.
In the script's success and failure parameters, input the location for displaying the user's verified token.
Enter the Auth Token into the script and use it wherever you want to integrate the service. To obtain it, click on "Select token" in the dropdown menu.
If no token is generated, you can create a new one from the "Token" section on the top left sidebar, by clicking on Generate New Token.
7. This token needs to be sent to MSG91 through the API provided in the Server-Side Integration section, displayed in the image below. To obtain the authkey for your account, click the "Get Authkey" link under Server-Side Integration.
Note:
In order to know more about Token, please refer: https://msg91.com/help/MSG91/what-is-token-and-how-to-use-it
How to configure Custom UI in OTP widget?
SendOTP, VerifyOTP, and RetryOTP methods used for authentication are as below which enable a seamless integration of the OTP Widget integration within your custom user interface.
1. ExposeMethods: Set exposeMethods to true within config object in order to expose methods sendOtp, retryOtp, verifyOtp on window object. Setting this flag to true will also not show the verification popup on the UI.
<body>
<script type="text/javascript">
var configuration = {
...,
exposeMethods: true,
...,
};
</script>
<script type="text/javascript" onload="initSendOTP(configuration)" src="https://control.msg91.com/app/assets/otp-provider/otp-provider.js; </script>
</body>
2. SendOTP: This method takes an identifier (mandatory argument) & two optional callbacks for handling the success and failure scenarios. This method sends the OTP to the passed identifier. The identifier could be either an email or mobile number (it must contain the country code without +). If the API is successful then the passed success callback will be called to inform about the success. Same for the failure scenario.
window.sendOtp('[email protected]', (data) => console. log('OTP sent successfully.'), (error) => console.log('Error occurred'))
window.sendOtp('919999999999', (data) => console.log('OTP sent successfully.'), (error) => console.log('Error occurred'))
3. RetryOTP : This method is used to retry the OTP if the OTP is not received due to any reason. This method takes channel value as a mandatory argument and two optional callbacks for handling the success and failure scenarios.
If the widget is configured with the default configuration then channel needs to be passed as null. The channel could have the following values in case when it is configured with custom configuration:
{
Sms = '11',
Voice = '4',
Email = '3',
Whatsapp = '12',
}
The channel decides which channel to use in order to resent the OTP. The mentioned channel will be used to resend. For eg:
// Default configuration
window.retryOtp(null, (data) => console.log('resend data: ', data), (error) => console.log(error));
// Custom configuration
window.retryOtp('11', (data) => console.log('resend data: ', data), (error) => console.log(error));
4. VerifyOTP : This method is used to verify the OTP entered by the user. This method takes otp value as a mandatory argument and two optional callbacks for handling the success and failure scenarios.
window.verifyOtp(2345645, (data) => console.log('OTP verified: ', data), (error) => console.log(error));
Note: If you are listening to verifyOtp method's success and failure callbacks then you can skip the main success and failure callbacks provided within the config object. Otherwise, you will get 2 events of success and failure.
var configuration = {
exposeMethods: true,
success: (data) => {
// You can ignore listening to this if the verifyOtp method's success is listened
console.log('success response', data);
},
failure: (error) => {
// You can ignore listening to this if verifyOtp method's failure is listened
console.log('failure reason', error);
},
};
5. GetWidgetData : Another method exposed on the window object is getWidgetData, which returns the current configured widget data as obtained from the API.
var widgetData = window.getWidgetData();
console.log('Widget Data:', widgetData);
For any further help reach us at [email protected].