1. JSSアプリからのユーザー認証

ウォークスルー

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore Services Client(SSC)には認証サービスが含まれており、JSSアプリケーションでSitecoreにログインし、RESTリクエストを使って .ASPXAUTHクッキーを設定することができます。

!注SSC認証サービスはSSL/TLS接続を必要とし、ローカル開発のためにSitecoreサイト用の証明書とSSLバインディングを設定する必要があります。JSSアプリからSSC認証を試みる前に、HTTPSプロトコルを使ってSitecoreインスタンスにアクセスすることは、セキュリティ警告があっても動作するはずです。

JSSサンプルアプリで認証とセキュリティをテスト・探索するには、Sitecore内でユーザーと保護されたルートを作成する必要があります。

!重要以下の手順では、JSSアプリケーションをSitecoreにインポートする必要があります。

このウォークスルーでは、以下の方法を説明します:

  • エクストラネットユーザーを作成する
  • 保護されたルートを作成する
  • JSSアプリをSSC認証サービスで認証するように設定してください

エクストラネットユーザーを作成する

Sitecoreにログインするには、ユーザーを作成する必要があります。

ユーザーを作成するには:

  1. SitecoreにログインしてLaunchpadにアクセスしてください。
  2. アクセス管理セクションで**、ユーザーマネージャー**をクリックします。
  3. リボンの上で「 **新」**をクリックします。
  4. 以下のフィールドを指定します:
    • ユーザー名 - お好きなユーザー名を入力してください。
    • ドメイン - エクストラネットを選択します。
    • メール - 有効なメールアドレスを入力してください。
    • パスワード - お好きなパスワードを入力してください。
  5. 「次へ」をクリックしてから**「閉じる**」をクリックしてください。

保護されたルートを作成する

JSSアプリからSitecore認証サービスで認証をテストするには、少なくとも1つの保護ルートが必要で、その保護ルートはユーザーがコンテンツにアクセスする前にログインする必要があります。

保護されたルートを作成する方法:

  1. SitecoreにログインしてLaunchpadにアクセスしてください。
  2. コンテンツ編集セクションで「コンテンツエディター」をクリックしてください。
  3. コンテンツツリーで、例えばJSSアプリの Home 項目に /sitecore/content/JssReactWeb/homeに移動します。
  4. Homeアイテムを右クリックしてから「挿入」→「拡張ルート」をクリックします。
  5. ルートの名前を入力してください。
  6. 新しいルートが選択されたまま、 セキュリティ タブの プリセット セクションで「 ログイン必須 」チェックボックスを選択します。
  7. OKをクリックします。
  8. 変更点を公開してください。

JSSアプリをSSC認証サービスで認証するように設定してください

SSC認証サービスを使って、JSSアプリに簡単なログイン/ログアウト機能を追加できます。

アプリケーションがどこで実行されているかによって認証方法は3つあります。

Sitecoreインスタンスに対してローカル開発中に認証する

開発中にSitecoreに接続されたJSSアプリケーションを実行する際、ローカルサーバーがアプリを提供し、アプリはブラウザ上でレンダリングされますが、SSC認証サービス要求はリモートのSitecoreインスタンスに送信されます。

接続モードでアプリケーションを実行しながら認証するには:

  1. scjssconfig.jsonファイルで、リモートSitecoreホストのURLをHTTPSプロトコルに切り替えてSSLを使用するように設定します。例えば、https://JssReactWeb.

  2. アプリケーション構成では、ヘッダーをAccess-Control-Allow-HeadersとAccess-Control-Allow-Credentials:

  3. SSC認証サービスは、OPTIONSプリフライトのクロスオリジンリクエスト(CORS)を標準でサポートしておらず、404応答を生じさせるため、リクエストはURLでエンコードされたボディを使ってログインサービスに送信し、JSON送信しないことを必ず確認してください。例えば:

    // an example of sending a URL-encoded body using the fetch API (JavaScript)

    import queryString from 'query-string';

    const payload = { domain: 'extranet', username: 'test', password: 'b' }

    fetch('https://site.core.local/sitecore/api/ssc/auth/login?sc\_apikey={DCE1069B-36E8-4A66-946E-C1B07071C38C}', { headers: { Accept: 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', }, credentials: 'include', method: 'POST', body: queryString.stringify(payload), }).then((response) => { console.log(response); });

統合されたJSSアプリで認証

アプリケーションを統合モードで実行する場合、SSC認証サービスへの呼び出しはアプリケーションと同じホスト名に対して行われ、追加のセットアップは不要です。

認証が正しく動作するために:

ヘッドレスでサーバーサイドレンダリングされたJSSアプリで認証する

サーバー サイドでJSSアプリケーションをヘッドレスレンダリングする際、プロキシシステムはCORSの問題なくSSC認証サービスや .ASPXAUTHクッキーへのリクエストをプロキシします。

認証が正しく動作するために:

  1. config.jsファイルで、apiHostをHTTPSプロトコルに更新します。例えば、https://JssReactWeb.
  2. プライベート署名済みの証明書を使って開発中のSitecoreインスタンスにプロキシする場合は、SSL証明書の検証問題を防ぐための正しい設定をしているか確認してください:

    • Node.js用のSitecore CA証明書を設定してください。

    • または、config.jsファイル内でプロキシオプションでsecureをfalseに設定してSSL検証を完全に無効にしてください。例えば:

      proxyOptions: { secure: false }

      !重要本番環境でSSL検証を無効にしないでください。これによりソリューションが安全でなくなります。

この記事を改善するための提案がある場合は、 お知らせください!