vuecli获取facebook用户邮箱、头像并登录

一、第一种方法利用hello.js，首先在facebook开发者里注册你的应用，参考http://www.imooc.com/article/79629

这种可以获取图片，无法获取email，查了一下要添加fileds

provider.api({
  path:'/me?fields=name,first_name,last_name,email',
  name:'Hello'
}).then( (r) => {}

二、第二种方法利用 JavaScript SDK，参考https://developers.facebook.com/docs/facebook-login/web

<template>
  <a href="javascript:void(0)" id="login">FaceBook</a>
</template>

mounted() {
  window.fbAsyncInit = function () {
    FB.init({ appId: '填写申请的appid', cookie: true, xfbml: true, oauth: true });

   // if (typeof facebookInit == 'function') {
      $('#login').click(function () {
        FB.login(function(response){
          console.log(response)
          statusChangeCallback(response);  //登录回调函数

        },{ scope :'email'});
      })
    //}
  };

  (function(d){
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
  }(document));

  var statusChangeCallback = function (response){
    if (response.status === 'connected') {
      var accessToken = response.authResponse.accessToken; //取得 accessToken
      //获取用户个人信息
      FB.api('/me?fields=name,first_name,last_name,email', function(response) { // /me为API指定的调用方法，用于获取登陆用户相关信息
        console.log(response)
        if(response.email!=null){
          console.log(response.id)
          //获取用户头像
         FB.api(
                  response.id+'/picture',
                  'GET',
                  {"redirect":"false"},
                  function(pic) {
                    console.log(pic)
                    getBase64(pic.data.url)
                      .then(function(base64){
                        console.log(base64);
                        //将base64转换成文件
                        self.postImg();//这个方法看更改用户头像那篇
                      },function(err){
                        console.log(err);//打印异常信息
                      });
                    //传入图片路径，返回base64
                    function getBase64(img){
                      function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
                        var canvas = document.createElement("canvas");
                        canvas.width = width ? width : img.width;
                        canvas.height = height ? height : img.height;

                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        var dataURL = canvas.toDataURL();
                        return dataURL;
                      }
                      var image = new Image();
                      image.crossOrigin = '';
                      image.src = img;
                      var deferred=$.Deferred();
                      if(img){
                        image.onload =function (){
                          deferred.resolve(getBase64Image(image));//将base64传给done上传处理
                        }
                        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
                      }
                    }
                  }
                );
          
        }else{
          alert("XXX.");
        }
      });
    }
  };
},