# Android (Kotlin) ## Pré-requisitos Para poder usar o hosted widget no seu aplicativo Android, certifique-se de que você: - Pode criar tokens de `access` no 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: ```xml Exemplo de Configuração de Deeplink ``` ## 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. ```kotlin Exemplo de Manipulação 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") // 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 adicionais ``` Por 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: Evento de Carregamento de Página ```json PAGE_LOAD Event { "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 } } ``` Evento de Erro ```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 ouvir esses eventos: 1. Adicione a seguinte classe à sua aplicação. ```kotlin class BelvoWidget() { @JavascriptInterface fun sendMessage(data:String) { println( "Event data: $data" ) } } ``` 1. Adicione a seguinte linha de código ao final da sua lógica para manipular deep links no seu webview: ```kotlin belvoWebView.addJavascriptInterface(BelvoWidget(), "belvoWidget") // Usado para ouvir eventos adicionais ``` 1. [Opcional] Adicione a seguinte anotação onde necessário para suprimir qualquer aviso: ```kotlin @SuppressLint("JavascriptInterface") ``` Pronto! Agora você pode ouvir eventos adicionais no seu webview!