Automatic OTP verification in iOS using Xamarin Forms

Introduction

The Passwords and Security Codes (OTP) are a modern necessity required for security and privacy but initially iOS does not support 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 one-time password to the QuickType bar so users can fill them with one tap. Here we’ll learn how to implement autofill OTP in your app using Xamarin Forms .

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.


Automatic OTP verification in iOS

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

Automatic OTP verification in iOS

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.

Automatic OTP verification in iOS


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.

1 comment:

Featured Post

Microsoft Azure : Create a key vault

An Azure key vault is a cloud service for securely storing and accessing secrets. A secret is anything that you want to tightly control acce...

Popular Posts

Welcome to MSDEVBUILD.COM