Vuejs導入( fb / google ) sdk登入紀錄

 index.php : 

記得要載入下方google登入的api

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>

template-html

<button type="button" class="btn btn-google" id="google_register"><span>使用Google註冊</span></button>
<button type="button" class="btn btn-facebook" @click="fb_login"><span>使用Facebook註冊</span></button>

methods :

//登入按鈕
fb_login(){
    var self = this;
    FB.login(function(response) {
        if (response.status === 'connected') {   // Logged into your webpage and Facebook.
            //會回傳id,name,email
            FB.api('/me/?fields=id,name,email', function(response) {
                //將資料用ajax回傳到伺服器
                axios.post('/thirdpartyLogin', {
                    email:response.email,
                    name:response.name,
                    open_id:response.id,
                    type:'fb'
                })
                .then(function (response) {
                    if (response.data.result == 'success') {
                        window.location = '/guide';
                    }
                    if (response.data.result == 'email_error') {
                        self.$notify({
                            title: '錯誤',
                            message: '無法從FB取得您的Email !',
                            type: 'error'
                        });
                        return
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            });
        } else {                                 // Not logged into your webpage or we are unable to tell.
            self.$notify({
                title: '錯誤',
                message: '登入失敗 !',
                type: 'error'
            });
            return
        }
    }, {scope: 'public_profile,email'});
},

mounted :

以下為 FB 的部分

//FB事先載入的API
window.fbAsyncInit = function() {
    FB.init({
        appId      : 'xxxxxxxxxxxxxxxxxxx', //在FB裡面
        cookie     : true,
        xfbml      : true,
        version    : 'v6.0'
    });
      
    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'));

以下為 google 的部分 

//google登入API_開始( 因為vue有生命週期的問題 所以這邊加上延遲時間)
setTimeout(function (){
    var googleUser = {};
    var startApp = function() {
        gapi.load('auth2', function(){
          // Retrieve the singleton for the GoogleAuth library and set up the client.
          self.auth2 = gapi.auth2.init({
            client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', //在google裡面
            cookiepolicy: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',  //在google裡面
            // Request scopes in addition to 'profile' and 'email'
            //scope: 'additional_scope'
          });
          attachSignin(document.getElementById('google_register'));
        });
    };

    function attachSignin(element) {
    //console.log(element.id);
    self.auth2.attachClickHandler(element, {},
        function(googleUser) {
            //將資料用ajax回傳到伺服器
            axios.post('/thirdpartyLogin', {
                email:googleUser.getBasicProfile().getEmail(),
                name:googleUser.getBasicProfile().getName(),
                open_id:googleUser.getBasicProfile().getId(),
                type:'google'
            })
            .then(function (response) {
                if (response.data.result == 'success') {
                    window.location = '/guide';
                }
                if (response.data.result == 'email_error') {
                    self.$notify({
                        title: '錯誤',
                        message: '無法從FB取得您的Email !',
                        type: 'error'
                    });
                    return
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }, function(error) {
            alert(JSON.stringify(error, undefined, 2));
        });
    }

    startApp();
    //google登入API_結束
}, 1500);