Android (Kotlin)
Pré-requisitos
Para poder usar o hosted widget no seu aplicativo Android, certifique-se de que você:
- Pode criar tokens de
accessno seu servidor. - Sabe como implementar webviews para sua plataforma. Para mais informações, consulte os artigos de webview do Google.
Configure deeplinks no seu aplicativo Android
No seu arquivo AndroidManifest.xml, adicione o seguinte código:
<manifest ...>
<application ...>
<activity ...>
<intent-filter> <!-- Você precisa adicionar todo este objeto XML. -->
<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>Manipular eventos na sua webview
No exemplo de código abaixo, você pode ver um exemplo de como escutar e manipular eventos dentro da sua 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")
// Faça algo com o link e a instituição.
}
else if (host == "exit") {
// Se o redirecionamento começar com "exit",
// Faça algo com os dados.
}
else {
// Se o redirecionamento começar com "error",
// Faça algo com os dados.
}
belvoWebView.goBack()
}
return false
}
}
belvoWebView.addJavascriptInterface(BelvoWidget(), "your-url-here") // Usado para escutar eventos adicionaisPor favor, note: Você pode receber um aviso devido à linha belvoWebView.settings.javaScriptEnabled = true (como na imagem abaixo). O Widget da Belvo para Webviews cumpre todos os tipos de mitigações de XSS, por isso recomendamos suprimir este aviso com a anotação sugerida pelo Android Studio.
Ouvindo eventos adicionais
Nosso hosted widget também envia dados adicionais sobre eventos que o usuário encontra ao longo do widget. Por exemplo, quando o usuário vai da tela de seleção de instituição para a tela de login de credenciais, nosso widget enviará um evento.
Os eventos são enviados como payloads de string JSON com o seguinte esquema:
{
"eventName": "PAGE_LOAD",
"metadata":{
"page": "/institutions", // Página para a qual o usuário é direcionado
"from": "/consent", // Página onde o usuário estava anteriormente
"institution_name": "", // Nota: Este campo só aparece DEPOIS que eles selecionaram uma instituição
}
}Para ouvir esses eventos:
- Adicione a seguinte classe à sua aplicação.
class BelvoWidget() {
@JavascriptInterface
fun sendMessage(data:String) {
println( "Event data: $data" )
}
}
- Adicione a seguinte linha de código ao final da sua lógica para manipular deep links no seu webview:
belvoWebView.addJavascriptInterface(BelvoWidget(), "belvoWidget") // Usado para ouvir eventos adicionais- [Opcional] Adicione a seguinte anotação onde necessário para suprimir qualquer aviso:
@SuppressLint("JavascriptInterface")Pronto! Agora você pode ouvir eventos adicionais no seu webview!