LwA Web APIの使用

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

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

  1. Login with Amazonコンソールに移動し、いずれかのセキュリティプロファイルを選択します。セキュリティプロファイルがない場合は、LwAセキュリティプロファイルの作成ガイドの手順に従って作成してください。

  2. 該当するセキュリティプロファイルの [Manage] セクションで、[Web Settings] を選択します。

    LwA Security Profile
  3. [Edit] ボタンをクリックし、[Allowed Origins] フィールドと [Allowed Returns URLs] フィールドに値を入力します。これらの値は、ご利用のWebサイトのホストとなっているドメインと一致している必要があります(例: http://www.example.comhttp://www.example.com/login)。

    LwA Security Profile

LwA SDK for JavaScriptとの連携

Login with Amazon SDK for JavaScriptは、Login with AmazonとWebサイトの連携に関するさまざまな要素に対応します。

  1. 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>
    
  2. (省略可能)Webサイトの「ログアウト」プロンプトを表示する場所に次のリンクを追加します。

     <a id="Logout">ログアウト</a>
    
  3. ページを最新の情報に更新して、Webサイト上にボタンが表示されていることを確認します。

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

     <div id="amazon-root"></div>
     <script type="text/javascript">
     window.onAmazonLoginReady = function() {
           amazon.Login.setClientId('YOUR-CLIENT-ID');
       };
       (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>
    
  5. YOUR-CLIENT-IDを、あらかじめLogin with Amazonコンソールで作成しておいたセキュリティプロファイルのクライアントIDに置き換えます。

    LwA Security Profile
  6. サイト上の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] のいずれかに 置き換えます。
  7. マーケットプレイスがまだ認定されていない場合は、"should_include_non_live":truescopeData[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>
    

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

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

例:

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

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

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

ユーザーは認証後、前のセクションで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 tokenaccess token をユーザーの対象デバイスに転送します。

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

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セクションにお進みください。