# Using Webviews with the Web SDK on Android
source: https://developer.mastercard.com/open-finance-us/documentation/connect/integrating/sdk/webviews/android-webviews/index.md

This page outlines steps to load your web app via the Data Connect WebSDK inside your mobile app using a WebView. It also explains how to seamlessly transition control to your mobile app using Chrome Custom Tabs for the FI's OAuth Login (if the FI banking app is not installed on the user's device), or redirecting to the FI app (if the FI app is present on the user's device).

This documentation also includes App Link / deep link configuration, as well as details on customizing the WebViewClient and WebChromeClient for enhanced control and handling of web interactions.

These are the steps which occur when launching:

1. Launch your web app (integrated with the Data Connect Web SDK) URL address in a webView inside your mobile app.

2. Select an option or link which will open the Data Connect experience in a WebView (this option should have the `redirectUrl` code integrated already).

3. After successful addition of the FI OAuth account, control is returned to your app's Activity via the AppLink/DeepLink specified as the `redirectUrl` and declared in the `AndroidManifest.xml` file.

Tip: See also the [Secure Web Containers on Android](https://developer.mastercard.com/open-finance-us/documentation/connect/integrating/sdk/ios/websdk-ios/index.md) page for more information on loading your URL inside a secure container (Chrome Custom Tab) and closing the secure container when complete.

Secure containers are mandatory in some situations (for example, Chase does not allow their consent URL to be launched from within insecure webviews).

The following scenarios need to be handled:

* Scenario 1: FI's app is installed - The FI's app will launch and the OAuth session will occur in the FI's app.

* Scenario 2: FI's app is not installed - The FI OAuth login page will open in Chrome Custom Tabs.

Note: In order to support App to App authentication make sure you pass a suitable `redirectUrl` parameter via the Data Connect Web SDK. See [Data Connect Web SDK App to App support](https://developer.mastercard.com/open-finance-us/documentation/connect/integrating/sdk/web-sdk/sdk/index.md#app-to-app-support).

## Project Setup {#project-setup}

Modify your app-level Gradle file (build.gradle) as follows:

```groovy
dependencies {
  // ...
  implementation 'androidx.browser:browser:<insert latest version>'
}
```

Find the latest version here - <https://developer.chrome.com/docs/android/custom-tabs/guide-get-started>

The Android App needs the `INTERNET` permission to access the WebView. Include this permission in the `AndroidManifest.xml` file.

```xml
<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.INTERNET"/>

  <application>
    .....
  </application>

</manifest>
```

## Layout Configuration {#layout-configuration}

Include the `WebView` component in your layout XML file.

```xml
<WebView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/webView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
/>
```

## WebView Initialization {#webview-initialization}

Create an Activity and create the following variables globally in your Activity.
* Java
* Kotlin

```java
private WebView webView;
private Context context;
```

```kotlin
private lateinit var webView : WebView
private lateinit var context : Context
```

Initialize webView and context in your Activity's `onCreate` using the following code. Create the `ConnectWebViewClient` and `OauthWebChromeClient` class within the same Activity.

Create the ConnectWebViewClient \& OauthWebChromeClient class within the same Activity.
* Java
* Kotlin

```java
context = this;
webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setSupportMultipleWindows(true);
webView.setWebViewClient(new ConnectWebViewClient());
webView.setWebChromeClient(new OauthWebChromeClient());
webView.loadUrl("Pass Your Data Connect WebSDK integrated URL");
```

```kotlin
context = this
webView = findViewById(R.id.webView)
webView.settings.javaScriptEnabled = true
webView.settings.allowFileAccess = true
webView.settings.setSupportMultipleWindows(true)
webView.webViewClient = ConnectWebViewClient()
webView.webChromeClient = OauthWebChromeClient()
webView.loadUrl("Pass Your Data Connect WebSDK integrated URL")
```

## Loading your Web URL inside the WebView {#loading-your-web-url-inside-the-webview}

The `ConnectWebViewClient` class extends `WebViewClient` and handles URL loading in the main WebView.

Customize the `shouldOverrideUrlLoading` method within `ConnectWebViewClient` to control how URLs are loaded in the main WebView.
* Java
* Kotlin

```java
// this class handles the loading of the urls inside the WebView.
private class ConnectWebViewClient extends WebViewClient {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    String url = request.getUrl().toString();
    view.loadUrl(url);
    return true;
  }
}
```

```kotlin
// this class handles the loading of the urls inside the WebView.
private inner class ConnectWebViewClient : WebViewClient() {
    override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
        val url = request?.url.toString()
        view?.loadUrl(url)
        return true
    }
}
```

## Handling OAuth Login URL and App to App {#handling-oauth-login-url-and-app-to-app}

In order for App to App authentication to work, the `OauthWebChromeClient` class extends `WebChromeClient` and manages the creation of a new `WebView` for handling Financial Institution OAuth events.

Customize the `shouldOverrideUrlLoading` method within `OauthWebChromeClient` to handle specific OAuth URLs and load them into the Chrome Custom Tabs.

When the FI's OAuth process is completed by the user, the FI page in the Chrome Custom Tab will automatically close itself as per the Activity configured via AppLink or DeepLink which is mentioned in the `AndroidManifest.xml` file (see [here](https://developer.mastercard.com/open-finance-us/documentation/connect/integrating/sdk/android/android-sdk/index.md#app-link-support)). Control then returns to your app's Activity which runs Data Connect in the background with an add accounts screen.
* Java
* Kotlin

```java
// this class handles the opening of the OAuth Login page
OauthWebChromeClient
private class OauthWebChromeClient extends WebChromeClient {
  @Override
  public boolean onCreateWindow(WebView view, boolean isDialog,
      boolean isUserGesture, Message resultMsg) {
    Webview mWebviewPop = new WebView(context);
    WebView.WebViewTransport transport =
        (WebView.WebViewTransport) resultMsg.obj;
    transport.setWebView(mWebviewPop);
    resultMsg.sendToTarget();

    mWebviewPop.setWebViewClient(new WebViewClient() {
      @Override
      public boolean shouldOverrideUrlLoading(
          WebView view, WebResourceRequest webResourceRequest) {
        Uri oauthURL = webResourceRequest.getUrl();
        // to open in CCT (Chrome Custom Tabs)
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
        CustomTabsIntent intent = builder.build();
        intent.launchUrl(context, oauthURL);
        return true;
      }
    });

    return true;
  }
}
```

```kotlin
// this class handles the opening of the OAuth Login page
private inner class OauthWebChromeClient : WebChromeClient() {
  override fun onCreateWindow(view: WebView?, isDialog: Boolean, isUserGesture: Boolean, resultMsg: Message?): Boolean {
    val mWebviewPop = WebView(context)
    val transport = resultMsg?.obj as WebView.WebViewTransport
    transport.webView = mWebviewPop
    resultMsg.sendToTarget()

    mWebviewPop.webViewClient = object : WebViewClient() {
      override fun shouldOverrideUrlLoading(view: WebView?, webResourceRequest: WebResourceRequest?): Boolean {
        val oauthURL = webResourceRequest?.url
        // to open in CCT (Chrome Custom Tabs)
        val builder = CustomTabsIntent.Builder()
        val intent = builder.build()
        intent.launchUrl(context, oauthURL)
        return true
      }
    }

    return true
  }
}
```