Add the Login with Amazon SDK for JavaScript

LWA for Websites

STEP 1:
Register for LWA

→

STEP 2:
Add a LWA Button to Your Website

→

STEP 3:
Add the LWA SDK for JavaScript

→

STEP 4:
Implement Authorization Code Grant

→

STEP 5:
Dynamically Redirect Users

→

STEP 6:
Obtain Customer Profile Info

→

STEP 7:
Log Out Users

→

STEP 8:
Integrate with Your Account System

Login with Amazon provides a JavaScript SDK that you may use to obtain access tokens and retrieve customer profiles. The Login with Amazon SDK for JavaScript will handle all of the difficult parts of integrating Login with Amazon into your website. Before you can make an access grant call or retrieve a profile, the SDK must load itself from Amazon's content delivery network.

The Login with Amazon SDK for JavaScript requires the amazon-root element to be present in the page. The amazon-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.

The SDK inserts elements into amazon-root that expect to be positioned relative to the body or relative to an element close to the top of the page. It is best if the amazon-root element is not inside an element with position: absolute or position: relative settings. If you must place the amazon-root element inside of a positioned element, you should give it a position close to the top of the body or some parts of the SDK may not work properly.

Add the following code after the opening <body> in your page to load the Login with Amazon SDK for JavaScript, and the amazon-root tag, into your page:

<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>

After the SDK has loaded, it will call window.onAmazonLoginReady for initialization. Before using the SDK, you must call amazon.Login.setClientId, passing your client identifier.
Replace YOUR-CLIENT-ID with the Client ID generated when you Registered Your Application.

Add the following JavaScript after the Login with Amazon button on your site to return an AuthorizeRequest object. After the request is complete, the object will contain properties detailing the response (such as an access token or authorization code, which you can use to obtain customer profile information):

<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>

Replace www.example.com with the domain of your website.

Tip: By default, the SDK will display the login screen in a popup window. You can set the popup property of the options parameter to false to instead redirect customers to a new page to login. Popup windows are not supported in native iOS apps. We recommend implementing a redirected login experience if your customers will use Login with Amazon from a native iOS app. Review the Login with Amazon SDK for JavaScript Reference Guide for information on customizing the options parameter.

After the user has logged in and consented to share the specified data, the current window will be redirected to the given URI and the authorization response will be added to the query string. The URI must use the HTTPS protocol and be on the same domain as the current window.

For more information on the methods described above, see the Login with Amazon SDK for JavaScript Reference.