FIDO U2F WebView Bridge

Registering a new FIDO Security Key using the FIDO WebView Bridge

FIDO Authentication using the FIDO WebView Bridge

If you are using a WebView for your login flow and have already integrated FIDO U2F support in your webservice by using the FIDO JavaScript API, you can use the FIDO WebView Bridge for two-factor authentication. In this guide, you’ll learn how to add the FIDO Bridge to the WebView you use for your login process.

Fork sample code on Github: Get Sample on Github

Add the SDK to Your Project

To get a username and password for our Maven repository, please contact us for a license.

Add this to your build.gradle:

repositories {
    google()
    jcenter()
    maven {
        credentials {
            username 'xxx'
            password 'xxx'
        }
        url "https://maven.cotech.de"
    }
}

dependencies {
    // FIDO implementation including UI
    implementation 'de.cotech:hwsecurity-fido:2.2.1'

    // Additional classes for local parsing and verification of FIDO messages
    // Usually not required for FIDO clients.
    //implementation 'de.cotech:hwsecurity-fido-util:2.2.1'
}

Initialize the Hardware Security SDK

To use the SDK’s functionality in your app, you need to initialize the SecurityKeyManager first. This is the central class of the SDK, which dispatches incoming NFC and USB connections. It is recommended to perform this initialization in the onCreate method of your Application subclass. This ensures Security Keys are reliably dispatched by your app while in the foreground.

@Override
public void onCreate() {
    super.onCreate();

    SecurityKeyManager securityKeyManager = SecurityKeyManager.getInstance();
    SecurityKeyManagerConfig config = new SecurityKeyManagerConfig.Builder()
        .setEnableDebugLogging(BuildConfig.DEBUG)
        .build();

    securityKeyManager.init(this, config);
}
override fun onCreate() {
    super.onCreate()

    val securityKeyManager = SecurityKeyManager.getInstance()
    val config = SecurityKeyManagerConfig.Builder()
        .setEnableDebugLogging(BuildConfig.DEBUG)
        .build()

    securityKeyManager.init(this, config)
}

Don’t forget to register your Application subclass in your AndroidManifest.xml:

<application 
   android:name=".SecurityKeyApplication"
   android:label="@string/app_name" 
...>

WebView Integration

JavaScript calls to window.u2f are delegated to the Hardware Security SDK. This is implemented by injecting a short JavaScript file into the currently loaded page. It intercepts API calls and delegates them to our FIDO implementation in Java. The WebViewFidoBridge does this automatically. Don’t forget to enable JavaScript in your WebView and delegate shouldInterceptRequest() and onPageStarted() calls to the WebViewFidoBridge as shown in the following:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView webView = findViewById(R.id.webview);
    webView.getSettings().setJavaScriptEnabled(true);

    WebViewFidoBridge webViewFidoBridge = WebViewFidoBridge.createInstanceForWebView(this, webView);

    webView.setWebViewClient(new WebViewClient() {

        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
            webViewFidoBridge.delegateShouldInterceptRequest(view, request);
            return super.shouldInterceptRequest(view, request);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            webViewFidoBridge.delegateOnPageStarted(view, url, favicon);
        }

    });

    webView.loadUrl("https://u2f.hwsecurity.dev");
}

Profit

That’s all! If you have any questions, don’t hesitate to contact us: