Mercure-Hub: サブスクライバーの認証

このドキュメントははじめにガイドの一部です。完全なガイドはこちらからご覧いただけます：Mercure-hubの始め方。

👋 Stackhero ドキュメントへようこそ！

Stackhero では、リアルタイムデータ配信をシンプルかつ信頼性高く実現する、フルマネージドの Mercure-Hub cloud サービスをご提供しています。主な特長は以下の通りです：

• リクエスト数・メッセージサイズ無制限で、柔軟な運用が可能です。
• HTTPS 対応の カスタムドメイン（例：https://real-time.your-company.com）を標準搭載。
• ワンクリックアップデートで、常に最新の状態を簡単に維持できます。
• プライベートかつ専用インフラ上での高いパフォーマンスと強固なセキュリティ。
• 複数リージョン対応：🇪🇺 ヨーロッパおよび🇺🇸 USAで低遅延配信を実現。

すぐに利用開始可能：わずか5分で Mercure-Hub cloud hosting 環境を立ち上げ、アプリケーションへのリアルタイム更新配信をスタートできます。

前の例では、サブスクライバーは認証されておらず、Stackheroダッシュボードで「匿名サブスクライバー」を許可する必要がありました。

サブスクライバーを認証するには、Stackheroダッシュボードで定義された「Subscriber JWT key」を使用してJWS（JSON Web Signature）を生成します。JWSは、ブラウザのクッキーまたはauthorizationヘッダーを使用して送信されます。

Server-Sent Events APIはカスタムヘッダーの定義をサポートしていないため、クッキーを使用する必要があります。ただし、クッキーを使用するには、Mercure-hubサーバーとクライアントが同じドメイン（またはサブドメイン）を共有する必要があります。

異なるドメイン間でSSEを使用したい場合は、ヘッダー定義を可能にするEventSourceポリフィルを検討してください。https://github.com/Yaffle/EventSourceで利用可能なオプションがあります。

まず、バックエンドでクライアント用のJWSを生成します。例はbackend/subscriberJwsGenerator.jsにあります。サブスクライバーJWTを入力し、node subscriberJwsGenerator.jsを使用してスクリプトを実行します。

次に、フロントエンドのファイルfrontend/subscriberWithAuthorization.htmlで、エンドポイントと生成されたJWSを入力します。ブラウザでファイルを開くと、Mercure-hubが認証付きで動作します！

Stackheroダッシュボードで「匿名サブスクライバーを許可」をオフにするのを忘れないでください！