# Fluxo App2App do Hosted Widget (OFDA)

Com o nosso fluxo App2App, você pode oferecer aos seus clientes uma experiência de aplicativo mais nativa usando o Hosted Widget da Belvo, melhorando a experiência do usuário e reduzindo atritos. Nesta página, vamos guiá-lo pelo novo fluxo e fornecer diretrizes sobre como implementá-lo.

Requisito do Safari no iOS
Em dispositivos iOS, o fluxo App2App só funciona quando o navegador padrão do usuário final é o Safari. Se o usuário tiver um navegador padrão diferente (como o Chrome), o fluxo App2App não funcionará corretamente.

**Fallback recomendado**: Implemente uma página de fallback para o link universal que você configurar. Esta página deve detectar quando o redirecionamento falha e exibir um botão que permita ao usuário retornar manualmente ao seu aplicativo.

## Fluxo do usuário

Com o fluxo App2App, a principal diferença para o usuário é que, após conceder seu consentimento para compartilhar dados:

1. Eles são redirecionados para um navegador seguro para completar a solicitação.
2. Eles são redirecionados diretamente para o seu aplicativo.
3. O widget Belvo é aberto em uma webview dentro do seu aplicativo.


Como isso difere do fluxo usual?
No fluxo usual, quando você implementa o Hosted Widget usando deep links, o usuário completa todo o processo de conexão no navegador e, em seguida, é solicitado a ser redirecionado para o seu aplicativo, o que leva a atritos e uma experiência de usuário subótima. Com este novo fluxo, o usuário é transferido de forma contínua através das diferentes redireções.

## Implementação

Para usar o fluxo App2App, você precisará fazer as seguintes alterações na sua implementação atual:

1. Crie um link para o seu aplicativo.
2. Use o link ao gerar o token de acesso.
3. Abra o Webview Widget ao ser redirecionado para o seu aplicativo.


## 1. Link para o seu aplicativo

Antes de configurar a experiência do aplicativo nativo, você precisa preparar um link universal (iOS) ou um link de aplicativo (Android). Este link é usado para redirecionar seu usuário de volta ao seu aplicativo após ele ter concedido seu consentimento em sua instituição.

Por que não usar um deep link?
Ao usar um deep link para o seu aplicativo, os usuários recebem uma mensagem pop-up que precisam confirmar antes de serem redirecionados para o seu aplicativo, o que pode levar a uma experiência de usuário ruim e fricção.
Ao usar o `application_link`, os usuários são automaticamente redirecionados para o seu aplicativo sem precisar confirmar o redirecionamento.

## 2. Gerando seu `access_token`

Ao gerar seu `access_token`, você precisa fornecer os seguintes parâmetros no objeto `callback_urls`:

- `application_link` : O link para sua aplicação para o qual os usuários serão redirecionados após concederem consentimento em sua instituição.
- `success`: A URL para a qual os usuários são redirecionados quando completam com sucesso o fluxo do widget.
- `exit`: A URL para a qual os usuários são redirecionados quando saem do widget antes de completar o fluxo.
- `event`: A URL para a qual os usuários são redirecionados quando ocorre um erro.


```json App2App Flow Callback URLs
{
  "callback_urls": {
    "application_link": "https://your.company_name.br/belvo-widget",
    "success": "https://your.company_name.br/success",
    "exit": "https://your.company_name.br/exit",
    "event": "https://your.company_name.br/error"
  }
}
```

Para instruções completas sobre como gerar o `access_token`, por favor veja nosso guia de Hosted Widget (OFDA) dedicado.

## 3. Abrir Webview no redirecionamento

Assim que os usuários concedem consentimento em sua instituição, eles são redirecionados para sua aplicação usando o `application_link`, junto com uma query string que você precisará usar para abrir o widget da Belvo como uma webview dentro da sua aplicação.

```shell Exemplo de Redirecionamento
https://mobile.seu-nome-de-app.br/belvo-widget/ ## Seu application_link
	?access_token={someAccessToken}&consent_id={someConsentId}&locale=pt... ## Query string com detalhes para abrir o widget da Belvo
```

Assim que os usuários são redirecionados para sua aplicação, você precisa abrir uma webview dentro da sua aplicação e lançar o widget da Belvo:

```shell Exemplo de Abertura do Widget em Webview
https://widget.belvo.io/ ## A URL do Belvo Hosted Widget
	?access_token={someAccessToken}&consent_id={someConsentId}&locale=pt... ## A query string que você recebeu
```

✅ Pronto! Com essas pequenas alterações na sua implementação, os usuários irão transitar de forma fluida da sua aplicação para o widget, conceder seu consentimento e, em seguida, retornar ao widget dentro da sua aplicação.