Widget do site

Incorpore um botão "Login com o Discord" em qualquer site. Os membros fazem a verificação por meio de seu site e recebem sua função no Discord automaticamente.

Visão geral

O widget Restore Hub habilita o Discord OAuth2 em sites externos. Em vez de enviar membros para um URL de verificação separado, você pode incorporar um botão diretamente em seu site. Quando um membro clica nele, um pop-up é aberto para autorização do Discord. Após a autorização, o pop-up é fechado e o membro recebe sua função verificada - tudo isso sem sair de seu site.

Isso é útil para:

• Lançadores de jogos ou painéis de controle que desejam o SSO do Discord
• Sites de comunidades que armazenam conteúdo por trás da associação ao Discord
• Vitrines que verificam se os compradores estão em seu servidor Discord

Instalação

Pacote NPM

npm install @restorehub/widget

importar { RestoreHubWidget } de "@restorehub/widget";

const widget = new RestoreHubWidget({
  serverSlug: "your-server-slug",
  onSuccess: (user) => {
    console.log("Verificado:", user.discordUsername);
  },
  onError: (err) => {
    console.error("A verificação falhou:", err);
  },
});

widget.mount("#verify-button-container");

Script Tag (sem etapa de compilação)

<script src="https://cdn.restorehub.net/widget.js"></script>
<div id="rh-widget" data-slug="your-server-slug"></div>

Opções de configuração

| Opção | Tipo | Padrão | Descrição |
|---|---|---|---|
| ServerSlug | string | obrigatório | Slug de verificação do seu servidor
| buttonText | string | "Login with Discord" | Texto exibido no botão
| buttonColor | string | "#5865F2" | Cor de fundo do botão (hexadecimal)
| textColor | string | "#FFFFFF" | Cor do texto do botão (hexadecimal)
| Tema | "light" | "dark" | "dark" | Tema do widget
| Chamada com os dados do usuário após a verificação bem-sucedida
| onError | function | - | Chamada com erro se a verificação falhar
| onClose | função | - | Chamada quando o popup é fechado sem ser concluído |

Como ativar o widget em seu painel

Para que o widget funcione, você deve ativá-lo nas configurações do servidor:

1. Vá para as configurações do servidor → guia Widget.
2. Ative a opção "Habilitar Widget".
3. Adicione o domínio de seu site ao campoOrigens permitidas (por exemplo, https://yoursite.com). Isso impede que sites não autorizados incorporem seu widget.
4. Copie o slug do servidor exibido e use-o na configuração do widget.
5. Opcionalmente, configure uma função personalizada para atribuir por meio do widget (separada da função principal verificada).

Aviso: Sempre adicione seu domínio a Allowed Origins. Sem isso, as solicitações de origem cruzada de seu site serão bloqueadas pela API.

Segurança

O widget usa o mesmo pipeline de segurança da verificação padrão: detecção de VPN, detecção de alt, regras de firewall e captcha. A única diferença é o ponto de entrada (seu site em vez de um URL do Restore Hub).

Os bloqueadores de pop-ups podem interferir no widget. O widget lida com isso mostrando um link alternativo se o pop-up for bloqueado.

Quais dados são retornados

Em caso de sucesso, a chamada de retorno `onSuccess` recebe:

{
  discordUserId: string;
  discordUsername: string;
  email: string | null;
  avatar: string | null;
  verified: boolean; // verdadeiro se a função foi atribuída
}