vue.js - 无法在 amazon-cognito 中捕获用户处理程序的成功/失败事件

Question

我是 VueJS 和 Amazon-cognito 的新手，正在尝试使用我的简单 VueJS 应用程序登录。

我正在使用 NPM 和 webpack。我已按照 amazon-cognito-auth-js 中的步骤进行操作

下面是我的脚本标签。

<script>
  import {CognitoAuth} from amazon-cognito-auth-js/dist/amazon-cognito-auth

  export default {
    name: 'App',

methods: {
  initCognitoSDK: function() {
    var authData = {
      AppWebDomain: 'XXX.auth.us-west-2.amazoncognito.com',
      TokenScopesArray: ['phone', 'email', 'profile', 'openid'],
      AdvancedSecurityDataCollectionFlag: false,
      ClientId: 'XXXXXXXXXXXXXXXXXXXXXXX',
      RedirectUriSignIn: 'http://localhost:8080/index.html',
      RedirectUriSignOut: 'http://localhost:8080/sign-out.html'
    };

    var auth = new CognitoAuth(authData);
    auth.userhandler = {
      onSuccess: function (result) {
        alert("Sign in success");
        //showSignedIn(result);
        console.log(result);
      },
      onFailure: function (err) {
        alert("Error!" + err);
      }
    };

    return auth;
  }
}  
}
</script>

我看不到成功或失败的警报。 任何帮助将不胜感激!

Answer 1

你可以试试这个代码..为我工作。

import { Component, OnInit } from '@angular/core';
import { CognitoAuth } from 'amazon-cognito-auth-js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  auth: any;
  constructor() {
    //
  }

  ngOnInit() {
    this.auth = this.initCognitoSDK();
    this.auth.getSession();
    const curUrl = window.location.href;
    this.auth.parseCognitoWebResponse(curUrl);
  }

  initCognitoSDK() {
    const authData = {
      ClientId: 'xyz', // Your client id here
      AppWebDomain: 'xyz', // Exclude the "https://" part.
      TokenScopesArray: ['openid'], // like ['openid','email','phone']...
      RedirectUriSignIn: 'xyz',
      UserPoolId: 'xyz',
      RedirectUriSignOut: 'xyz',
      IdentityProvider: '', // e.g. 'Facebook',
      AdvancedSecurityDataCollectionFlag: false
    };

    const auth = new CognitoAuth(authData);

    auth.userhandler = {
      onSuccess: (result) => {
        alert('Sign in success');
        this.showSignedIn(result);
      },
      onFailure: (err) => {
        alert('Error!');
      }
    };
    auth.useCodeGrantFlow();

    return auth;
  }

  showSignedIn(session) {
    console.log('Session: ', session);
  }
}