Skip to content

features

ウェブサイト・ウィジェット

任意のウェブサイトに「Discordでログイン」ボタンを埋め込みます。メンバーはあなたのサイトを通して認証し、自動的にDiscordの役割を受け取ります。

概要

Restore Hub ウィジェットは、外部ウェブサイトで Discord OAuth2 を有効にします。メンバーを別の認証 URL に送る代わりに、サイトに直接ボタンを埋め込むことができます。メンバーがクリックすると、Discord 認証のためのポップアップが開きます。認証後、ポップアップは閉じ、メンバーは認証されたロールを受け取ります。

これは次のような場合に役立つ：

  • Discord SSOを必要とするゲームランチャーやダッシュボード
  • Discord会員の背後にコンテンツをゲートするコミュニティサイト
  • 購入者があなたのDiscordサーバーにいることを確認するストアフロント

インストール

NPMパッケージ

npm install @restorehub/widget
インポート { RestoreHubWidget } from "@restorehub/widget"；

const widget = new RestoreHubWidget({
  serverSlug: "your-server-slug"、
  onSuccess: (user) => {
    console.log("Verified:", user.discordUsername)；
  },
  onError: (err) => { { console.error("検証に失敗しました。
    console.error("Verification failed:", err)；
  },
});

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

スクリプトタグ（ビルドステップなし）

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

設定オプション

| オプション|タイプ|デフォルト|説明
|---|---|---|---|
| serverSlug｜文字列｜必須｜サーバーの認証スラッグ
| ボタンテキスト｜文字列｜"Login with Discord" ボタンに表示されるテキストです。
| buttonColor | string | "#5865F2" ボタンの背景色(16進数)
| 文字列｜"#FFFFFF"| ボタンのテキスト色（16進数
| テーマ｜"light"｜"dark"｜"ダーク"｜ウィジェットテーマ
| onSuccess｜関数｜-｜認証成功後にユーザーデータと共に呼び出されます。
| onError｜関数｜-｜検証に失敗した場合にエラーと共に呼び出されます。
| onClose｜関数｜-｜ポップアップが完了せずに閉じられたときに呼び出されます。

ダッシュボードでウィジェットを有効にする

ウィジェットが動作する前に、サーバー設定でウィジェットを有効にする必要があります：

  1. サーバー設定 → ウィジェットタブに移動します。
  2. ウィジェットを有効にする」をオンに切り替える。
  3. あなたのウェブサイトのドメインを許可された起源リスト (例: https://yoursite.com)。これにより、許可されていないサイトがあなたのウィジェットを埋め込むことを防ぎます。
  4. 表示されたサーバスラッグをコピーして、ウィジェットのコンフィギュレーションで使用してください。
  5. オプションで、ウィジェットを介して割り当てるカスタム・ロールを設定します(メインの検証済みロールとは別に)。

警告あなたのドメインを必ずAllowed Originsに追加してください。これをしないと、あなたのサイトからのクロスオリジンリクエストはAPIによってブロックされます。

セキュリティ

ウィジェットは、標準的な検証と同じセキュリティパイプラインを使用します - VPN検出、alt検出、ファイアウォールルール、およびキャプチャがすべて適用されます。唯一の違いは、エントリーポイント（レストアハブのURLではなく、あなたのウェブサイト）です。

ポップアップ・ブロッカーがウィジェットを妨害することがある。ウィジェットは、ポップアップがブロックされた場合、フォールバックリンクを表示することでこれを処理します。

返されるデータ

成功すると、`onSuccess` コールバックが返される：

{
  discordUserId: string；
  discordUsername: string；
  email: string | null；
  avatar: string | null；
  verified: boolean; // 役割が割り当てられていればtrue
}
ウェブサイト・ウィジェット — Restore Hub Docs | Restore Hub