Android (Kotlin)
Requisitos previos
Para poder usar el hosted widget en tu aplicación Android, asegúrate de que:
- Puedes crear tokens de
accessen 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:
<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.
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 adicionalesPor 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:
{
"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
}
}Para escuchar estos eventos:
- Agrega la siguiente clase a tu aplicación.
class BelvoWidget() {
@JavascriptInterface
fun sendMessage(data:String) {
println( "Event data: $data" )
}
}
- Agrega la siguiente línea de código al final de tu lógica para manejar enlaces profundos en tu webview:
belvoWebView.addJavascriptInterface(BelvoWidget(), "belvoWidget") // Usado para escuchar eventos adicionales- [Opcional] Agrega la siguiente anotación donde sea necesario para suprimir cualquier advertencia:
@SuppressLint("JavascriptInterface")¡Hecho! ¡Ahora puedes escuchar eventos adicionales en tu webview!