cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
2JK
Regular Visitor

Feedback portal with OTP authentication

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?

7 REPLIES 7
OOlashyn
Super User
Super User

Hi @2JK ,

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.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

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 

 

 

 

2JK
Regular Visitor

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?

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?

@2JK 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-lang.... Regarding the trigger - you can create HTTP trigger function and call it as a regular API endpoint.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.
2JK
Regular Visitor

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.

@2JK 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.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

Helpful resources

Announcements
May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Carousel News & Announcements 768460.png

What's New in the Community?

Check out the latest News & Events in the community!

MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Top Solution Authors
Users online (1,190)