Question

我正在尝试将Cognito身份验证整合到基于React的项目中。我的代码基于NPM页面中给出的示例。看起来像这样：

var authenticationData = {
    Username : 'username',
    Password : 'password',
};

var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

var poolData = {
    UserPoolId : '...', // Your user pool id here
    ClientId : '...' // Your client id here
};

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var userData = {
    Username : 'username',
    Pool : userPool
};

var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: function (result) {
               console.log('Successfully logged!');
            }
        });
    },

    onFailure: function(err) {
        console.log(JSON.stringify(err));
    },

});

我已经创建了一个用户池并添加了一个应用程序客户端。我还为应用程序客户端启用了身份提供程序。但是，我的代码无法通过错误 {“ code”：“ NetworkError”，“ name”：“ Error”，“ message”：“ Network error”} 进行身份验证。由于我的项目仍托管在本地主机上，因此我已经安装了适用于firefox的CORS插件，但这不能解决问题。从此错误消息中我无法理解。我已经仔细检查了Cognito区域，池ID和客户端ID。它们都设置为正确的值。是否有人熟悉此错误并知道可能导致此错误的原因？

Answer 1

有点晚了，但是今天我犯了同样的错误，花了我一段时间才弄清楚。提交后发生自动刷新时，会发生这种情况。这样可以防止对AWS Cognito的API调用完成而导致网络错误。

在启动认知功能之前，请在您的代码中添加一个event.preventDefault();。

例如，我在addEventListener中执行此操作：

document.querySelector("#authCognito").addEventListener("click", function(){
    var username = document.getElementById("userInput").value;
    var password = document.getElementById("passInput").value;
    var authenticationData = {
        Username: username,
        Password: password,
    };
    event.preventDefault();  
    cognitoAuthenticate(authenticationData);
});

Answer 2

我遇到了同样的问题，以下是 Vue 中的修复

<template>
  <button v-on:click="login($event)" class="btn btn-default btn-large">login</button>
</template>

<script>
  methods: {
    login (event) {
      if (event) {
        event.preventDefault()
      }

使用AWS Cognito对用户进行身份验证时出现网络错误

2 个答案: