实现Google和facebook第三方登录

 <button type="button" class="fb-btn" id="google">
                    <img src="google.jpg" class="images" alt="google">
                </button>

                <button type="button" id="facebook" class="fb-btn">
                    <img src="facebook.jpg" class="images" alt="facebook">
                </button>

<!--google-->
引入Google sdk
<script src="https://apis.google.com/js/api:client.js"></script>


<script>
    //google第三方登录------------------------------------------------------------

    var googleUser = {};
    var startApp = function() {
        gapi.load('auth2', function(){
            // Retrieve the singleton for the GoogleAuth library and set up the client.
            auth2 = gapi.auth2.init({
                client_id: '*****************', //客户端ID
                cookiepolicy: 'single_host_origin',
                scope: 'profile' //可以请求除了默认的'profile' and 'email'之外的数据
            });
            attachSignin(document.getElementById('google'));
        });
    };

    function attachSignin(element) {
        auth2.attachClickHandler(element, {},
            function(googleUser) {
                // document.getElementById('name').innerText = "Signed in: " + googleUser.getBasicProfile().getName();                  <div id="name">显示姓名</div>
                var profile = auth2.currentUser.get().getBasicProfile();
                 console.log('ID: ' + profile.getId());
                 console.log('Full Name: ' + profile.getName());
                 console.log('Given Name: ' + profile.getGivenName());
                 console.log('Family Name: ' + profile.getFamilyName());
                console.log('Image URL: ' + profile.getImageUrl());
                 console.log('Email: ' + profile.getEmail());
    }
    startApp();

    //注销
    // function googleOut() {
    //     var auth2 = gapi.auth2.getAuthInstance();
    //     auth2.signOut().then(function () {
    //         alert('用户注销成功');
    //     });
    // }

</script>
<script>
    //facebook第三方登录------------------------------------------------------------
    (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'));

    window.fbAsyncInit = function() {
        FB.init({
            appId: '*******',
            cookie: true, // 启用cookie
            xfbml: true, // 解析此页面上的社交插件
            version: 'v2.8' // 使用图形api 2.8版本
        });

// 点击按钮登录的代码

        document.getElementById("facebook").onclick = function () {
            FB.login(function (response) {
                if (response.status === 'connected') {
                    testAPI();
                } else {

                    console.log("该用户没有登录")
                }
            }, {scope: 'public_profile,email'});
            return false;
        }


        function testAPI() {
            FB.api('/me', function (response) {
                FB.api('http://graph.facebook.com/' + response.id + '?fields=first_name,last_name,email', function (data) {
                    //获取数据之后填充到对应的input上
                     document.getElementById("firstName").value = data.first_name;
                     document.getElementById("lastName").value = data.last_name;
                     document.getElementById("email").value = data.email;
            });
        }
    }

    //退出
    // document.getElementById('signout').onclick = function() {
    //     FB.logout(function(response) {
    //         console.log("用户已退出");
    //     });
    // };
</script>