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 .
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.
this is very informative articlee
ReplyDelete