Why amazon Blocked a frame with origin "https://na.account.amazon.com" from accessing a cross-origin frame?
I am trying to implement LWA with ReactJS. But after authorizing the app it halts and gives this error-
Uncaught DOMException: Blocked a frame with origin "https://na.account.amazon.com" from accessing a cross-origin frame.
at x (https://na.account.amazon.com/ap/oa?arb=a68c7499-a8a6-4672-bc34-8b87764fb2d6:238:51)
at https://na.account.amazon.com/ap/oa?arb=a68c7499-a8a6-4672-bc34-8b87764fb2d6:266:7
at https://na.account.amazon.com/ap/oa?arb=a68c7499-a8a6-4672-bc34-8b87764fb2d6:267:7
Here is how I am implementing LWA-
index.html:
<div id="amazon-root"></div>
<script type="text/javascript">
window.onAmazonLoginReady = function () {
amazon.Login.setClientId('****');
};
(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>
The button:
<a href="" id="LoginWithAmazon" onClick={(handleAmazonLogin)}>
<img style={{ borderRadius: "10px" }} width="55px" alt="Login with Amazon" src={AmazonLogo} />
</a>
And the implementation:
declare const window: any;
...
const handleAmazonLogin = () => {
let options: any = {};
options.scope = 'profile';
options.pkce = true;
window.amazon.Login.authorize(options, function (response: any) {
if (response.error) {
console.log('oauth error ' + response.error);
return;
}
window.amazon.Login.retrieveToken(response.code, function (response: any) {
if (response.error) {
console.log('oauth error ' + response.error);
return;
}
window.amazon.Login.retrieveProfile(response.access_token,
function (response: any) {
console.log('Hello, ' + response.profile.Name);
console.log('Your e-mail address is ' + response.profile.PrimaryEmail);
console.log('Your unique ID is ' + response.profile.CustomerId);
if (window.console && window.console.log)
window.console.log(response);
});
});
});
}