Passwordless Mobile Authentication with Android
source link: https://developer.tru.id/tutorials/passwordless-auth-android?utm_campaign=passwordless_auth
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Passwordless Mobile Authentication with Android
In this tutorial, you'll learn how to add passwordless authentication to an Android application signup onboarding flow, using PhoneCheck to verify the phone number associated with the SIM card on a mobile device.
Timothy Ogbemudia
Developer Experience Engineer
Last updated: April 26, 2021
Before we begin, let's discuss why you would want to use tru.ID PhoneCheck in your onboarding workflows.
20-30% of signup attempts fail on mobile due to incomplete authentication; an SMS is delayed or not delivered at all, an email ends up in spam or is undelivered, a voice call fails, or the user makes a mistake as they navigate the poor UX of a signup flow which uses current legacy authentication options. tru.ID PhoneCheck offers a new way to verify a user, reducing UX friction and improving onboarding conversion rates.
It works by confirming the ownership of a mobile phone number by verifying the possession of an active SIM card with the same number. A mobile data session is created to a unique Check URL for the purpose of this verification. tru.ID then resolves a match between the phone number being verified and the phone number that the mobile network operator identifies as the owner of the mobile data session.
If you just want to dive into the finished code for this tutorial, you can find it on Github.
Before you begin
Before you begin you'll need the following:
- Android capable IDE (Android Studio recommended)
- An Android phone with mobile data connection
- Node.js
Getting Started
Clone the starter-files
branch via:
Create a tru.ID account and you'll end up on the Console containing CLI setup instructions.
Install the tru.ID CLI via:
Input your tru.ID credentials, which can be found within the tru.ID console.
Install the tru.ID CLI development plugin server.
Create a new tru.ID project within the root directory via:
Run the development server, pointing it to the directory containing the newly created project configuration. This will also open up a localtunnel to your development server, making it publicly accessible to the Internet so that your mobile phone can access it when only connected to mobile data.
Starting the project
Open the project up in your Android capable IDE, connect your phone to your computer so it can be used for running the Android project, and run the application from your IDE.
The project should look like this:
The project's onboarding workflow includes four screens: splash, get started, sign up and signed up.
Click the Get Started button to navigate to the signupFragment
UI. It looks like this:
Creating a PhoneCheck
The first step is to create the PhoneCheck. In order to do this, we need to send a POST
request with the user's phone number to /phone-check
.
We then get back a check_url
and check_id
which we will use for subsequent calls.
First, add the following dependencies for data fetching in app/build.gradle
:
Next, create a folder (package) in src/main/java/com/example/tru_phonecheck
called api
and within that create a subfolder (package) called data
.
Within data
, create a class called PhoneCheck.kt
and add the following code:
Here we have two data model classes: PhoneCheck
, whose constructor accepts the values of the response, and PhoneCheckPost
, whose constructor accepts the user's phone number.
We also use @SerializedName
to ensure the values match the expected input / response.
Next, navigate back to the api
folder and create another folder (package) named retrofit
. Within it, create an interface named RetrofitService
and replace its contents with the following:
Here we make use of the model we created to make the POST
request. We also create a companion object
, which allows us to access base_url
as an object (i.e. RetrofitService.base_url
).
Remember to swap out the placeholder URL in base_url
with the localTunnel URL.
We now need to grab the user's phone number when the user touches the button and initiate the POST
request.
First, head over to src/main/java/com/example/tru_phonecheck/fragments/onboarding/screens/signupFragment.kt
and add a function that disables the UI when the button is touched:
Next, add the following to create the Retrofit service:
Finally, add the following before return view
in the onCreateView
function:
Here we attach a click listener to the button with the ID submitHandler
. When the button is clicked, we grab the phone number and check if it is valid via a utility function located in src/main/java/com/example/tru_phonecheck/utils/PhoneNumberUtil.kt
. If it is a valid number, we disable the UI via setUIStatus
and make a network request to create the PhoneCheck using therf().createPhoneCheck
function.
Opening the Check URL
The next stage is to open the Check URL returned to us. To do this, we need to use the tru.ID Android SDK. The SDK forces the Check URL network request to go over the mobile data connection so that the mobile network operator and tru.ID can verify the phone number.
Head back to build.gradle
and add the following dependency:
Next, we need to initialize the SDK on startup. To do that, head over to MainActivity.kt
and update it to the following:
Head back to SignupFragment.kt
and add the following above onCreateView
:
Use the SDK to open the Check URL in the setOnClickListener
function:
We have now successfully opened the Check URL.
Getting the PhoneCheck Response
The last thing we need to do is get the PhoneCheck response.
Head over to PhoneCheck.kt
and update its contents:
We added a new model, PhoneCheckResponse
, which contains two fields: check_id
and match
. The latter is used to verify the phone number.
Next, head over to RetrofitService.kt
and update the code support getting the PhoneCheck resource:
Here we added a GET
function to /phone-check?check_id={check_id}
where we pass the check_id
value dynamically when it is called.
We also map the model type PhoneCheckResponse
to the Response object we're expecting.
Let's now head over to SignupFragment.kt
and add the functionality to get the PhoneCheck result:
Finally, we get the result of the PhoneCheck using the phoneCheck.check_id
we previously got with the PhoneCheck
response. If the phone number has been verified, we navigate the user to the signedUpFragment
view. If the verification failed (phoneCheckResponse.match
is false
) we render a "failure" toast.
The signedUpFragment
UI looks as follows:
That's it!
Wrapping Up
With everything in place, we now have a seamless signup onboarding flow with minimal UX friction, resulting in no user drop-offs.
There you have it: you’ve successfully integrated tru.ID PhoneCheck into your Android onboarding workflow.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK