Out-of-band Authentication: Java Web SDK
HYPR SDK for Android: Web Authentication
FIREBASE FIRST
Before proceeding with this document, please ensure that you've followed the steps in Configuring Push Notifications via Firebase and Enable Push Notification for Android.
Out-of-band (OOB) authentication provides the means to login to a web account on a browser via your mobile device.
By pairing your mobile device with your web account via OOB device setup, you can now login via OOB authentication with the following steps:
- Provide the web account username.
- Invoke the OOB authentication API; this will send a push notification to the mobile device prompting the mobile to authenticate.
- Upon successful authentication the web account will be unlocked.
Out-of-band Device Setup Flow
Pair your web account to your mobile device.

Android Out-of-band Device Setup PIN Entry Screen:

Out-of-band Authentication Flow
This is the flow for the mechanism that unlocks the web account:

UI Customization
We can customize the OOB Device Setup screens via XML overrides. Each module has a corresponding XML file under app/<module_name>/src/main/res/layout
. By creating a layout file with the same name as the one you want to override, the SDK will present the new layout file instead.
Android IDs
If you are overriding the layout files, please make sure to keep all the
android:ids
with their respective view from the layout that you want to override as the SDK uses those IDs.
Overriding the Out-of-band Device Setup Screen
In the appropriate layout
folder, create a file called hypr_common_view_single_pin.xml
; you can now alter and add views. Here is an example with many of the properties already defined:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/layout_movable_parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/hypr_pin_layout_pin_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/layout_pin_instructions_text"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal">
<com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
android:id="@+id/hypr_pin_editview_pin_one_first"
style="@style/PinEditTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/hyprColorPinFocusedLine" />
<com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
android:id="@+id/hypr_pin_editview_pin_one_second"
style="@style/PinEditTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/hyprColorPinFocusedLine" />
<com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
android:id="@+id/hypr_pin_editview_pin_one_third"
style="@style/PinEditTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/hyprColorPinFocusedLine" />
<com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
android:id="@+id/hypr_pin_editview_pin_one_fourth"
style="@style/PinEditTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/hyprColorPinFocusedLine" />
<com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
android:id="@+id/hypr_pin_editview_pin_one_fifth"
style="@style/PinEditTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/hyprColorPinFocusedLine" />
<com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
android:id="@+id/hypr_pin_editview_pin_one_sixth"
style="@style/PinEditTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/hyprColorPinFocusedLine" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_pin_instructions_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/hypr_common_view_cancel_button"
android:layout_marginTop="@dimen/hypr_common_pin_instructions_text_margin_top"
android:layout_marginBottom="@dimen/hypr_common_pin_instructions_text_margin_bottom"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/sharetech_regular"
android:gravity="center_horizontal"
android:text="@string/hypr_pin_instructions_title"
android:textColor="@color/hyprColorTextPrimary"
android:textSize="@dimen/hypr_common_license_entry_title_size" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/sharetech_regular"
android:gravity="center_horizontal"
android:text="@string/hypr_pin_instructions_text"
android:textColor="@color/hyprColorTextPrimary"
android:textSize="@dimen/hypr_common_license_entry_desc_size" />
<com.hypr.hyprandroidcommon.uiadapter.ui.icons.SetupWorkstationAndDevice
android:layout_width="@dimen/hypr_common_license_entry_img_width"
android:layout_height="@dimen/hypr_common_license_entry_img_height"
android:layout_marginTop="@dimen/hypr_common_license_entry_img_margin_top"
android:contentDescription="@string/hypr_todo_content_description"
android:gravity="center_horizontal" />
</LinearLayout>
<include
android:id="@+id/hypr_common_view_cancel_button"
layout="@layout/hypr_common_view_cancel_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/view_pin_entry_text_buffer"
android:layout_marginBottom="@dimen/hypr_common_pin_cancel_margin_bottom" />
<View
android:id="@+id/view_pin_entry_text_buffer"
android:layout_width="match_parent"
android:layout_height="@dimen/hypr_common_pin_buffer_view_height"
android:layout_above="@+id/view_bottom_anchor"
android:visibility="visible" />
<View
android:id="@+id/view_bottom_anchor"
android:layout_width="match_parent"
android:layout_height="@dimen/hypr_common_keyboard_divider_bar_height"
android:layout_alignParentBottom="true"
android:background="@color/hyprColorKeyboardAnchorView"
android:visibility="invisible" />
</RelativeLayout>
<include layout="@layout/hypr_common_view_keyboard_layout" />
</RelativeLayout>

Updated 5 months ago