翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# チャットの開始時にコンタクトコントロールパネル (CCP) のエージェントに問い合わせ属性を渡す
<a name="pass-contact-attributes-chat"></a>

[コンタクトの属性](what-is-a-contact-attribute.md)を使用して、コミュニケーションウィジェットを使用しているコンタクトに関する情報をキャプチャできます。その後、問い合わせコントロールパネル (CCP) でその情報をエージェントに表示できます。あるいは、フロー内の他の場所でも使用できます。

例えば、「ようこそ」メッセージの中で顧客の名前を言うようにフローをカスタマイズできます。または、アカウント/メンバー ID、名前やメールなどの顧客識別子、問い合わせに関連付けられたその他のメタデータなど、自身のビジネスに固有の属性を使用できます。

## コミュニケーションウィジェットにコンタクトの属性を渡す方法
<a name="how-to-contact-attributes-chatwidget"></a>

1. コミュニケーションウィジェットでセキュリティをまだ有効にしていない場合、「[Amazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する](add-chat-to-website.md)」の説明に従って有効にします。

   1. ステップ 2 の **[Add security for your chat widget]** (チャットウィジェットでのセキュリティの追加) で、**[Yes]** (はい) を選択します。

   1. ステップ 3 では、セキュリティキーを使用して JSON ウェブトークンを生成します。

1. 問い合わせ属性を JWT のペイロードに `attributes` クレームとして追加します。

   Python で、問い合わせ属性を持つ JWT を生成する方法の例は次のとおりです。
**注記**  
JWT は前提条件としてインストールする必要があります。インストールするには、ターミナルで `pip install PyJWT` を実行します。

   ```
   import jwt 
   import datetime 
   CONNECT_SECRET = "{{your-securely-stored-jwt-secret}}" 
   WIDGET_ID = "widget-id" 
   JWT_EXP_DELTA_SECONDS = 500
   
   payload = { 
   'sub': WIDGET_ID, 
   'iat': datetime.datetime.utcnow(), 
   'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
   'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
   header = { 'typ': "JWT", 'alg': 'HS256' } 
   encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
   ```

   ペイロードでは、文字列キー `attributes` (そのまま、すべて小文字) を作成し、オブジェクトをその値にする必要があります。そのオブジェクトには、文字列と文字列のキーと値のペアが必要です。いずれかの属性に文字列以外のものが渡されると、チャットは開始されません。

   コンタクト属性は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes) API によって設定された制限に従う必要があります。
   + キーの長さは 1 以上である必要があります
   + 値の長さは最短の場合 0 でも構いません

オプションで、ペイロードの [SegmentAttributeValue](https://docs.aws.amazon.com/connect/latest/APIReference/API_SegmentAttributeValue.html) オブジェクトマップに [segmentAttributes] 文字列を追加することができます。属性は標準 Connect Customer 属性です。フローでアクセスできます。コンタクト属性は、[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes) API によって設定された制限に従う必要があります。

## 代替方法: スニペットコードから直接コンタクト属性を渡す
<a name="pass-attributes-directly"></a>

**注記**  
スニペットコードで渡されるすべてのコンタクト属性キーの前には `HostedWidget-` が付加されます。次の例の場合、エージェント側はキーと値のペアを `HostedWidget-foo: 'bar'` として認識します。
これらの属性は、`HostedWidget-` プレフィックスでスコープが指定されますが、依然としてクライアント側では変更可能 (ミュータブル) です。フローで PII または変更不可能 (イミュータブル) なデータが必要となる場合は、JWT 設定を使用してください。

次の例は、ウィジェットのセキュリティを有効にせずに、スニペットコードから直接コンタクト属性を渡す方法を示しています。

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', '{{widgetId}}');
  amazon_connect('snippetId', '{{snippetId}}');
  amazon_connect('styles', /* ... */);
  // ...

  amazon_connect('contactAttributes', {
   {{foo}}: '{{bar}}'
  })
<script/>
```

### フローで属性を使用する
<a name="contact-flow-usage-chat"></a>

次の画像で示すように、[[コンタクト属性の確認]](check-contact-attributes.md) フローブロックは、**[ユーザー定義]** の名前空間を使用してこれらの属性へのアクセスを提供します。このフローブロックを利用して、分岐ロジックを追加できます。フルパスは `$.Attributes.HostedWidget-{{attributeName}}` です。

![Valid プロンプトと Invalid プロンプトに分岐するフローブロックを示した画像。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## 注意すべき点
<a name="contact-attributes-chatwidget-important-notes"></a>
+ コミュニケーションウィジェットには、エンコードされたトークン全体に対して 6,144 バイトの制限があります。JavaScript は UTF-16 エンコーディングを使用していて、1 文字あたり 2 バイトが使用されるため、`encoded_token` の最大サイズは 3,000 文字前後になるはずです。
+ encoded\_token を `callback(data)` に渡す必要があります。`authenticate` スニペットには追加の変更は必要ありません。例: 

  ```
  amazon_connect('authenticate', function(callback) {
    window.fetch('/token').then(res => {
      res.json().then(data => {
        callback(data.data);
      });
    });
  });
  ```
+ JWT を使用して問い合わせ属性を渡すと、データの整合性が保証されます。共有のシークレットを保護し、適切なセキュリティのプラクティスに従う限り、不正行為者がデータを操作できないことが保証されます。
+ 問い合わせ属性は JWT でのみエンコードされ、暗号化されないため、属性をデコードして読み取ることができます。
+ [シミュレートされたチャットエクスペリエンス](chat-testing.md#test-chat)を使用してチャットエクスペリエンスをテストし、コンタクト属性を含める場合は、次の画像に示すように、キーと値の両方を引用符で囲んでください。  
![[テスト設定] ページ、引用符で囲まれたコンタクト属性キー、引用符で囲まれた値。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/test-chat-contact-attributes.png)