vue-facebook-login-component를 사용해 봤습니다.

개요

Nuxt.js가 만든 사이트에 페이스북 로그인 버튼을 설정하고 싶은데 페이스북 for 개발자스SDK를 사용하고 싶은데 잘 움직이지 못했어요.하지만 Vue는'vue-facebook-login-component'를 사용했는데 이번에 사용해 봤기 때문에 메모를 남겼습니다.

사전 준비

참고화면에 Facebook 개발자의 등록 방법 설명 2019년 판 개발 업체 등록.등록하면 Facebook App ID를 받습니다.

vue-facebook-login-component 문서

네.

샘플 소스

이번에 페이스북에 로그인한 후 아이디, 이름, 아이콘 이미지, 메일 주소를 얻는 샘플을 만들었다.
FacebookAuthComponent.vue

<template>
  <div>
    <v-facebook-login
      app-id="Facebook App IDを入力"
      version="v5.0"
      :login-options="scope"
      @sdk-init="setSdk"
      @connect="connected"
      @logout="onLogout"
    >
      <span slot="login">Facebookで登録</span>
      <span slot="logout">Facebookからログアウト</span>
    </v-facebook-login>
  </div>
</template>
<script>
import VFacebookLogin from "vue-facebook-login-component";

export default {
  components: {
    VFacebookLogin
  },
  data() {
    return {
      sdkFB: undefined,
      scope: { scope: "public_profile, email" },
      isFacebookAuth: false,
      facebookInfo: undefined
    };
  },
  methods: {
    // sdkの読み込み完了
    setSdk(sdk) {
      this.sdkFB = sdk.FB;
    },
    // 認証が完了したらconnectedが呼ばれる
    connected() {
      this.isFacebookAuth = true;
      // id、名前、写真、メールアドレスを取得
      this.sdkFB.api(
        "/me?fields=id,name,picture,email",
        function(response) {
          // 取得したデータを設定
          this.facebookInfo = {
            id: response.id,
            name: response.name,
            email: response.email,
            pictureUrl: response.picture.data.url
          };
        }.bind(this)
      );
    },
    // ログアウト時は認証フラグをfalse
    onLogout(response) {
      this.isFacebookAuth = false;
    }
  }
};
</script>

버튼 이미지

【로그인 전】

VUE FACEBOOK LOGIN

[인증 중]

【로그인 후】