Add the Login with Amazon SDK for JavaScript
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 theamazon-roottag, 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.onAmazonLoginReadyfor initialization. Before using the SDK, you must callamazon.Login.setClientId, passing your client identifier. -
Replace
YOUR-CLIENT-IDwith 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
AuthorizeRequestobject. 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.comwith the domain of your website.Tip: By default, the SDK will display the login screen in a popup window. You can set thepopupproperty of theoptionsparameter tofalseto 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 theoptionsparameter.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.

