---
title: "WidgetsProvider"
slug: "widgetsprovider"
abstract: "WidgetsProviderの詳細は、Sitecore Search JS SDK for Reactのルートレベルのプロバイダーです。"
---
# WidgetsProvider

WidgetsProviderは、Sitecore Search JS SDKを用いてプラットフォームと統合されたReactアプリケーションのルートレベルのプロバイダー Searchです。内部コンポーネントでSDKクエリフックの使用を可能にします。

## クッキー

JS SDKは、ほとんどのSearch顧客がサブドメイン間でクッキーを共有するため、訪問者のブラウザのドメインレベルでクッキーを設定します。もしあなたのドメインがクッキーを制限するトップレベルドメインや頂点ドメインのサブドメインであれば、publicSuffixの値をtrueに設定する必要があります。

publicSuffixのデフォルト値はfalseです。

## 認証

認証のためには、WidgetsProviderに認証情報属性を追加する必要があります。属性はドメインの設定方法によってSearch異なります。

認証するには:

-   Searchをサブドメインとして設定しているなら、 serviceHostを使いましょう。
-   Searchをサブドメインとして設定[していない](https://doc.sitecore.com/search/ja/developers/search-js-sdk-for-react/working-with-js-sdk-and-ui-components/authenticate-without-domain-set-up.html "Authenticate without domain set up")場合は、[APIキーで取得](https://doc.sitecore.com/search/en/developers/search-developer-guide/en/get-an-access-token-and-a-refresh-token.html)したAPI keyまたはBearer tokenを使いましょう。

## クッキーへの同意

デフォルトでは、JS SDKは訪問者のやり取りを追跡するクッキーを設定し、パーソナライズされた検索結果を提供します。この同意は、WidgetProviderのtrackConsentプロパティを使って管理できます。

訪問者のやり取りを追跡するクッキーの同意を無効にするには:

-   WidgetProviderコンポーネントでtrackConsentをfalseに設定してください。これにより、以前に設定されたクッキーも削除されます。

## Requestミドルウェア

WidgetProviderは非同期関数をrequestMiddlewareの値として受け入れます。このオプションプロパティを使って、リクエスト前に関数をミドルウェアとして実行します。

以下のコードブロックは実装を示しています:

<WidgetsProvider
 requestMiddleware={(<define params>) => { <middleware code> }}
>
 ...sdk code
</WidgetsProvider>

## インポートパス

import { WidgetsProvider } from '@sitecore-search/react';

## 例

以下のコードブロックは、ドメインがSearchを設定していない場合に認証用の認証情報を持つWidgetsProviderコンポーネントを示しています。

> !注以下のコードブロックでは、publicSuffixがtrueに設定されています。これはこの実装の最上位ドメインがクッキーを制限しているためです。
> 
> header\_psfooter\_rec構成に応じてすべてのページに表示されます。

import { WidgetsProvider }from "@sitecore-search/react";
import MyGlobalPreviewSearch from "./widget\_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget\_components/myGlobalRecommendationWidget";

const tracking = true;

const Root = () => {
 return (
 <WidgetsProvider
 trackConsent={tracking}
 publicSuffix='true'
 env='<environment>'
 customerKey='<customer key>'
 apiKey='<api key>'
 requestMiddleware={(<define params>) => { <middleware code> }}
 >

 <header>
 <h1>My Application</h1>
 <MyGlobalPreviewSearch rfkId="header\_ps" />
 </header>

 <div class="content">
 OTHER WIDGET COMPONENTS GO HERE
 </div>

 <footer>
 <MyGlobalRecommendationWidget rfkId="footer\_rec" />
 </footer>

 </WidgetsProvider>
)};