JavaScript用のLogin with Amazon SDKを追加する

ウェブサイト用のLWA

手順1：
LWAに登録する

→

手順2：
ウェブサイトにLWAボタンを追加する

→

手順3：
JavaScript用のLWA SDKを追加する

→

手順4：
認可コードグラントを実装する

→

手順5：
ユーザーを動的にリダイレクトする

→

手順6：
ユーザープロファイル情報を取得する

→

手順7：
ユーザーをログアウトする

→

手順8：
アカウントシステムと統合する

Login with Amazonでは、アクセストークンとユーザープロファイルの取得に使用できるJavaScript SDKを用意しています。JavaScript用のLogin with Amazon SDKを使用すると、ウェブサイトにLogin with Amazonを統合する際に発生する多数の複雑な作業を軽減できます。アクセスグラントの呼び出しやプロファイルの取得を行うには、AmazonのコンテンツデリバリーネットワークからSDKを読み込む必要があります。

JavaScript用のLogin with Amazon SDKでは、amazon-root要素がページに表示される必要があります。amazon-root要素は、display: noneまたはvisibility: hiddenを使用して非表示にすることはできません。非表示にすると、SDKの一部がInternet Explorerで正しく機能しなくなります。

SDKは、ページの上部付近の要素または本文に相対的に配置されるように要素をamazon-rootに挿入します。amazon-root要素をposition: absoluteまたはposition: relative設定の要素内に置かないようにするのが、最も理想的です。位置指定された要素内にamazon-root要素を置く必要がある場合は、本文の上部付近にします。それ以外の場所では、SDKの一部が正しく機能しない可能性があります。

JavaScript用のLogin with Amazon SDKをページに読み込むために、次のコードとamazon-rootタグをページ内の開始<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://assets.loginwithamazon.com/sdk/na/login1.js';
      d.getElementById('amazon-root').appendChild(a);
    })(document);

</script>

SDKの読み込み後、初期化のためにwindow.onAmazonLoginReadyを呼び出します。SDKを使用する前に、amazon.Login.setClientIdを呼び出して、クライアント識別子を渡す必要があります。
YOUR-CLIENT-IDを、アプリの登録時に生成されたクライアントIDに置き換えます。

AuthorizeRequestオブジェクトを返すために、サイトの [Login with Amazon] ボタンに続いて次のJavaScriptを追加します。リクエストが完了すると、オブジェクトにはレスポンス（ユーザープロファイル情報を取得するために使用するアクセストークンや認可コードなど）を詳述するプロパティがオブジェクトに格納されます。

<script type="text/javascript">
    document.getElementById('LoginWithAmazon').onclick = function() {
        options = {}
        options.scope = 'profile';
        options.scope_data = {
            'profile' : {'essential': false}
        };
        amazon.Login.authorize(options,
            'https://www.example.com/handle_login.php');
        return false;
    };
</script>

www.example.comをウェブサイトのドメインに置き換えます。

ヒント： デフォルトでは、SDKはポップアップウィンドウでログイン画面を表示します。代わりに、optionsパラメーターのpopupプロパティをfalseに設定して、ユーザーをログインのために新しいページにリダイレクトできます。ポップアップウィンドウは、ネイティブのiOSアプリではサポートされていません。ユーザーがネイティブのiOSアプリでLogin with Amazonを使用する可能性がある場合、ログインのリダイレクトを実装することをお勧めします。optionsパラメーターのカスタマイズに関する情報については、JavaScript用のLogin with Amazon SDKリファレンスガイドを参照してください。

ユーザーがログインしてリクエストされたデータの共有に同意したら、ウィンドウが指定のURIにリダイレクトされ、クエリ文字列に認可レスポンスが付け加えられます。URIはHTTPSプロトコルで指定され、リダイレクト前のウィンドウと同じドメインに属している必要があります。

上記のメソッドの詳細については、JavaScript用のLogin with Amazon SDKリファレンスを参照してください。