vue 关于facebooke和google的一些操作

facebook 点赞
一、
1.引入SDK
在main.js里面

(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/zh_CN/sdk.js#xfbml=1&version=v3.3";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");

或者在html里面直接引入

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3">
</script>

2. 在template组件里面

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="standard"
  data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

3.关于样式，不可更改，如果非要更改，这个流程会很麻烦，要申请专用图标
4 可以更改语言，在js链接里面
二、
直接用iframe

<iframe
  src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId"
  width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"
  allow="encrypted-media"></iframe>

关于登录
登录里面可以获取用户名和一个id,如果要获取其他信息可以申请

data() {
        return {
          profile: {},
          authorized: false
        };
      },
      mounted() {
        let vm = this;
        window.fbAsyncInit = function () {
          FB.init({
            appId: "xxx",
            xfbml: true,
            status: true,
            cookie: true,
            autoLogAppEvents: true,
            version: "v3.3"
          });
          //login
          FB.AppEvents.logPageView();
          //Get FB Login Status
          FB.getLoginStatus(response => {
            vm.statusChangeCallback(response);
          });
        };
      },
    methods: {
      getProfile() {
        let vm = this;
        FB.api("/me", function (response) {
          console.log(response, typeof response, "me api info");
          vm.$set(vm, "profile", response);
        });
      },
      statusChangeCallback(response) {
        let vm = this;
        if (response.status === "connected") {
          vm.authorized = true;
          vm.getProfile();
        } else if (response.status === "not_authorized") {
          vm.authorized = false;
        } else if (response.status === "unknown") {
          vm.profile = {};
          vm.authorized = false;
        } else {
          vm.authorized = false;
        }
      },
      Login() {
        let vm = this;
        FB.login(
          function (response) {
            vm.statusChangeCallback(response);
            console.log(response, "login response 登录返回");
          }, {
            scope: "email, public_profile",
            return_scopes: true
          }
        );
      }

    }

关于分享
1 直接用iframe或者用引入js方式，同以上
2 如果要更改样式
在 自定义分享按钮的点击事件里面
3 分享有个回调，可以判断是否分享

 sharefacebook() {
      FB.ui({
          method: "share",
          href: "https://www.facebook.com/%E5%85%89%E4%B9%8B%E7%B5%82%E7%AB%A0-417408922191487/"
        },
        function (response) {
          //error_message仅在用户通过 Facebook 登录来登录您的应用时提供。
          console.log(response, "response");
          if (response && !response.error_message) {
            alert(
              "感谢您完成分享活动结束后将公布幸运得奖名单请持续关注粉专最新消息"
            );
          } else {
            console.log("Error while posting.");
          }
        }
      );
    }

3 自定义分享title和图片，在html head里面加上facebook标志的类似

<meta property="og:url" content="https://www.facebook.com/" />
<!-- url和要分享的url一致 -->
<meta property="og:type" content="website" />
<meta property="og:title" content="光之終章-預註冊活動" />
<meta property="og:description" content="體驗魔幻的史詩劇情，享受高爆發戰鬥體驗，立即加入~光之終章，跟眾神一起挑戰邪惡。" />
<meta property="og:image" content="http://xxx.com/img/logo.png" />

vue facebooke jssdk
https://developers.facebook.com/docs/javascript/
https://developers.facebook.com/docs/plugins/like-button/ 社交插件

google登录

https://developers.google.com/identity/sign-in/web/build-button

//google login
 getGoogleInfo(status) {
   let vm = this
   gapi.load('auth2', function() {
     let auth2 = gapi.auth2.init({
       // client_id:
       //   'xxx.apps.googleusercontent.com',
       client_id:
         'xxx.apps.googleusercontent.com',
       cookiepolicy: 'single_host_origin'
     })
     auth2.signIn().then(function() {
       let accessToken = auth2.currentUser.get().getAuthResponse().id_token
       let accessId = auth2.currentUser
         .get()
         .getBasicProfile()
         .getId()
       if (status == 1) {
         vm.googleSignIn(accessId, accessToken)
       } else {
         vm.unBinding(4, accessId, accessToken)
       }
       auth2.signOut().then(function() {
         console.log('User signed out.')
       })
     })
   })
 },

//给ios和安卓传值

 if (getClient().ios && window.webkit) {
        window.webkit.messageHandlers.googleLogin.postMessage({ status: 'OK' })
      }
  if (getClient().android && window.user) {
        window.user.googleClick()
  }