Google+登录自定义按钮和通话

Question

我正在使用谷歌登录API来获取用户信息。我的javascript代码是：

<script src="https://apis.google.com/js/client:plusone.js?onload=signinCallback"></script>
<script type="text/javascript">
var email = "";
var Id = "";
function signinCallback(authResult) {

    if (authResult['status']['signed_in'] && authResult['status']['method'] == 'PROMPT') {
        // Update the app to reflect a signed in user
        // Hide the sign-in button now that the user is authorized, for example:
        document.getElementById('signinButton').setAttribute('style',
                'display: none');
        gapi.client.load('plus', 'v1', function() {

            var request = gapi.client.plus.people.get({
                'userId' : 'me'
            });
            request.execute(function(resp) {
                if (resp['emails']) {
                    for (var i = 0; i < resp['emails'].length; i++) {
                        if (resp['emails'][i]['type'] == 'account') {
                            email = resp['emails'][i]['value'];
                        }
                    }
                }
                Id = resp.id;
            });
        });
    } else {
        // Update the app to reflect a signed out user
        // Possible error values:
        //   "user_signed_out" - User is signed-out
        //   "access_denied" - User denied access to your app
        //   "immediate_failed" - Could not automatically log in the user
        console.log('Sign-in state: ' + authResult['error']);
    }
}
    </script>

我的HTML代码是：

<span id="signinButton"> <span class="g-signin" data-callback="signinCallback" data-            clientid="****************************.apps.googleusercontent.com"
                data-cookiepolicy="single_host_origin" data-scope="https://www.googleapis.com/auth/userinfo.email"> </span>

我的问题是加载谷歌登录按钮需要很长时间，所以我想更改自定义按钮我想解决该问题的解决方案。谢谢..

Answer 1

我不熟悉客户端流程，但这很接近你要做的事情。 您可以根据需要自定义外观，但Google需要您遵循一些guidelines。

使用Javascript：

function render_google_btn() {
    gapi.signin.render('custom_google_btn', {
        'redirecturi':  "postmessage",
        'accesstype':   "offline",
        'callback':     "signinCallback",
        'scope':        "https://www.googleapis.com/auth/userinfo.email",
        'clientid':     "****************.apps.googleusercontent.com",
        'cookiepolicy': "single_host_origin"
    });
}

function google_login_callback (authResult) {
    if (authResult['status']['signed_in'] && authResult['status']['method'] == 'PROMPT') {
        // Hide the sign-in button now that the user is authorized, for example:
        document.getElementById('gSignInWrapper').setAttribute('style', 'display: none');
        gapi.client.load('plus', 'v1', function() {

            var request = gapi.client.plus.people.get({
                'userId' : 'me'
            });
            request.execute(function(resp) {
                if (resp['emails']) {
                    for (var i = 0; i < resp['emails'].length; i++) {
                        if (resp['emails'][i]['type'] == 'account') {
                            email = resp['emails'][i]['value'];
                        }
                    }
                }
                Id = resp.id;
            });
        });

    } else if (authResult['error']) {
        // There was an error.
        // Possible error codes:
        //   "access_denied" - User denied access to your app
        //   "immediate_failed" - Could not automatially log in the user
        console.log('Sign-in state: ' + authResult['error']);
    }
}

CSS：

#custom_google_btn {
    display: block;
    color: #737373;
    border-radius: 3px;
    white-space: nowrap;
    width: 235px;
    margin: 0 auto;
    border-width: 1px;
    border-style: solid;
    border-color: #D7D7D7;
    border-color: rgba(155, 155, 155, 0.3);
}
#custom_google_btn:hover {
    background: #F7F7F7;
    cursor: pointer;
    border-style: inset;
}
span.icon {
    background: url('https://developers.google.com/+/images/branding/button-gplus.png') transparent 2px 50% no-repeat;
    background-size: 40px;
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 40px;
    border-right: #DADADA 1px solid;
}
span.buttonText {
    display: inline-block;
    vertical-align: middle;
    padding-left: 25px;
    padding-right: 30px;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Roboto',arial,sans-serif;
}                       

HTML：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<div id="gSignInWrapper">
    <div id="custom_google_btn" class="g-signin customGPlusSignIn">
        <span class="icon"></span>
        <span class="buttonText">Sign in with Google</span>
    </div>
</div>

<div id="g_results"></div>

Answer 2

function login() {
    var myParams = {
        'clientid' : '******************************',
        'cookiepolicy' : 'single_host_origin',
        'callback' : 'loginCallback',
        'approvalprompt':'force',
        'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
    };

    gapi.auth.signIn(myParams);
}

function loginCallback(result) {
    if(result['status']['signed_in']) {
        var request = gapi.client.plus.people.get({
            'userId': 'me'
        });

        request.execute(function (resp) {
            var email = '';
            if(resp['emails']) {
                for(i = 0; i < resp['emails'].length; i++) {
                    if(resp['emails'][i]['type'] == 'account') {
                        email = resp['emails'][i]['value'];
                    }
                }
            }

            var Name = resp['displayName'];
            var Email = email ;
            alert(Email);
        });
    }
}

function onLoadCallback() {
    gapi.client.setApiKey('*****************');
    gapi.client.load('plus', 'v1',function(){});
}

(function() {
   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
   //po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();

// google plus登录结束