Vue.js를 사용한 Facebook 로그인 컴포넌트 및 증폭

Vue.js를 사용한 Facebook 로그인 컴포넌트 및 증폭

다음은 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");

그러면 인증자 위젯이 '삭제'되지만 앱에 들어갈 수 없습니다.다음에 어디로 가야 할지 잘 모르겠어요.

언급URL : https://stackoverflow.com/questions/54162881/facebook-login-component-using-vue-js-and-amplify