Vue.js：“onSuccess”和“onFailure”回调不起作用答案

【问题标题】：Vue.js: "onSuccess" and "onFailure" callbacks not workingVue.js：“onSuccess”和“onFailure”回调不起作用
【发布时间】：2019-12-12 06:17:36
【问题描述】：

我正在 Vue.js 中使用 amazon-cognito-auth-js 实现 Login with Facebook。我正在使用以下组件：

<template>
  <div class="signup">      
      <button @click="signUpFacebook">Sign in with Facebook</button>
    </div>
</template>


<script>
  import * as AmazonCognitoIdentity from 'amazon-cognito-identity-js';
  import {CognitoAuth} from 'amazon-cognito-auth-js';
  var cognitoUserPoolId = 'xxxx'; 
  var cognitoUserPoolClientId = 'xxx'; 
  var appclient_id  = 'xxxx'

  export default {
    name: 'signup',
    data(){
      return {
        email_address: '',
        password: '',
        confirmPw: '',
        auth: ''
      }
    },
    methods: {
      signUpFacebook : function(){
        this.auth.getSession();
      }
    },
    created() {

          var authData = {
            ClientId : appclient_id, // Your client id here
            AppWebDomain : 'my-sample-app.amazoncognito.com',
            TokenScopesArray : ['email'], 
            RedirectUriSignIn : 'http://localhost:8080',
            RedirectUriSignOut : 'http://localhost:8080',
            IdentityProvider : 'Facebook', // e.g. 'Facebook',
            UserPoolId : cognitoUserPoolId, // Your user pool id here
          };

          this.auth = new CognitoAuth(authData)
          console.log(this.auth)

          this.auth.userhandler = {
            // * E.g.
            onSuccess: function(result) {
              alert("Sign in success");
              showSignedIn(result);
            },
            onFailure: function(err) {
              alert("Error!" + err);
            }          
          }

          console.log("authdata set")

          var redirect_url = window.location.href;
          this.auth.parseCognitoWebResponse(redirect_url);
    }
  }
</script>

尽管用户被重定向和验证，“onSuccess”、“onFailure”回调永远不会被调用。有什么我可能会错过的吗？

【问题讨论】：

标签： javascript vue.js amazon-cognito

【解决方案1】：

经过一些调试，我发现当我在 authData 中更改 RedirectUriSignIn 时 onSuccess 回调起作用了：

var authData = {
   ClientId : appclient_id, // Your client id here
   AppWebDomain : 'my-sample-app.amazoncognito.com',
   TokenScopesArray : ['email'], 
   RedirectUriSignIn : 'http://localhost:8080/signup',  <------- here
   RedirectUriSignOut : 'http://localhost:8080',
   IdentityProvider : 'Facebook', // e.g. 'Facebook',
   UserPoolId : cognitoUserPoolId, // Your user pool id here
};

这将重定向到初始化 amazon-cognito-auth-js 的组件。

在我的例子中，我将它重定向到没有 amazon-cognito-auth- 的 '/' (Home.vue) js 已初始化，所有内容都在 '/signup' (SignUp.vue) 中初始化，因此重定向到 '/signup' 路由是有意义的。

确保在 AWS Cognito App 客户端设置中也更改 redirect_url：

AWS Console --> Cognito --> Userpools --> App client settings --> Sign in and sign out URLs --> Callback URL(s)

将回调 URL 更改为：

http://localhost:8080/signup

【讨论】：