Automatic OTP Verification In iOS Using Xamarin.Forms

Introduction

 

Passwords and security codes (OTP) are a modern necessity required for security and privacy but initially, iOS did not support the auto-read feature. iOS 12 eases the tedious aspects of account setup and sign-in by automatically suggesting and using strong, unique passwords and by bringing a one-time password to the QuickTypebar so users can fill them in one tap. Here, we’ll learn how to implement autofill OTP in our app using Xamarin.Forms.

 

 

Message Format Rules

• Security code only works with System keyboard. So, avoid using a custom keyboard.
• Make sure the OTP message phrase has “code” or “passcode” and the message is a copied.

Create New Xamarin.Forms Application

 

In order to implement the Autofill OTP message, let’s start creating a new Xamarin.Forms project using Visual Studio 2019 or VS for Mac. When accessing Visual Studio 2019 Mac for the first time, you will come across a new interface for opening and creating the projects.

 

Open Visual Studio Mac >>Create New Project or select "Open Recent Application".

 

 

The available templates will appear on a Mac like below. Select Xamarin.Forms application with different mobile platforms.

 

 

Custom Control

 

The "OneTimeCode" type is available only specific to the iOS device, not in Android. So, create a Xamarin.Forms custom entry control in the .NET Standard library project, enabling developers to override the default native rendering with their own platform-specific customization.

using System;
using Xamarin.Forms;

namespace ReadOTPIOS
{
    public class AutoFillControl : Entry
    {
        public AutoFillControl()
        {
        }
    }
}

UI Design

 

The AutoFillControl control can be referenced in XAML in the .NET Standard library project by declaring a namespace for its location and using the namespace prefix on the control element. The following code example shows how the AutoFillControl control can be consumed by a XAML page.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ReadOTPIOS" x:Class="ReadOTPIOS.MainPage"
             >

    <StackLayout Orientation="Horizontal">
        <Label
            FontSize="Large"
            HorizontalOptions="Center"
            Text="Welcome to iOS 12 Read and Autofill OTP from SMS using Xamarin Forms" />

        <local:AutoFillControl
            FontSize="Large"
            HorizontalOptions="Center"
            Keyboard="Numeric"
            Placeholder="XXXXXX" />
    </StackLayout>
</ContentPage>

IOS Renderer

 

The following code example shows the custom renderer for the iOS platform. The call to the base class's OnElementChanged method instantiates an iOS UITextField control, with a reference to the control being assigned to the renderer's Control property.

 

To enable password autofill on a UITextField, we need to set the UItextContentTypeproperty as a OneTimeCode.

using ReadOTPIOS;
using ReadOTPIOS.iOS;
using UIKit;
[assembly: ExportRenderer(typeof(AutoFillControl), typeof(AutoFillRenderer))]
namespace ReadOTPIOS.iOS
{
    public class AutoFillRenderer: EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.TextContentType = UITextContentType.OneTimeCode;
            }
        }
    }
}

The application source code is available on GitHub . The iOS simulator won’t allow you to send messages, so you need to try and deploy the application to an actual iOS device and send a message to the device for testing.

 

 

Summary

 

This article has demonstrated how to create a Read and Autofill OTP from SMS using Xamarin.Forms Entry control. I hope this article will help you. Please leave your feedback/query using the comments box, and if you like this article, please share it with your friends.