Vue.js:"onSuccess"和"onFailure"回调不起作用



我正在用facebook 使用 amazon-cognito-auth-js 在vue.js中实现。我正在使用以下组件:

<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"回调。我可能会缺少一些东西吗?

在进行一次调试后,我发现在我更改 redirecturisignin in authdata 中时可工作。:

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 的组件。

在我的情况下,我将其重定向到'/'(home.vue(,没有 Amazon-Cognito-auth-JS 初始化,所有内容都是在'/imploup'(Ingip.vue(中初始化的,因此重定向到'/nignup'路由是有意义的。

在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

最新更新