Website-Widget

Binden Sie eine Schaltfläche "Mit Discord anmelden" in eine beliebige Website ein. Die Mitglieder verifizieren sich über Ihre Website und erhalten automatisch ihre Discord-Rolle.

Übersicht

Das Restore Hub Widget ermöglicht Discord OAuth2 auf externen Websites. Anstatt Mitglieder zu einer separaten Verifizierungs-URL zu schicken, können Sie eine Schaltfläche direkt auf Ihrer Website einbetten. Wenn ein Mitglied darauf klickt, öffnet sich ein Popup für die Discord-Autorisierung. Nach der Autorisierung schließt sich das Popup und das Mitglied erhält seine verifizierte Rolle - und das alles, ohne Ihre Website zu verlassen.

Dies ist nützlich für:

• Spielstartprogramme oder Dashboards, die Discord SSO benötigen
• Community-Websites, die Inhalte hinter der Discord-Mitgliedschaft verbergen
• Schaufenster, die überprüfen, ob Käufer auf Ihrem Discord-Server sind

Einrichtung

NPM-Paket

npm installieren @restorehub/widget

importieren { RestoreHubWidget } von "@restorehub/widget";

const widget = new RestoreHubWidget({
  serverSlug: "ihr-server-slug",
  onSuccess: (Benutzer) => {
    console.log("Verifiziert:", user.discordUsername);
  },
  onError: (err) => {
    console.error("Verifizierung fehlgeschlagen:", err);
  },
});

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

Skript-Tag (kein Erstellungsschritt)

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

Konfigurationsoptionen

| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
| serverSlug | string | required | Der Verifizierungs-Slug Ihres Servers |
| buttonText | string | "Login mit Discord" | Text, der auf der Schaltfläche angezeigt wird |
| buttonColor | string | "#5865F2" | Hintergrundfarbe der Schaltfläche (hex) |
| textColor | string | "#FFFFFF" | Button-Textfarbe (hex) |
| theme | "hell" | "dunkel" | "dunkel" | Widget-Thema |
| onSuccess | function | - | Wird nach erfolgreicher Überprüfung mit Benutzerdaten aufgerufen |
| onError | function | - | Wird bei fehlgeschlagener Verifizierung mit Fehler aufgerufen |
| onClose | function | - | Wird aufgerufen, wenn das Popup geschlossen wird, ohne es zu beenden |

Aktivieren des Widgets in Ihrem Dashboard

Bevor das Widget funktioniert, müssen Sie es in Ihren Servereinstellungen aktivieren:

1. Gehen Sie zu Servereinstellungen → Registerkarte Widget.
2. Schalten Sie "Widget aktivieren" ein.
3. Fügen Sie die Domain Ihrer Website zumErlaubte Ursprünge liste (z. B. https://yoursite.com). Dadurch wird verhindert, dass nicht autorisierte Websites Ihr Widget einbetten können.
4. Kopieren Sie den angezeigten Server-Slug und verwenden Sie ihn in der Widget-Konfiguration.
5. Konfigurieren Sie optional eine benutzerdefinierte Rolle, die Sie über das Widget zuweisen können (getrennt von der verifizierten Hauptrolle).

Warnung: Fügen Sie Ihre Domäne immer zu Erlaubte Ursprünge hinzu. Andernfalls werden herkunftsübergreifende Anfragen von Ihrer Website von der API blockiert.

Sicherheit

Das Widget verwendet dieselbe Sicherheitspipeline wie die Standardüberprüfung - VPN-Erkennung, Alt-Erkennung, Firewall-Regeln und Captcha kommen alle zum Einsatz. Der einzige Unterschied ist der Einstiegspunkt (Ihre Website anstelle einer Restore Hub URL).

Popup-Blocker können mit dem Widget interferieren. Das Widget behandelt dies, indem es einen Ausweichlink anzeigt, wenn das Popup blockiert wird.

Welche Daten werden zurückgegeben?

Bei Erfolg erhält der "onSuccess"-Callback:

{
  discordUserId: string;
  discordUsername: string;
  email: string | null;
  avatar: string | null;
  verified: boolean; // true wenn Rolle zugewiesen wurde
}