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

チュートリアル: Sitecore認証をテストするためのユーザーとページの作成

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

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

Sitecore Services Client (SSC) には、JSSアプリケーションで呼び出してSitecoreにログインし、RESTリクエストを使用して .ASPXAUTH Cookieを設定できる認証サービスが含まれています。

メモ

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

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

大事な

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

このチュートリアルでは、次の方法について説明します。

  • 管理画面のユーザーを作成する

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

  • SSC認証サービスで認証するようにJSSアプリを構成する

管理画面のユーザーを作成する

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

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

  1. Sitecoreにログインし、スタート画面にアクセスします。

  2. Access Managementセクションで、「User Manager」をクリックします。

  3. リボンのNewをクリックします。

  4. 次のフィールドを指定します。

    • User name - 任意のユーザー名を入力します。

    • Domain - 「 extranet」を選択します。

    • Email - 有効なメールアドレスを入力します。

    • Password - 任意のパスワードを入力します。

  5. 「 Next 」をクリックし、「 Close」をクリックします。

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

JSSアプリからSitecore Authentication Serviceを使用した認証をテストするには、コンテンツにアクセスする前にユーザーがログインする必要がある保護されたルートが少なくとも1つ必要です。

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

  1. Sitecoreにログインし、スタート画面にアクセスします。

  2. Content Editingセクションで、「Content Editor」をクリックします。

  3. コンテンツ ツリーで、JSSアプリのHome項目 ( /sitecore/content/JssReactWeb/homeなど) に移動します。

  4. Homeアイテムを右クリックし、Insert、Extended Routeの順にクリックします。

  5. ルートの名前を入力します。

  6. 新しいルートを選択したまま、SecurityタブのPresetsセクションで、Require loginチェック ボックスをオンにします。

  7. 「 OK」をクリックします。

  8. 変更を公開します。

SSC認証サービスで認証するようにJSSアプリを構成する

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

認証には、アプリケーションが実行されている場所に応じて3つの方法があります。

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

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

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

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

  2. アプリケーション設定で、ヘッダー のAccess-Control-Allow-HeadersとAccess-Control-Allow-Credentialsを設定します。

    <add name="Access-Control-Allow-Headers" value="Content-Type, Accept, X-Requested-With, Session" />
<add name="Access-Control-Allow-Credentials" value="true" />

  3. SSC Authサービスは、標準のOPTIONS Preflight Cross-Origin Request(CORS)をサポートしていないため、レスポンスが404になるため、URLエンコードされた本文を使用してログインサービスにリクエストを送信し、not 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認証サービスの呼び出しは、アプリケーションと同じホスト名に対して行われるため、それ以上の設定は必要ありません。

認証が正しく機能するためには、次のことを行います。

  • HTTPSプロトコルを使用して、SSL経由でSitecoreホストにアクセスします。たとえば、https://JssReactWeb.

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

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

認証が正しく機能するためには、次のことを行います。

  1. config.jsファイルで、HTTPSプロトコルを使用するようにapiHostを更新します。たとえば、https://JssReactWeb.

  2. プライベート署名証明書を使用して開発用Sitecoreインスタンスにプロキシする場合は、SSL証明書の検証の問題を防ぐために、正しい設定があることを確認してください。

    • Sitecore CA証明書をNode.js用に設定します。

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

        proxyOptions: {
    secure: false
  }
      大事な

      本番環境でSSL検証を無効にすると、ソリューションが安全でなくなるため、無効にしないでください。

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