Skip to content

features

Widget del sitio web

Inserte un botón "Iniciar sesión con Discord" en cualquier sitio web. Los miembros se verifican a través de su sitio y reciben su rol de Discord automáticamente.

Visión general

El widget Restore Hub permite Discord OAuth2 en sitios web externos. En lugar de enviar a los miembros a una URL de verificación independiente, puedes incrustar un botón directamente en tu sitio. Cuando un miembro hace clic en él, se abre una ventana emergente para la autorización de Discord. Después de la autorización, la ventana emergente se cierra y el miembro recibe su rol verificado - todo sin salir de su sitio web.

Esto es útil para:

  • Lanzadores de juegos o cuadros de mando que desean Discord SSO
  • Sitios web comunitarios que ocultan contenidos tras ser miembro de Discord
  • Escaparates que verifican que los compradores están en tu servidor Discord

Instalación

Paquete NPM

npm install @restorehub/widget
import { RestoreHubWidget } de "@restorehub/widget";

const widget = new RestoreHubWidget({
  serverSlug: "tu-servidor-slug",
  onSuccess: (usuario) => {
    console.log("Verificado:", user.discordUsername);
  },
  onError: (err) => {
    console.error("Error en la verificación:", err);
  },
});

widget.mount("#verificar-botón-contenedor");

Etiqueta de script (sin paso de compilación)

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

Opciones de configuración

| Opción Tipo Predeterminado Descripción
|---|---|---|---|
serverSlug | string | required | El slug de verificación de su servidor | buttonText | string | "Iniciar sesión con Discord" | Texto mostrado en el botón
| ButtonText Cadena "Iniciar sesión con Discord" Texto que aparece en el botón
| buttonColor cadena "#5865F2" color de fondo del botón (hex)
| Color del texto del botón (hexadecimal) | Color del texto del botón (hex)
| Tema del widget: "claro", "oscuro", "oscuro"
| onSuccess | function | - | Llamado con los datos del usuario después de una verificación exitosa |
| onError | function | - | Llamada con error si falla la verificación | | onClose | function
| onClose | function | - | Llamado cuando el popup se cierra sin completar | | | Llamado con error si la verificación falla

Activar el widget en el panel de control

Para que el widget funcione, debes activarlo en la configuración de tu servidor:

  1. Vaya a Configuración del servidor → pestaña Widget.
  2. Active la opción "Activar widget".
  3. Añada el dominio de su sitio web aOrígenes permitidos (por ejemplo, https://yoursite.com). Esto impide que sitios no autorizados incrusten tu widget.
  4. Copie el slug del servidor mostrado y utilícelo en la configuración del widget.
  5. Opcionalmente, configure un rol personalizado para asignar a través del widget (independiente del rol verificado principal).

Advertencia: Añada siempre su dominio a Orígenes permitidos. De lo contrario, la API bloqueará las solicitudes de origen cruzado procedentes de su sitio web.

Seguridad

El widget utiliza el mismo proceso de seguridad que la verificación estándar: detección VPN, detección alt, reglas de cortafuegos y captcha. La única diferencia es el punto de entrada (tu sitio web en lugar de una URL de Restore Hub).

Los bloqueadores de ventanas emergentes pueden interferir con el widget. El widget gestiona esta situación mostrando un enlace alternativo si se bloquea la ventana emergente.

Qué datos se devuelven

En caso de éxito, la llamada de retorno `onSuccess` recibe:

{
  discordUserId: cadena;
  discordUsername: cadena;
  email: string | null
  avatar: string | null;
  verified: boolean; // true si el rol fue asignado
}
Widget del sitio web — Restore Hub Docs | Restore Hub