このページでは、検索ウィジェットを使用してウェブサイトに検索機能を追加する方法について説明します。
始める前に
検索ウィジェットをウェブページに追加する前に、検索ウィジェットの結果を構成するから検索ウィジェットを構成してください。ウェブページで検索ウィジェットのスタイルを調整することはできません。
手順
検索ウィジェットをウェブページに追加する手順は、選択した認証タイプによって異なります。
認証トークン: ウィジェットは、コードベースが提供する JWT または OAuth トークンを使用します。トークンの生成に使用できる独自のサーバーが必要です。認証トークンは、ユーザーまたはサービス アカウントに代わって API 呼び出しを行うために使用されます。認証トークンを生成する際は、OAuth スコープ
https://www.googleapis.com/auth/cloud-platformを使用します。サービス アカウントとのサーバー間インタラクションの場合: 認可ドキュメントの サーバー間アプリケーションに OAuth 2.0 を使用するをご覧ください。
JavaScript ウェブ アプリケーションの場合: 承認のドキュメントの クライアントサイド ウェブ アプリケーション用の OAuth 2.0 をご覧ください。
公開アクセス: このウィジェットでは、検索クエリから結果を取得できるユーザーは制限されません。
認可トークンを使用するウィジェットを追加する
Google Cloud コンソールで、[Agent Builder] ページに移動します。
編集するアプリの名前をクリックします。
[Integration] をクリックします
[ウィジェット] タブをクリックします。
ウィジェットの認証タイプとして [JWT または OAuth ベース] を選択します。
ウィジェット ページのドメイン名を指定します。
ウィジェットを表示するページのドメイン名を入力します。
たとえば、ウィジェットをページ
example.com/ai.htmlとcymbal.example.com/search.htmlにコピーする場合は、ドメインとして「example.com」と入力します。サブドメインのページでのみウィジェットを動作させる場合は、cymbal.example.comを入力します。ローカルホストでウィジェットをテストする場合は、
localhostを入力します。[追加] をクリックします。
ウィジェットを表示するドメインごとに手順 6 を繰り返します。
[保存] をクリックします。
「次のコードをウェブ アプリケーションにコピーする」セクションにあるコード スニペットをコピーします。
コードベースで認証トークンを生成します。
認証トークンをウィジェットに渡すには、[次のコードをウェブ アプリケーションにコピーする] セクションにある 2 つ目のコード スニペット「
// Set authorization token」を使用し、テキスト<JWT or OAuth token provided by you backend>を認証トークンに置き換えます。現在のトークンが期限切れになる前に、前の手順を繰り返して新しいトークンを定期的に設定します。
一般公開されているウィジェットを追加する
Google Cloud コンソールで、[Agent Builder] ページに移動します。
編集するアプリの名前をクリックします。
一般公開の場合は、検索アプリがアクセス制御下のデータストアに関連付けられていないことを確認します。
[Integration] をクリックします
[ウィジェット] タブをクリックします。
ウィジェットの認証タイプとして [公開アクセス] を選択します。
ウィジェット ページのドメイン名を指定します。
ウィジェットを表示するページのドメイン名を入力します。
たとえば、ウィジェットをページ
example.com/ai.htmlとcymbal.example.com/search.htmlにコピーする場合は、ドメインとして「example.com」と入力します。サブドメイン内のページでのみウィジェットを動作させる場合は、cymbal.example.comを入力します。ローカルホストでウィジェットをテストする場合は、
localhostを入力します。[追加] をクリックします。
ウィジェットを表示するドメインごとに手順 6 を繰り返します。
[保存] をクリックします。
「次のコードをウェブ アプリケーションにコピーする」セクションにあるコード スニペットをコピーし、ウェブページに貼り付けます。