メインコンテンツへスキップ
コントロール UI は、ゲートウェイによって提供される小さな Vite + Lit シングルページ アプリです。
  • デフォルト: http://<host>:18789/
  • オプションの接頭辞: gateway.controlUi.basePath を設定します (例: /openclaw)
同じポート上の ゲートウェイ WebSocket と直接通信します。

クイックオープン (ローカル)

ゲートウェイが同じコンピュータ上で実行されている場合は、次のファイルを開きます。 ページの読み込みに失敗した場合は、まずゲートウェイを起動します: openclaw gateway 認証は、WebSocket ハンドシェイク中に次の方法で提供されます。
  • connect.params.auth.token
  • connect.params.auth.password ダッシュボード設定パネルには、現在のブラウザー タブ セッションと選択したゲートウェイ URL のトークンが保持されます。パスワードは保持されません。 オンボーディング ウィザードはデフォルトでゲートウェイ トークンを生成するため、最初の接続時にここに貼り付けます。

デバイスのペアリング (最初の接続)

新しいブラウザまたはデバイスからコントロール UI に接続すると、ゲートウェイ 同じテールネット上にいる場合でも、1 回限りのペアリング承認が必要です gateway.auth.allowTailscale: true と。これは防止するためのセキュリティ対策です 不正アクセス。 表示される内容: 「切断されました (1008): ペアリングが必要です」 デバイスを承認するには:
開く:
  • https://<magicdns>/ (または構成された gateway.controlUi.basePath)
デフォルトでは、Control UI/WebSocket Serve リクエストは Tailscale ID ヘッダー経由で認証できます。 (tailscale-user-login) gateway.auth.allowTailscaletrue の場合。オープンクロー x-forwarded-for アドレスを解決することで身元を検証します。 tailscale whois をヘッダーと照合し、次の場合にのみこれらを受け入れます。 リクエストは Tailscale の x-forwarded-* ヘッダーでループバックにヒットします。セット gateway.auth.allowTailscale: false (または強制 gateway.auth.mode: "password") トラフィックを提供する場合でもトークン/パスワードを要求したい場合。 トークンレス サーブ認証では、ゲートウェイ ホストが信頼されていることが前提となります。信頼できないローカルの場合 コードはそのホスト上で実行される可能性があり、トークン/パスワード認証が必要です。

テールネット + トークンにバインド

次に開きます:
  • http://<tailscale-ip>:18789/ (または構成された gateway.controlUi.basePath)
トークンを UI 設定に貼り付けます (connect.params.auth.token として送信)。

安全でない HTTP

プレーン HTTP (http://<lan-ip> または http://<tailscale-ip>) 経由でダッシュボードを開いた場合、 ブラウザは 非安全なコンテキストで実行され、WebCrypto をブロックします。デフォルトでは、 OpenClaw ブロック デバイス ID を持たない UI 接続を制御します。 推奨される修正: HTTPS (Tailscale Serve) を使用するか、UI をローカルで開きます。- https://<magicdns>/ (サーブ)
  • http://127.0.0.1:18789/ (ゲートウェイ ホスト上)
安全でない認証の切り替え動作:
allowInsecureAuth は、コントロール UI デバイスの ID またはペアリングのチェックをバイパスしません。 ガラス破りのみ:
dangerouslyDisableDeviceAuth は、コントロール UI デバイス ID チェックを無効にし、 重大なセキュリティの低下。緊急使用後はすぐに元に戻してください。 HTTPS セットアップのガイダンスについては、Tailscale を参照してください。

UI の構築

ゲートウェイは、dist/control-ui からの静的ファイルを提供します。以下を使用して構築します。
オプションの絶対ベース (固定資産 URL が必要な場合):
ローカル開発の場合 (別の開発サーバー):
次に、UI で Gateway WS URL (例: ws://127.0.0.1:18789) を指定します。

デバッグ/テスト: 開発サーバー + リモート ゲートウェイ

コントロール UI は静的ファイルです。 WebSocket ターゲットは構成可能であり、 HTTPオリジンとは異なります。これは、Vite 開発サーバーが必要な場合に便利です ローカルではありますが、ゲートウェイは別の場所で実行されます。
  1. UI 開発サーバーを起動します: pnpm ui:dev
  2. 次のような URL を開きます。
オプションのワンタイム認証 (必要な場合):
注:- gatewayUrl はロード後に localStorage に保存され、URL から削除されます。
  • token は URL フラグメントからインポートされ、現在のブラウザー タブ セッションおよび選択されたゲートウェイ URL の sessionStorage に保存され、URL から削除されます。 localStorage には保存されません。
  • password はメモリ内にのみ保持されます。
  • gatewayUrl が設定されている場合、UI は構成または環境の資格情報にフォールバックしません。 token (または password) を明示的に指定します。明示的な資格情報が欠落しているとエラーになります。
  • ゲートウェイが TLS (Tailscale Serve、HTTPS プロキシなど) の背後にある場合は、wss:// を使用します。
  • gatewayUrl は、クリックジャッキングを防ぐために、トップレベル ウィンドウ (埋め込まれていない) でのみ受け入れられます。
  • 非ループバック コントロール UI 展開では gateway.controlUi.allowedOrigins を設定する必要があります 明示的に(完全な起源)。これには、リモート開発セットアップが含まれます。
  • gateway.controlUi.dangerouslyAllowHostHeaderOriginFallback=true を有効にします ホストヘッダー起点フォールバック モードですが、危険なセキュリティ モードです。
例:
リモート アクセス設定の詳細: リモート アクセス