Automatic OTP verification in iOS using Xamarin Forms

Message Format Rules

Security code is only work with System keyboard. So, avoid using custom keyboard.
Make sure OTP message phrase has “code” or “passcode” and message is copy.

Create New Xamarin Forms Application

In order to implement Autofill OTP message, let’s start creating a new Xamarin.Forms project using Visual Studio 2019 or VS mac. When accessing Visual Studio 2019 mac for the first time, you will come across a new interface for opening a 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

One time code type available only specific to 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 available in Github. IOS simulator won’t allow to send messages, so let you try and deploy applications to IOS device and send a message to 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.