如何在ReactJS中使用Amazon登录?

问题描述

为什么亚马逊阻止了起源为“ https://na.account.amazon.com”的框架访问跨域框架?

我正在尝试用ReactJS实现LWA。但是在授权应用程序后,它会暂停并给出此错误-

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

这是我实施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>

按钮:

<a href="" id="LoginWithAmazon" onClick={(handleAmazonLogin)}>
       <img style={{ borderRadius: "10px" }} width="55px" alt="Login with Amazon" src={AmazonLogo} />
</a>

执行:

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);
                });
            });
        });
    }

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...