Unanswered

Feedback portal with OTP authentication

(0) Share

Report

Posted on by Community Power Pla...

I have a use-case that requires users to fill forms for feedback, complaints or suggestions. Before seeing and submitting the form, they need to verify their identify through an OTP sent by SMS to their phones.

We want to use Power Apps portals for that, as we need it to be publicly accessible, but it's really not intuitive for me and the documentation doesn't help either. How would I best achieve this? The user, upon hitting the 'website', can either see a page asking them to input their phone numbers, which then sends the OTP, verifies it, and finally navigates them to another page which is the form, OR just see the form from the beginning, input all their info (including their phone numbers), and upon submitting, an OTP is sent, verified and only then, the form submits successfully.

I want to use Twilio for sending and verifying the OTPs. How can I link the submit or any button to its API? Do I have to use a Power Automate flow here? I've seen PA supports sending messages to SMS, would that be it or is there a separate action for OTPs?

Categories:

Power Apps portals

I have the same question (0)

All responses (7)

Answers (0)

OOlashyn 3,496 Most Valuable Professional on at

Like (2)

Report

Hi @Anonymous ,

This is an interesting question. If you want your user to login into the portal before accessing and submitting data one way you could achieve this would be to use Azure AD B2C as your identity provider. They natively support 2-factor auth with SMS support. If you want your portal to be accessed by any user without auth then a possible solution might be to call Power Automate (either via HTTP or while creating record in the system) that will generate some OTP code, save it in the system and send then via Twillio (or any other SMS provider) to the user. Then user enters that code that you can validate either via Read Web API or by other methods and confirms submit. You can also use custom Azure Functions instead of Power Automate or just call Twillio API directly from the portal but in the last scenario, you would need to come up with some secure way of generating and validation process which might be tricky to do on the front end.

Was this reply helpful? Yes No
Niktia Polyakov Mic... Microsoft Employee on at

Like (2)

Report

You for sure would need to get a Twillio API thing to come back and set the Verfied flag somewhere on the back end - as that would not happen on the Portal front-end.

Portal = Dataverse = Automate Cloud flow = Twillio API
Not guranteed speed

Portal = Custom API Front-end = Twillio API
Faster

Twillio API = Power Automate (does phone number matching in Dataverse = Set Dataverse table record to Verified

This would be all Async to the user as portal does not currently have Sync intergration pattern

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Thank you for the reply. What I want is for users to access the feedback form without having to login. The only authentication they have to do is verifying their phone numbers through an OTP before or when submitting the form.

I created a custom Twilio API using Node.js with two routes: one that generates an OTP and sends it to the user, and another that verifies it. I then used Javascript in the Portal script code of a page to fetch the API; user clicks a button, enters their phone number and an OTP is sent; a text input appears, asking for the OTP which triggers the verify API call; if it's verified, a message appears and the user is redirected to another page; otherwise, they're asked to verify again.

Now, I'm assuming this isn't very safe as I basically expose the API calls on the client side/front-end, but it did seem the easiest. Any documentation on how I could use an Azure Function? What would be the trigger?

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

Thank you for the reply.

If I use Power Automate, I'd have to first create a HTTP request trigger, which then feeds into a random number generator (if that's possible), and finally to the Twilio send SMS action. I store the OTP of that unique user in a table. Using Javascript, I'd have to connect to the entity which is storing all the OTPs (using Liquid templating and FetchXML, I'm assuming?), and compare the OTP code the user inputs somewhere against the OTP stored in backend/db. If it's verified, I somehow either change the status or just delete the record. Am I thinking correctly here?

Was this reply helpful? Yes No
OOlashyn 3,496 Most Valuable Professional on at

Like (1)

Report

@Anonymous it is not unsafe if you are not exposing any secrets and passwords for your API. You can also further protect your API by using for example Azure API Management to hide actual endpoints, allow calls only from your website etc. I am not sure that there some official guide on how to get started with Azure Functions and Dataverse or Dynamics but there are plenty of blog posts. Also in your case, you might not need to connect with Dataverse at all. As a good starting point for Azure Function and Node.js see here - https://docs.microsoft.com/en-us/azure/azure-functions/functions-get-started?pivots=programming-language-javascript. Regarding the trigger - you can create HTTP trigger function and call it as a regular API endpoint.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

I tried Azure Functions and it worked very well. I just hosted my code in a Function App and used the request url it generated with the HTTP trigger.

One thing though; what I currently do is generate an OTP through a POST request, and then verify the OTP (all through Twilio). If the OTP is verified, it redirects the user to another page (form page). But users can just bypass the OTP page and go to the form page directly. Is there a way to prevent that? I thought of the page level permissions but they depend on authentication like Azure AD or the support third parties, not something custom like the OTP. How would I be able to restrict the user who hasn't verified their OTP, to go directly to the form page, and only be able to go there when they verify?

I know I can do all of this in one page, but they want two separate pages for some reason.

Thanks.

Was this reply helpful? Yes No
OOlashyn 3,496 Most Valuable Professional on at

Like (0)

Report

@Anonymous interesting question. Well, this might be overkill, but the first thing that came to my mind is when you send an OTP to the user save it to the Dataverse and then when the user is redirected to the new page include that OTP in the request URL and use liquid to validate that this OTP indeed exists and didn't expire and show page content otherwise show an error. It sounds like a double verification (and it is ) but I don't see anything else straight away for two-page approach. If I will get another idea will reply again.

Was this reply helpful? Yes No