LwA Web APIの使用

II:アプリとLwAの連携

→

Warning: ここではLegacy APIについて記載しています。新しいAPIについてはこちらを参照してください。

Note: Cordova, Xamarinのようなハイブリッドフレームワークを用いたアプリケーション開発を計画する場合、事前にAmazonの担当者にご相談ください。

Dash Replenishmentサービス（DRS）のAPIにアクセスするWebアプリケーションは、Login with Amazon（LwA）のアクセストークンを取得する必要があります。対象デバイスのユーザーの代理でAPIにアクセスする権利が、このトークンによって与えられます。

Login with Amazonの Web SDKを使ってLogin with Amazonの許可コード、クライアントID、リダイレクトURIを対象のWebアプリケーションに渡すには、以下の手順に従ってください。Webアプリケーションは、そのデータを使って、DRSのREST APIを呼び出すために必要なアクセストークンを取得できます。

許可の種類
セキュリティプロファイルの作成
LwA SDK for JavaScriptとの連携
許可コードグラントを使用した更新トークンとアクセストークンの取得
新しい更新トークンとアクセストークンのリクエスト
DRS APIの呼び出し
次のステップ

許可の種類

LwAはインプリシットグラントと許可コードグラントの2種類の許可をサポートしています。ただし、DRSでは、許可コードグラントが必須となっています。

セキュリティプロファイルの作成

Login with Amazonコンソールに移動し、いずれかのセキュリティプロファイルを選択します。セキュリティプロファイルがない場合は、LwAセキュリティプロファイルの作成ガイドの手順に従って作成してください。
該当するセキュリティプロファイルの [Manage] セクションで、[Web Settings] を選択します。
[Edit] ボタンをクリックし、[Allowed Origins] フィールドと [Allowed Returns URLs] フィールドに値を入力します。これらの値は、ご利用のWebサイトのホストとなっているドメインと一致している必要があります（例: http://www.example.com、http://www.example.com/login)。

LwA SDK for JavaScriptとの連携

WebサイトのLogin with Amazonボタンを表示する場所に次のコードを追加します。ボタンの選択肢は豊富に用意されていて、実際のWebサイトに最適な画像を選ぶことができます。ベストプラクティスおよび選択できる画像の一覧については、Login with Amazonのスタイルガイドを参照してください。本ガイドの目的上、この画像は、HTTPS Webサイトである必要があります。
```
 <a href="#" id="LoginWithAmazon">
 <img border="0" alt="Login with Amazon"
    src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLwA_gold_156x32" type="png"
    width="156" height="32" />
 </a>
```
（省略可能）Webサイトの「ログアウト」プロンプトを表示する場所に次のリンクを追加します。
```
 <a id="Logout">ログアウト</a>
```
ページを最新の情報に更新して、Webサイト上にボタンが表示されていることを確認します。

JavaScriptをページにロードするために、ページ内の開始<body>タグの後に、次のコードを追加します。

 <div id="amazon-root"></div>
 <script type="text/javascript">
 window.onAmazonLoginReady = function() {
       amazon.Login.setClientId('YOUR-CLIENT-ID');
       amazon.Login.setRegion('APAC'); // 製品のMarketplaceが日本の場合、追加
   };
   (function(d) {
       var a = d.createElement('script');
       a.type = 'text/javascript';
       a.async = true;
       a.id = 'amazon-login-sdk';
       a.src = 'https://api-cdn.amazon.com/sdk/login1.js';
       d.getElementById('amazon-root').appendChild(a);
   })(document);
 </script>

YOUR-CLIENT-IDを、あらかじめLogin with Amazonコンソールで作成しておいたセキュリティプロファイルのクライアントIDに置き換えます。
サイト上のLogin with Amazonボタンの後に次のJavaScriptを追加します。
```
 <script type="text/javascript">
 document.getElementById('LoginWithAmazon').onclick = function() {
     var deviceModel = 'YOUR-DEVICE-MODEL-ID';
     var serialNo = 'YOUR-DEVICE-SERIAL-NO';
     var drsScope = 'dash:replenish';
     var scopeData = new Object();
     scopeData[drsScope] = {
         device_model:deviceModel,
         serial:serialNo
     };
     var options = {
         scope:drsScope,
         scope_data:scopeData,
         response_type:'code'
     };
     amazon.Login.authorize(options, 'REDIRECT-URI');
     return false;
 };
 </script>
```
- YOUR-DEVICE-MODEL-IDは、実際のデバイスのモデルIDに置き換えます。デバイスのタイプID はAmazon開発者ポータルでのデバイスの登録プロセス中に指定しました。
- YOUR-DEVICE-SERIAL-NOは、対象デバイスのインスタンスを一意に識別するキーに置き換えます。たとえばシリアル番号やMACアドレスを指定できます。注意: デバイスのモデルIDとデバイスのシリアル番号は、64文字を超えないようにしてください。また、[A-Z]、 [a-z]、[0-9]、「-」、「+」、「_」の文字セットを使用してください。
- REDIRECT-URIは、あらかじめ作成しておいたセキュリティプロファイルに追加されている、[Allowed Return URLs] のいずれかに置き換えます。

マーケットプレイスがまだ認定されていない場合は、"should_include_non_live":trueをscopeData[drsScope]オブジェクトにインクルードします。このパラメーターがtrueの場合、Amazonによってまだ認定されていないデバイスの機能を使用してユーザーがDRSフローにアクセスすることを許可します。Amazonの認定を待つ間、機能をテストする際にこのパラメーターを利用できます。リリース後の実稼働アプリでは、このフラグを設定しないでください。

 <script type="text/javascript">
 document.getElementById('LoginWithAmazon').onclick = function() {
     var deviceModel = 'YOUR-DEVICE-MODEL-ID';
     var serialNo = 'YOUR-DEVICE-SERIAL-NO';
     var drsScope = 'dash:replenish';
     var scopeData = new Object();
     scopeData[drsScope] = {
         device_model:deviceModel,
         serial:serialNo,
         should_include_non_live:true,
         is_test_device:true
     };
     var options = {
         scope:drsScope,
         scope_data:scopeData,
         response_type:'code'
     };
     amazon.Login.authorize(options, 'REDIRECT-URI');
     return false;
 };
 </script>

Warning: should_include_non_liveをtrueに設定しないと、デバイスをテストすることはできません。認証を取得後、製品を販売する際は、falseに設定する必要があります。

ページを最新の情報に更新し、[Login With Amazon] ボタンをクリックして認証を行います。

認証が完了すると、ユーザーはこのフローの最初に選択したREDIRECT-URIにリダイレクトされます。サービスはそれにauthorization_codeを付与します。

例:

https://myredirecturi.domain/index.html?code=ANJWODERsVtbvwKDOYfu&scope=dash%3Areplenish

次に、サービスから返されたcode=を使用してアクセストークンと更新トークンを取得します。

許可コードグラントを使用した更新トークンとアクセストークンの取得

Note: AndroidやiOSでのアクセストークン・リフレッシュトークンの取得方法とは異なります。その場合はAndroidまたはiOSを参照してください。

ユーザーは認証後、前のセクションでREDIRECT-URIプレースホルダーに指定したURIにリダイレクトされます。

許可コードグラントのレスポンスのサンプル

https://www.example.com/login?code=ANdNAVhyhqirUelHGEHA&scope=dash:replenish

次に、返された許可コードを対象サービスから利用して、アクセストークンを要求します。

以下のパラメーターを指定して、POSTリクエストをhttps://api.amazon.com/auth/o2/tokenに送信します。

HTTPヘッダーのパラメーター

Content-Type:application/x-www-form-urlencoded

HTTP本文のパラメーター

grant_type:authorization_code
code:レスポンスで返された許可コード。
client_id:WebサイトのクライアントID。この情報は、Amazon 開発者ポータルの [Login with Amazon] ページで確認できます。
client_secret:Webサイトのクライアントシークレット。この情報は、 Amazon開発者ポータルのLogin With Amazonページで確認できます。
redirect_uri:あらかじめ作成しておいたセキュリティプロファイルに追加されている、[Allowed Return URLs] のいずれかと一致する必要があります。

サンプルリクエスト

POST /auth/o2/token HTTP/1.1
Host: api.amazon.com
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache
grant_type=authorization_code&code=ANBzsjhYZmNCTeAszagk&client_id=amzn1.application-oa2-
client.b91a4d2fd2f64&client_secret=6963038c1c2063c33ab9eedc0cf8&redirect_uri=https%3A%2F%2Flocalhost

サンプルレスポンス

HTTP/1.1 200 OK
{
   "access_token": "Atza|IQEBLjAsAhRBejiZKPfn5HO2562GBt26qt23EA",
   "expires_in": 3600,
   "refresh_token": "Atzr|IQEBLzAtAhUAibmh-1N0EsdqwqwdqdasdvferrE",
   "token_type": "bearer"
}

refresh token とaccess token をユーザーの対象デバイスに転送します。

新しい更新トークンとアクセストークンのリクエスト

Note: AndroidやiOSでのアクセストークン・リフレッシュトークンの取得方法とは異なります。その場合はAndroidまたはiOSを参照してください。

access token の有効期間は1時間です。アクセストークンの有効期限が切れるか、有効期限が近くなったら、refresh token を新しいアクセストークンに交換することができます。

以下のパラメーターを指定してPOSTリクエストをhttps://api.amazon.com/auth/o2/tokenに送信します。

HTTP Header Parameters

Content-Type:application/x-www-form-urlencoded

HTTP Body Parameters

grant_type:refresh_token
refresh_token:新しいアクセストークンをリクエストするための更新トークン。
client_id:WebサイトのクライアントID。この情報は、Amazon 開発者ポータルのLogin With Amazonページで確認できます。
client_secret:Webサイトのクライアントシークレット。この情報は、 Amazon開発者ポータルのLogin With Amazon ページで確認できます。
redirect_uri:サインアップ時にアプリのセキュリティプロファイルに追加したいずれかのリターンURI。

サンプルリクエスト

POST /auth/o2/token HTTP/1.1
Host: api.amazon.com
Content-Type: application/x-www-form-urlencoded
Cache-Control: no-cache
grant_type=refresh_token&refresh_token=Atzr%7CIQEBLzAtAhUAibmh-1N0E&client_id=amzn1.application-oa2-
client.b91a4d2fd2f6&client_secret=6963038c1c2063c33ab9eedc0cf822

サンプルレスポンス

HTTP/1.1 200 OK
{
   "access_token": "Atza|IQEBLjAsAhQ3yD47Jkj09BfU_qgNk4",
   "expires_in": 3600,
   "refresh_token": "Atzr|IQEBLzAtAhUAibmh-1N0EVztZJofMx",
   "token_type": "bearer"
}

DRS APIの呼び出し

これで、DRSのすべてのREST APIを呼び出すことができる状態になりました。リクエストを作成するときは、Authorizationヘッダーを追加して、そこに次の値を指定します。

Bearer <access_token>

取得済みのaccess_tokenを使用します。

次のステップ

次は、他のコンパニオンアプリへのLogin with Amazonの組み込みについて説明します。

作成したいアプリ	ドキュメント
ネイティブAndroidアプリ	LwA SDK for Android
ネイティブiOSアプリ	LwA SDK for iOS
Webアプリまたはハイブリッドアプリ（Cordovaなど）	LwA for Web

既にLwAを連携している場合は、このチュートリアルのAPIセクションにお進みください。

Last updated: Aug 07, 2018