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-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 callamazon.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 thepopup
property of theoptions
parameter tofalse
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 theoptions
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.