使用Vue.js和Amplify的Facebook登录组件

Question

这是Vue中一个自包含的Facebook登录组件的来源。我正在尝试将其与AWS Amplify一起使用。我成功显示了Facebook登录屏幕，并且能够在AWS Cognito中获取身份ID。但是，事情还不太顺利。

<template>
  <div>
    <Button
      class="FacebookButton"
      v-text="buttonText"
      @click="handleClick"
      :disabled="isLoading"
    />
  </div>
</template>

<script>
import Auth from "@aws-amplify/auth";
import { AmplifyEventBus } from "aws-amplify-vue";

export default {
  name: "FacebookButton",
  components: {
  },
  data() {
    return {
      buttonText: "Login to Facebook",
      isLoading: true
    };
  },
  computed: {},
  async mounted() {
    this.loadFacebookSDK();
    await this.waitForInit();
    this.isLoading = false;
  },
  beforeCreate() {},
  methods: {
    waitForInit() {
      return new Promise(res => {
        const hasFbLoaded = () => {
          if (window.FB) {
            res();
          } else {
            setTimeout(hasFbLoaded, 300);
          }
        };
        hasFbLoaded();
      });
    },
    statusChangeCallback(response) {
      if (response.status === "connected") {
        this.handleResponse(response.authResponse);
      } else {
        this.handleError(response);
      }
    },
    checkLoginState() {
      window.FB.getLoginStatus(this.statusChangeCallback);
    },
    handleClick() {
      window.FB.login(this.checkLoginState, { scope: "public_profile,email" });
    },
    handleError(error) {
      alert(error);
    },
    async handleResponse(data) {
      const { email, accessToken: token, expiresIn } = data;
      const expires_at = expiresIn * 1000 + new Date().getTime();
      const user = { email };

      this.isLoading = true;

      try {
        //const response = await Auth.federatedSignIn(
        await Auth.federatedSignIn("facebook", { token, expires_at }, user);
        this.isLoading = false;
        AmplifyEventBus.$emit("authState", "signedIn");

        //this.props.onLogin(response);
      } catch (e) {
        this.isLoading = false;
        this.handleError(e);
      }
    },
    loadFacebookSDK() {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "yourappidhere",
          xfbml: true,
          version: "v3.2"
        });
        window.FB.AppEvents.logPageView();
      };

      (function(d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      })(document, "script", "facebook-jssdk");
    }
  }
};
</script>

<style scoped>
</style>

这段代码是来自React示例的端口：https : //serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html

我正在尝试通过将对authState的更改发送如下来使此Facebook登录名与现有的Amplify身份验证器状态管理系统配合使用：

AmplifyEventBus.$emit("authState", "signedIn");

这会导致Authenticator小部件“消失”，但并不允许我进入我的应用程序。我不太确定下一步要去哪里。