Widget du site web

Incorporez un bouton "Se connecter avec Discord" sur n'importe quel site web. Les membres s'identifient sur votre site et reçoivent automatiquement leur rôle Discord.

Vue d'ensemble

Le widget Restore Hub active Discord OAuth2 sur les sites web externes. Au lieu d'envoyer les membres vers une URL de vérification séparée, vous pouvez intégrer un bouton directement sur votre site. Lorsqu'un membre clique dessus, une fenêtre contextuelle s'ouvre pour demander l'autorisation de Discord. Une fois l'autorisation obtenue, la popup se ferme et le membre reçoit son rôle vérifié - le tout sans quitter votre site web.

Ceci est utile pour :

• Lanceurs de jeux ou tableaux de bord qui veulent le SSO Discord
• Sites web communautaires dont le contenu est dissimulé derrière l'appartenance à Discord
• Des vitrines qui vérifient que les acheteurs se trouvent sur votre serveur Discord

Installation

Paquet NPM

npm install @restorehub/widget

import { RestoreHubWidget } from "@restorehub/widget" ;

const widget = new RestoreHubWidget({
  serverSlug : "votre-serveur-slug",
  onSuccess : (user) => {
    console.log("Verified :", user.discordUsername) ;
  },
  onError : (err) => {
    console.error("Verification failed :", err) ;
  },
}) ;

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

Script Tag (pas d'étape de construction)

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

Options de configuration

| Option - Type - Défaut - Description - Option - Type - Défaut - Description - Option - Type - Défaut - Description - Option - Type - Défaut - Description
|---|---|---|---|
| serverSlug | string | required | Le slug de vérification de votre serveur |
| BoutonSlug - Chaîne de caractères - obligatoire - Texte affiché sur le bouton - Texte affiché sur le bouton - Texte affiché sur le bouton - Texte affiché sur le bouton - Texte affiché sur le bouton - Texte affiché sur le bouton
| buttonColor | chaîne | "#5865F2" | Couleur d'arrière-plan du bouton (hex) |
| textColor | chaîne de caractères | "#FFFFFF" | couleur de texte du bouton (hex) |
| theme | "light" | "dark" | "dark" | Thème du widget |
| onSuccess | fonction | - | Appelé avec les données de l'utilisateur après une vérification réussie |
| onError | fonction | - | Appelé avec les données de l'utilisateur si la vérification échoue
| onClose | fonction | - | Appelé lorsque la fenêtre popup est fermée sans avoir été complétée |

Activation du widget dans votre tableau de bord

Pour que le widget fonctionne, vous devez l'activer dans les paramètres de votre serveur :

1. Allez dans les paramètres du serveur → onglet Widget.
2. Activez la fonction "Activer le widget".
3. Ajoutez le domaine de votre site web au champOrigines autorisées (par exemple, https://yoursite.com). Cela permet d'éviter que des sites non autorisés n'intègrent votre widget.
4. Copier le slug du serveur affiché et l'utiliser dans la configuration du widget.
5. Il est possible de configurer un rôle personnalisé à attribuer via le widget (distinct du rôle principal vérifié).

Avertissement : Ajoutez toujours votre domaine aux Origines autorisées. Sans cela, les demandes d'origine croisée provenant de votre site seront bloquées par l'API.

Sécurité

Le widget utilise le même pipeline de sécurité que la vérification standard - la détection VPN, la détection d'altération, les règles de pare-feu et le captcha s'appliquent tous. La seule différence est le point d'entrée (votre site web au lieu d'une URL de Restore Hub).

Les bloqueurs de fenêtres contextuelles peuvent interférer avec le widget. Le widget gère ce problème en affichant un lien de repli si la fenêtre contextuelle est bloquée.

Quelles sont les données renvoyées ?

En cas de succès, le callback `onSuccess` reçoit :

{
  discordUserId : string ;
  discordUsername : string ;
  email : string | null ;
  avatar : string | null ;
  verified : boolean ; // true si le rôle a été attribué
}