SMS Verification: Solution to Prevent Spam

As sms verification is a simple and effective solution to prevent spam and fraud account, there is increasing popularity to use SMS verification in mobile apps, these including some giant apps such as Whatsapp, Wechat, Line, WeLend... In this tutorial, we are going to demonstrate how to use Sinch to implement this feature.

At the end of this tutorial, you will make an app which allow user to send verification code to his phone number and then verify the code.

1. Enter phone number:

2. Receive 4-digit verification code in your phone

3. Verify the code:

Why Sinch verification SDK?

Sinch provide dashboard and SDK for users to easily setup and integrate sms verification to their mobile app. You can integrate sms verification with only few api calls without managing backend. You will be surprised by the simplicity of Sinch api.

Let's start now!

1. Download Starter Project

To simplify this tutorial, I have already made a starter project which includes all the required UI. Please download it from GitHub.

2. Download Sinch Verification SDK

You can download Sinch verification kit via CocoaPods.
Go to root directory of the starter project, create podfile using

touch podfile

Open podfile

open podfile -a xcode

and add Sinch Verification SDK

pod 'SinchVerification'

Install the framework by this command

pod install

Then open SMSVerificationExample.xcworkspace.

3. Setup Sinch account

i. Register Sinch Account

Before start the project, You need a Sinch account. Go to Sinch and click LOGIN in the top menu. This will bring up a login panel. Next, click CREATE ACCOUNT to register a new account.

Enter all required information and click GO to register a new account.

ii. Create new app

Click DASHBOARD and then choose APPS in left menu. Click CREATE NEW APP and this will bring up a panel, enter you App name, leave SANDBOX selected and click CREATE.

Click the pencil icon of you new app item. Select APPLICATION and then click SAVE.

Click the key icon next to pencil icon, copy key value to somewhere, this will be used later.

4. Send Verification Code to your phone!

i) Go back to your starter project and navigate to SumitPhoneNumberViewController.m. Import the verification sdk and required view controller.

#import "VerifyCodeViewController.h"
#import <SinchVerification/SinchVerification.h>

ii) Inside @interface, add

@property (strong, nonatomic) id<SINVerification> verification;

Outside of @interface, add

#define SINCH_Key @"SINCH-APP-KEY"

where SINCH-APP-KEY is the key you get from Sinch dashboard in step (3)(ii).

Inside sendAction: method, add the following code. I will explain the code later.

- (IBAction)sendAction:(id)sender {
    NSString *internationalFormatPhoneNumber = [NSString stringWithFormat:@"+%@%@",self.textFieldCountryCode.text, self.textFieldphoneNumber.text];
    self.verification =
    [SINVerification SMSVerificationWithApplicationKey:SINCH_Key phoneNumber:internationalFormatPhoneNumber];
    [self.verification initiateWithCompletionHandler:^(BOOL success, NSError * _Nullable error) {
        if (success) {
            VerifyCodeViewController *vc = [self.navigationController.storyboard instantiateViewControllerWithIdentifier:@"VerifyCodeViewController"];
            vc.verification = self.verification;
            [self.navigationController pushViewController:vc animated:YES];
        } else {
            [[[UIAlertView alloc] initWithTitle:@"Error" message:error.localizedDescription delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil] show];
        }
    }];
}

In above code, you initiate an instance of SINVerification with class method

SMSVerificationWithApplicationKey:phoneNumber:

The phoneNumber argument need to be a string in the format of "+[Country Code][Phone Nubmer]". Then send a verification sms to that phone number using

initiateWithCompletionHandler:

where push VerifyCodeViewController when callback return success.

5. Verify the code

You are going to enter the verify code in VerifyCodeViewController.
i) Open VerifyCodeViewController.h and add a new property:

@interface VerifyCodeViewController : UIViewController
@property (strong, nonatomic) id<SINVerification> verification;
@end

This SINVerification object is passed from previously view controller.

ii) Open VerifyCodeViewController.m, inside submitAction: method, add verifyCode: method to verify the received code from sms:

[self.verification verifyCode:self.textFieldVerifyCode.text
                completionHandler:^(BOOL success, NSError * _Nullable error) {
                    if (success) {
                        [[[UIAlertView alloc] initWithTitle:@"" message:@"Success" delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil] show];
                    } else {
                        [[[UIAlertView alloc] initWithTitle:@"Error" message:error.localizedDescription delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil] show];
                    }
                }];

iii) That's all the code! Now press Cmd+R to run the app. Enter a valid country and phone number. Then You will see a error message saying you don't have credit. The reason for this error is because Sinch sms verification is a paid service, you need to pay to deposit credit in order to use the service. However, when you create a new account, you can get $2 free credit by verifying your mobile phone number.

iv) Go to Sinch dashboard, Choose BILLING from left menu and click Add a phone number. This will bring up a new page, enter your mobile phone number and verification code by following the instruction in the webpage and you will get $2 free credit.

v) Go back to your app, send the phone number again by clicking submit button. Now it will push a new view controller asking for your verification code and your phone will receive a verification code.