> **Esta página faz parte do roteiro de integração.** Ela detalha a fase 4 (formato B: o botão "Entrar com Plicflix"). Para pôr um jogo no plicflix do zero até ele aparecer no catálogo, siga o roteiro em ordem: https://developers.plicflix.com/docs/COMECE (fases 1 a 8, com quem faz cada passo). Índice para IAs: https://developers.plicflix.com/llms.txt

# O botão oficial "Entrar com Plicflix"

O botão pronto para o login com o plicflix no **seu** site ou app. Basta colar
uma tag: ele já vem com o visual oficial e faz o login sozinho (OAuth 2.0 +
PKCE, veja [OAUTH](OAUTH.md)). O botão é igual em todo jogo, e é por isso que o
jogador o reconhece e confia.

Para ver todas as variações ao vivo e copiar o código já preenchido com o seu
jogo, use a página [Botão oficial](/botao) deste portal.

> **Para IAs:** siga a seção 1. Se o jogo tem servidor, use `href` (seção 2.1).
> Se não tem, use `cliente` e `volta` (seção 2.2). A seção 4 dá cada atributo.
> Não redesenhe o botão. Para um visual próprio, use `estilo="proprio"`
> (seção 5).

## 1. Em dois passos

```html
<!-- 1. o SDK — copie o arquivo para o seu site SEM mudar (https://developers.plicflix.com/sdk/plicflix.js),
        ou carregue da CDN: https://sdk.plicflix.com/plicflix.js -->
<script src="/plicflix.js" defer></script>

<!-- 2. o botão, onde ele deve aparecer -->
<plicflix-entrar href="/api/plicflix/oauth"></plicflix-entrar>
```

O SDK define o elemento `<plicflix-entrar>` (o plicflix.js 2.5 ou mais novo).
Como é um elemento HTML comum, funciona em qualquer site: HTML puro, React,
Vue, Svelte, Angular ou o que o seu motor gerar.

## 2. Os dois jeitos de fazer o login

### 2.1 Com servidor (recomendado): `href`

```html
<plicflix-entrar href="/api/plicflix/oauth"></plicflix-entrar>
```

O botão vira um link para a **sua** rota. Ela gera o PKCE e manda o jogador para
o plicflix. Na volta, o seu servidor troca o código com a chave `pk_` e abre a
sessão. As duas rotas prontas, em Node e Go, estão em
[OAUTH, seção 4](OAUTH.md#4-com-servidor-recomendado).

### 2.2 Sem servidor: `cliente` e `volta`

```html
<plicflix-entrar cliente="seu-slug" volta="https://seujogo.com/"></plicflix-entrar>

<!-- na página de volta -->
<script type="module">
  const r = await Plicflix.voltouDoPlicflix();   // { jogador: { id: "pf_…", nome }, jogo, assinante }
  if (r) iniciarJogo(r.jogador);
</script>
```

- **No clique:** o próprio botão gera o PKCE e vai ao plicflix.
- **`volta`:** precisa estar cadastrado (developers → o jogo → Integração).
- **Limite:** o resultado de um cliente público serve para mostrar o nome e
  guardar o progresso local, nunca para proteger moedas, ranking ou compras
  ([OAUTH, seção 5](OAUTH.md#5-sem-servidor-jogo-só-de-navegador)).

## 3. Os estilos

| `estilo` | como é | para quê |
|---|---|---|
| `destaque` (o padrão) | a chamada em caixa alta, o logo inteiro, a borda nas cores do plicflix e um reflexo que passa | a tela de login do jogo, o lugar de honra |
| `solido` | preto e sóbrio, o ícone e "Entrar com Plicflix" em texto normal | combina com qualquer site, ao lado de outros logins |
| `simples` | fundo branco e borda fina, o ícone e o texto | sites claros e formulários |
| `proprio` | **o seu** botão: aparece o que estiver dentro do elemento | quando o jogo tem um visual próprio (seção 5) |

```html
<plicflix-entrar href="/api/plicflix/oauth"></plicflix-entrar>
<plicflix-entrar href="/api/plicflix/oauth" estilo="solido"></plicflix-entrar>
<plicflix-entrar href="/api/plicflix/oauth" estilo="simples"></plicflix-entrar>
```

## 4. Os atributos

| atributo | valores | padrão |
|---|---|---|
| `href` | a sua rota de login no servidor | — |
| `cliente`, `volta` | o slug do jogo e o `redirect_uri` cadastrado (sem servidor) | — |
| `estilo` | `destaque`, `solido`, `simples`, `proprio` | `destaque` |
| `tema` (só no `destaque`) | `escuro` (fundo escuro), `claro` (fundo claro), `contorno` (só a borda) | `escuro` |
| `tamanho` | `p` (40 px), `m` (48 px), `g` (58 px) | `m` |
| `forma` | `reto`, `arredondado`, `pilula` | `arredondado` |
| `largura` | `auto` ou `100%` | `auto` |
| `texto` | `entrar` ("Entrar com"), `continuar` ("Continuar com"), `ligar` ("Ligar ao": para ligar uma conta que já existe) | `entrar` |
| `idioma` | `pt-BR`, `en`, `es`, `fr`, `de`, `it`, `ja`, `ko`, `ar` | a língua da página (`<html lang>`), depois a do navegador |
| `prompt` | `consent`: pergunta de novo mesmo se o jogador já autorizou | — |
| `rotulo` | o texto para leitores de tela (no `proprio`, sempre ponha um) | "Entrar com Plicflix" na língua |
| `marca` | outro endereço para o logo (se o seu `img-src` não liberar a CDN) | `https://sdk.plicflix.com/marca/…` |

**Pelo JavaScript**, o mesmo elemento sai com `Plicflix.botaoEntrar("#onde", {
href, estilo, tema, tamanho, forma, largura, texto, idioma, cliente, volta })`,
que devolve o elemento.

**O evento do clique** (sem `href`): antes de sair para o plicflix, o elemento
dispara `plicflix-entrar`, que pode ser cancelado. Com `preventDefault()`, o
seu código cuida do clique, por exemplo para salvar algo antes.

## 5. O seu próprio botão

```html
<plicflix-entrar href="/api/plicflix/oauth" estilo="proprio" rotulo="Entrar com Plicflix">
  <span class="meu-botao">
    <img src="https://sdk.plicflix.com/marca/plicflix-icone.webp" alt="" width="22" height="22">
    Jogar com a minha conta Plicflix
  </span>
</plicflix-entrar>
```

O que estiver dentro do elemento aparece do jeito que **você** estilizou, com o
CSS do seu site. O elemento só faz o login, e o botão continua acessível pelo
teclado e por leitores de tela.

**Ajuste fino dos estilos oficiais:** o elemento expõe as partes `botao`,
`texto`, `logo` e `icone` para o seu CSS:

```css
plicflix-entrar::part(botao) { border-radius: 0; }      /* cantos retos */
plicflix-entrar::part(texto) { letter-spacing: .08em; }
```

**Os arquivos da marca**, para o seu botão:

| arquivo | uso |
|---|---|
| `https://sdk.plicflix.com/marca/plicflix-icone.webp` | o ícone quadrado (o "P"), 192×192 |
| `https://sdk.plicflix.com/marca/plicflix-claro.webp` | o logo para **fundo escuro** |
| `https://sdk.plicflix.com/marca/plicflix-escuro.webp` | o logo para **fundo claro** |

## 6. As regras da marca

- **Use o botão pronto** sempre que der. Ajuste só o que as opções oferecem.
- **No seu próprio botão:**
  - o nome é sempre "Plicflix";
  - o logo e o ícone vão sem mudanças: sem esticar, recolorir ou cortar;
  - o texto diz claramente que o login é com o plicflix.
- **Dê espaço:** deixe pelo menos 12 px livres em volta. No login, ponha o botão
  junto das outras formas de entrar, com um "ou" no meio.
- **Só para o plicflix:** o botão leva sempre ao login do plicflix. Não use para
  outra ação.
- **Tema certo:** em fundo escuro, `destaque` ou `solido`. Em fundo claro,
  `simples` ou `destaque` com `tema="claro"`.

## 7. Detalhes técnicos

- **Estilo isolado (shadow DOM):** o CSS do seu site não quebra o botão, e o do
  botão não vaza no site.
- **CSP:**
  - o estilo entra por `adoptedStyleSheets`, que não precisa de
    `style-src 'unsafe-inline'`;
  - o logo vem de `https://sdk.plicflix.com`. Libere essa origem no
    `img-src`, ou use `marca` com uma cópia sua. Se o logo não carregar, o nome
    aparece escrito no lugar;
  - o script é o seu `/plicflix.js` (`script-src 'self'`) ou a CDN.
- **Acessibilidade:**
  - é um `<button>` (ou um `<a>`, com `href`) de verdade, com `aria-label` na
    língua;
  - tem o foco visível;
  - respeita "reduzir movimento" (sem o reflexo).
- **Peso:** o elemento está dentro do plicflix.js, sem nenhum arquivo a mais.
  Só o logo é baixado, uns 35 KB.

Exemplo completo com todos os estilos: `sdk/exemplos/botao/index.html` (no
pacote do SDK).