Login with Amazon Javascript SDK (Web) CORS error

Question

question

Benjamin Anderson asked Dec 16, '22

Login with Amazon Javascript SDK (Web) CORS error

After many hours reading, and trial and error it looks like I have to ask a question.

Inside my web app I have written this:

var amazonAccessToken = "";
(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);

view.querySelector('#LoginWithAmazon').addEventListener('click', function () {

    var tokenResponse = amazon.Login.retrieveToken();
    if (tokenResponse) {
        alert("Cached Access Token: " + tokenResponse.access_token);
    } else {

         var options = {
            scope: 'profile',
            response_type: 'code',
            pkce: true
          };
           amazon.Login.authorize(options, function (response) {
               response.onComplete = function (r) {
                       amazon.Login.retrieveToken(r.code, function (res) {
                                 alert('Access Token: ' + res.access_token);
                                 amazonAccessToken = res.access_token;
                       });
                };
        });

    }
});

Each and every time I finish my login, and allow access to my Web App, the dialog goes blank, and when I inspectElement it says:

Uncaught DOMException: Blocked a frame with origin "https://na.account.amazon.com" from accessing a cross-origin frame.

Also, the moment the login dialog opens the web page redirects.

Why does it do this?

How do I stop the page from redirecting, and get the authorization token, so I can create an AccessToken.

W

login with amazon

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Answer 1 · 2022-12-16T18:28:52Z

Benjamin Anderson answered Dec 16, '22

Okay after many hours of fiddling with this, there are some very important steps to take here.

First of all, making the functions async, which I should have guessed.

Also make sure you have whitelisted each domain route in your security console.

This sees to work. However, I'll have to wait for the Access Token to expire to make sure it actually does.

var amazonAccessToken = "";
                    (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';
                        var root = document.createElement('div');
                        root.id = 'amazon-root';
                        root.appendChild(a);
                        d.body.appendChild(root);
                        //d.body.appendChild(a);
                    })(document);

                    view.querySelector('#LoginWithAmazon').addEventListener('click',
                        async function (e) {
                            e.preventDefault();
                            amazon.Login.setClientId('CLIENT_ID');
                            var tokenResponse = await amazon.Login.retrieveToken();
                            if (tokenResponse) {

                                console.log("Cached Access Token: " + tokenResponse.access_token);

                            } else {

                                var options = {
                                    scope: 'profile',
                                    response_type: 'code',
                                    pkce: true
                                };
                                await amazon.Login.authorize(options,
                                    function(r) {
                                        amazon.Login.retrieveToken(r.code,
                                            function(res) {
                                                console.log('Access Token: ' + res.access_token);
                                                amazonAccessToken = res.access_token;
                                            });
                                    });

                            };
                        });

10 |5000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

question