In this Blog Post, I will walk through the steps you can follow to generate random numbers and send that as a One Time Password (OTP) for authenticating a user in Power Apps. This is helpful for folks who are using canvas apps in a common device and want to restrict user to from accessing sensitive data (e.g., a KIOSK station to check in visitors etc.)
Problem Statement
How to generate random number in Canvas Apps? How to send OTP for authentication? How to add an extra layer of security?
Solution
To build a secure system, we can use the Random Number component to generate a random number and then send that as an OTP via email and the user who is trying to access can enter the OTP to verify their identity.
Let's assume a scenario where a KIOSK station has been setup to log details of visitors. THe visitors can interact with the canvas app on the KIOSK station and provide information that will be stored on the database. The visitors can also check out when they leave the premises. Therefore to restrict a visitor from accessing information of other visitors, we want to implement an OTP system.
Random Number Component
This is a component designed to generate random number every time the component is reset.
Let's take a look at the component.
Input Properties:
1) Length : Number - The length of random number as output.
2) Show OTP : Boolean - Show/Hides the OTP - By default this is false.
3) TextColor : Color - If the "Show OTP" is set to true, then the color of text.
Output Properties:
1) Result : Returns the generated random number.
Component -> OnReset
Expression: Set(RandomNumber,Value(Text(Mod(Rand()*Power(100,'OTP Generator'.Length),Power(10,'OTP Generator'.Length)-1),"[$-en-US]#0")))
Explanation: The above expression generates a number based on "Length" parameter and stores it in a variable which is then returned through the "Result" Output Property. 'OTP Generator' is the name of the component.
Implementation
To add the component to your app, you can follow the instructions here.
The component is available here.
Once the component is added to the screen, we need few controls to build the OTP feature:
1) Send OTP Button
This is a button control which sends the email. In this case, I am referring email address through a SP list column, but this can be referred as per specific use-case.
OnSelect Property:
Reset('OTP Generator_1');
Set(RandomNumberGenerated,'OTP Generator_1'.Result);
Office365Outlook.SendEmailV2(BrowseGallery1.Selected.Email,"OTP for Authentication","The OTP is "&RandomNumberGenerated);
Set(OTPSent,true);
Set(InvalidOTP,false)
Explanation:
//Reset the component to generate a new random number
//Saves the generated random number to a variable "RandomNumberGenerated"
//Sends the email with OTP
//Set the OTPSent to true. OTPSent variable is used to show/hide the Success Message, Input and validate buttons.
//Set the InvalidOTP to false. InvalidOTP show/hide the error message for invalid OTP.
2) OTP Sent Message
This is a label control to show success message when the OTP is sent.
Visible Property: OTPSent
3) TextInput for OTP
This is a text input control which will record user input for OTP.
Visible Property: OTPSent
4) Validate OTP Button
OnSelect Property: If(Value(TextInput2.Text)=RandomNumberGenerated,Navigate(Success),Set(InvalidOTP,true))
Explanation:
This is a conditional expression which checks whether the input from user is equal to generated random number. If the condition fails, then it will set the InvalidOTP to true and the error message will be displayed.
5) Invalid OTP Message
This is a label control which shows the Invalid OTP message.
Visible: InvalidOTP
DEMO
In this post we saw how to implement an OTP based functionality by generating random numbers using a re-usable component in Power Apps. This adds an additional security layer when there are multiple users interacting with an app from a single account (like a KIOSK station for checking in visitors.)
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika
Comments