# Android (Kotlin)

## Requisitos previos

Para poder usar el hosted widget en tu aplicación Android, asegúrate de que:

- Puedes crear tokens de `access` en tu servidor.
- Sabes cómo implementar webviews para tu plataforma. Para más información, consulta los artículos sobre webview de Google.


## Configura enlaces profundos en tu aplicación Android

En tu archivo `AndroidManifest.xml`, agrega el siguiente código:


```xml Ejemplo de Configuración de Enlace Profundo
<manifest ...>
<application ...>
    <activity ...>
			<intent-filter> <!-- Necesitas agregar este objeto XML completo. -->
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
				<data
          android:scheme="your-url-here"
          android:host="" /> 
      </intent-filter>
    </activity>
  </application>
</manifest>
```

## Manejar eventos en tu webview

En el siguiente ejemplo de código puedes ver un ejemplo de cómo escuchar y manejar eventos dentro de tu webview.


```kotlin Ejemplo de Manejo de Webview
val belvoWebView: WebView = findViewById(R.id. WEBVIEW_ID_ASSIGNED_IN_CONTENT  )
        belvoWebView.loadUrl("https://widget.belvo.io/?access_token={access_token_from_backend}")
        belvoWebView.settings.javaScriptEnabled = true
        belvoWebView.settings.allowContentAccess = true
        belvoWebView.settings.setDomStorageEnabled(true)
        belvoWebView.settings.useWideViewPort = true


        belvoWebView.webViewClient = object : WebViewClient () {
            override fun shouldOverrideUrlLoading(view: WebView?, url: String): Boolean {
                view?.loadUrl(url)
               if (url.startsWith("https")) {
                   return true
               }
               else {
                   belvoWebView.stopLoading()
                   val uri: Uri = Uri.parse(url)
                   val host: String? = uri.host
                   if (host == "success") {
                       val link : String? = uri.getQueryParameter("link")
                       val institution : String? = uri.getQueryParameter("institution")
                       // Haz algo con el link y la institución.
                   }
                   else if (host == "exit") {
                     // Si el redireccionamiento comienza con "exit",
                     // Haz algo con los datos.
                   }
                   else {
                     // Si el redireccionamiento comienza con "error",
                     // Haz algo con los datos.
                   }
                   belvoWebView.goBack()
               }
               return false
            }
        }
        belvoWebView.addJavascriptInterface(BelvoWidget(), "your-url-here") // Usado para escuchar eventos adicionales
```

Por favor ten en cuenta: Podrías recibir una advertencia debido a la línea `belvoWebView.settings.javaScriptEnabled = true` (como en la imagen de abajo). El Widget de Belvo para Webviews cumple con todo tipo de mitigaciones XSS, por lo que recomendamos suprimir esta advertencia con la anotación sugerida por Android Studio.

## Escuchando eventos adicionales

Nuestro hosted widget también envía datos adicionales sobre los eventos que el usuario encuentra a lo largo del widget. Por ejemplo, cuando el usuario pasa de la pantalla de selección de institución a la pantalla de inicio de sesión de credenciales, nuestro widget enviará un evento.

Los eventos se envían como cargas útiles de cadena JSON con el siguiente esquema:

Evento de Carga de Página

```json PAGE_LOAD Event
{
    "eventName": "PAGE_LOAD",
    "metadata":{
        "page": "/institutions", // Página a la que se dirige el usuario
        "from": "/consent", // Página donde estaba previamente el usuario
        "institution_name": "", // Nota: Este campo solo aparece DESPUÉS de que hayan seleccionado una institución
    }
}
```

Evento de Error

```json ERROR Event
{
  "eventName": "ERROR",
  "request_id": "UUID",
  "meta_data": {
    "error_code": "login_error",
    "error_message": "Invalid credentials provided to login to the institution",
    "institution_name": "bancoazteca_mx_retail",
    "timestamp": "2020-04-27T19:09:23.918Z"
  }
}
```

Para escuchar estos eventos:

1. Agrega la siguiente clase a tu aplicación.



```kotlin
class BelvoWidget() {

    @JavascriptInterface
    fun sendMessage(data:String) {
        println( "Event data: $data" )
    }
}
```

1. Agrega la siguiente línea de código al final de tu lógica para manejar enlaces profundos en tu webview:



```kotlin
belvoWebView.addJavascriptInterface(BelvoWidget(), "belvoWidget") // Usado para escuchar eventos adicionales
```

1. [Opcional] Agrega la siguiente anotación donde sea necesario para suprimir cualquier advertencia:



```kotlin
@SuppressLint("JavascriptInterface")
```

¡Hecho! ¡Ahora puedes escuchar eventos adicionales en tu webview!