Ionic

Twilio API Integration in Ionic App

In this article we will integrate twilio phone number verification API in ionic app.
Create a new ionic project and make a home page with one textbox for mobile number and Next button.

Set up Twilio Account- To integrate twilio API, first we need to set account.

1. Login from your twilio account https://www.twilio.com/login

2. After login, create an application in the console https://www.twilio.com/console/verify/applications and get the API key.

twilio, ionic

twilio

3. After creating new application you can get your API key from you application’s general settings. Production API key is used for twilio APIs.

twilio, ionic

4. Now go to your project and write code for the API.

twilio, ionic

Now enter your mobile number and click on Next button. On Next button’s click event we will send a verification code text message to the entered mobile number through twilio API to verify mobile number. You can look following code for twilio API to send verification code:-

sendVerificationCode(phoneNumber, countryCode): any {

        return new Promise((resolve, reject) => {
            let body = new FormData();
            body.append('api_key', twilioApiKey);
            body.append('country_code', countryCode);
            body.append('phone_number', phoneNumber);
            body.append('via', 'sms');

            this.http.post(twilioApiUrl + 'phones/verification/start', body)
                .map(res => res.json())
                .subscribe(data => {
                    resolve(data);
                }, function (error) {
                    reject(error);
                });
        });
    }

• twilioApiKey is your twilio application Production API key which we got previous.
• twilioApiUrl is twilio api auth url which is https://api.authy.com/protected/json/

So sendVerificationCode function will send an OTP( verification code) on your entered mobile number.
Now on next screen we will verify this code like below screen,

twilio, ionic

On above screen enter your OTP verification code which you received and then on Verify button you will need to call twilio verification check API as below.


otpVerify(phoneNumber, code, countryCode): any {

        return new Promise((resolve, reject) => {
            this.http.get(twilioApiUrl + 'phones/verification/check?api_key=' + twilioApiKey
                + '&country_code=' + countryCode + '&phone_number=' + phoneNumber + '&verification_code=' + code)
                .map(res => res.json())
                .subscribe(data => {
                    resolve(data);
                }, function (error) {
                    reject(error);
                });
        });
    }

The otpVerify function verifies your OTP and return the result. When verification will complete successfully, display your message accordingly.

twilio, ionic

So in this article we learned how to integrate Twilio SMS APIs and verify a phone number via OTP code

Twilio API Integration in Ionic App

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top