# Introdução

## O que é Pluggy Connect?

Pluggy Connect é um widget que oferecemos para ajudar você a começar rapidamente com Pluggy. Seus usuários o usarão para conectar suas contas, dentro do seu aplicativo, diretamente à API Pluggy.

O Connect Widget é a solução frontend plug & play da Pluggy que permite aos usuários conectar suas contas financeiras em um fluxo passo a passo, para que você só precise se preocupar em interagir com os dados deles, em vez de se preocupar com fluxos de login complicados.

Durante o processo de conexão, o widget gerencia:

- Validação de credenciais
- Autenticação multifatorial (MFA)
- Gerenciamento de erros

## Como Funciona

A integração típica segue estas etapas principais:

1. **Configuração do Token de Backend**: Primeiro, você precisará configurar um endpoint no seu backend que obtenha e forneça um **Connect Token**. Este token concede autorização ao Pluggy Connect para acessar a API Pluggy em nome da sua aplicação. Este processo deve ser feito no seu backend, já que o endpoint requer autenticação usando o `CLIENT_ID` e `CLIENT_SECRET` da sua aplicação.

2. **Integração Frontend**: Com seu endpoint de Connect Token implantado, você está pronto para integrar o Pluggy Connect em sua aplicação do lado do cliente. Existem exemplos de frontend totalmente funcionais que você pode clonar e começar a usar imediatamente para lançar a interface do Pluggy Connect, substituindo a URL do endpoint do Connect Token pela sua própria.

3. **Conexão do Usuário**: Quando seu usuário clica em "Conectar minha conta", um Connect Token é obtido e o Connect Widget é instanciado com esse token e abre um modal para o usuário inserir suas credenciais.

4. **Recuperação de Dados**: Assim que o widget termina, ele emite um evento `onSuccess` com o `id` do **Item** recém-criado. Este ID do Item é necessário para qualquer ação futura que você queira realizar com os dados bancários conectados.

<Video src="https://pluggy.ai/showcase/pluggy-connect.mp4" />

## Suporte à Plataforma

Pluggy Connect é uma ferramenta fácil de integrar e rápida de configurar que funciona em todos os navegadores e plataformas, incluindo:

- Web (React, Next.js, JavaScript Puro)
- iOS
- Android
- React Native
- Flutter
- Webviews Móveis

## Callbacks de Evento

O widget suporta vários callbacks para melhorar a experiência do usuário, como redirecionar usuários para uma página de sucesso ou mostrar mensagens de erro. Você pode passar uma função para o widget executar quando um evento acontecer:

- **onSuccess**: Acionado quando a conexão é bem-sucedida. Recebe um objeto contendo os dados do item (por exemplo, `onSuccess={({ item }) => console.log(item.id)}`).
- **onError**: Acionado quando ocorre um erro. Recebe informações de erro e pode acessar os dados do item, se disponíveis (por exemplo, `onError={({ message, data: { item } }) => showErrorPage(message)}`).
- **onClose**: Acionado quando o usuário fecha o modal do widget.
- **onOpen**: Acionado quando o widget é aberto.
- **onEvent**: Trata eventos específicos de interação do usuário, como `LOGIN_SUCCESS`, `LOGIN_MFA_SUCCESS`, `LOGIN_STEP_COMPLETED` e `ITEM_RESPONSE`.

## Suporte a MFA

Pluggy Connect gerencia fluxos de autenticação multifatorial automaticamente. Na primeira vez que um usuário vincula uma conexão MFA, ele recebe um parâmetro extra na lista de credenciais (um parâmetro de uso único). Se você usar o widget Pluggy Connect, não precisará entrar em mais detalhes sobre o fluxo -- a Pluggy já cuidou de tudo para você.

## Começando

Para começar a usar o Pluggy Connect, você precisará:

1. Uma conta Pluggy com `CLIENT_ID` e `CLIENT_SECRET` (disponíveis no [Dashboard](https://dashboard.pluggy.ai))
2. Um endpoint de backend que gera Connect Tokens
3. Uma integração frontend usando um dos SDKs disponíveis

Confira as seções a seguir para mais detalhes sobre [Autenticação](/docs/connect-widget/authentication), [Ambientes e Configurações](/docs/connect-widget/environments), [Atualizando um Item](/docs/connect-widget/updating-item), [Personalização](/docs/connect-widget/customization) e [Suporte a OAuth](/docs/connect-widget/oauth-support).