Компонент входа в Facebook с использованием Vue.js и Amplify - PullRequest
0 голосов
/ 12 января 2019

Вот источник для автономного компонента входа в Facebook в Vue. Я пытаюсь использовать это с AWS Amplify. Я успешно отображаю экран входа в Facebook и могу получить идентификационный номер в AWS cognito. Тем не менее, вещи не совсем работают.

<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-ampify.html

Я пытаюсь заставить эту учетную запись Facebook работать с существующей системой управления состоянием аутентификатора Amplify, передав изменение authState следующим образом:

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

Это приводит к «исчезновению» виджета Authenticator, но не позволяет мне войти в мое приложение. Я не совсем уверен, куда идти дальше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...