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


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

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の一部が正しく機能しない可能性があります。

  1. 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>
    
  2. SDKの読み込み後、初期化のためにwindow.onAmazonLoginReadyを呼び出します。SDKを使用する前に、amazon.Login.setClientIdを呼び出して、クライアント識別子を渡す必要があります。

  3. YOUR-CLIENT-IDを、アプリの登録時に生成されたクライアントIDに置き換えます。

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

    <script type="text/javascript">
        document.getElementById('LoginWithAmazon').onclick = function() {
        options = { scope : 'profile' };
        amazon.Login.authorize(options,
            'https://www.example.com/handle_login.php');
        return false;
        };
    </script>
    
  5. www.example.comをウェブサイトのドメインに置き換えます。

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

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