Ready to implement user account verification in your application? Here's how it works at a high level:
- The user begins the registration process by entering their data, including a phone number, into a signup form.
- The authentication system sends a one-time password to the user's mobile phone to verify the possession of that phone number.
- The user enters the one-time password into a form before completing registration.
- The user opens a success page and receives an SMS indicating that their account has been created.
To get this done, you'll be working with the following Twilio-powered APIs:
Authy REST API
- Authy Docs: Find quick starts, documentation, and all about the helper libraries.
Twilio REST API
- Messages Resource: We will use Twilio directly to send our user a confirmation message after they have created an account.
All of this can be done in under a half an hour with the simplicity and power of Authy and Twilio.
ApplicationUser model, right? Next, we're going to visit the registration form on the client side.
When we create a new user, we ask for a name, e-mail address, password and mobile number with a country code. Using Authy, we send a one-time password to this phone number via SMS to validate it.
It is now the controller's responsibility to verify that the user has provided the necessary information to create a new user. If the user is created successfully, they will be logged into the system automatically, leaving them logged in but not yet verified.
You've now seen how to register an application user. Next, let's take a minute to configure Authy use in our application.
Before we move on, let's take a quick look at some application configuration.
You need to create a
Local.config file under the
AccountVerification.Web directory with the following content:
<?xml version="1.0" encoding="utf-8"?> <appSettings> <add key="TwilioAccountSID" value="your_twilio_account_SID" /> <add key="TwilioAuthToken" value="your_twilio_auth_token" /> <add key="TwilioNumber" value="your_twilio_number" /> <add key="AuthyKey" value="your_authy_key" /> </appSettings>
Now we need our Authy production key (sign up for Authy here). When you create an Authy application, the production key can be found on the dashboard.
This configuration is pretty straightforward, right? Next, we need to jump over to the
UserController to set up the Authy client and create an instance method to send a one-time password.
Once the user has an
authyId, we can send a verification code to that user's mobile phone.
When our user is created successfully via the form we implemented, we send an SMS with a token to the user's phone to verify their account in our controller. When the code is sent we redirect to another page where the user can enter the token they received, therefore completing the verification process.
Next, we'll learn how to verify the code the user has provided us during this step.
However, our verification form wouldn't be very usable if there wasn't a way to resend a verification code if the message didn't arrive at the end user's handset.
Since the form for re-sending the verification code is only one line, we're going to skip that for this tutorial. Let's just look at the controller function.
This controller loads the model associated with the request and then uses the same Authy API method we used earlier to resend the code.
We're getting close now! Let's provide a pleasant user onboarding experience and send a confirmation message to our new user.
Congtratulations! You've just implemented account verification so your users can confirm their phone number.
If you're a C# developer working with Twilio, you might want to check out these other tutorials:
Put a button on your web page that connects visitors to live support or salespeople via telephone.
Instantly collect structured data from your users with a survey conducted over a voice call or SMS text messages.
Thanks for checking this tutorial out! If you have any feedback to share with us, or just want to let us know what awesome thing you're building, we'd love to hear it. Reach out to us on Twitter!