我正在使用谷歌登录API来获取用户信息。 我的java脚本代码是:
<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>
我的问题是加载谷歌登录按钮需要很长时间,所以我想更改自定义按钮 我想要解决这个问题。 感谢..
答案 0 :(得分:0)
我不熟悉客户端流程,但这很接近你要做的事情。
您可以根据需要自定义外观,但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>
答案 1 :(得分:0)
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 login end