Javascript 如何让两个执行不同操作的Google按钮登录?
正如标题所说,我有两个自定义的谷歌按钮登录,我希望每个按钮重定向到某个链接,但当我测试一个示例时,两个按钮执行第二个按钮的相同操作。这是我在这种情况下显示警报的示例: 此customButton01按钮在使用gmail帐户登录后显示警报按钮01,代码如下:Javascript 如何让两个执行不同操作的Google按钮登录?,javascript,jquery,google-signin,Javascript,Jquery,Google Signin,正如标题所说,我有两个自定义的谷歌按钮登录,我希望每个按钮重定向到某个链接,但当我测试一个示例时,两个按钮执行第二个按钮的相同操作。这是我在这种情况下显示警报的示例: 此customButton01按钮在使用gmail帐户登录后显示警报按钮01,代码如下: <script src="https://apis.google.com/js/api:client.js"></script> <script> var googleUser = {}; var star
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
auth2 = gapi.auth2.init({
client_id: 'myID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
});
attachSignin(document.getElementById('customButton01'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp) {
alert("Button 01"); //Display an alert after login
});
});
}, function(error) {
//alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<script>
function onSuccess(googleUser) {
var profile = googleUser.getBasicProfile();
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
//Display the user details
request.execute(function (resp) {
signOut();
});
});
}
function onFailure(error) {
alert(error);
}
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
//$('.userContent').html('');
//$('#gSignIn').slideDown('slow');
});
}
</script>
<hr style="margin-bottom: 10px;margin-top: 10px;border-top: 1px solid #DDD;">
<div id="customButton01" style="display: inline-block;"></div>
<script>startApp();</script>
在customButton02中,按钮的代码相同,但显示警报按钮02的代码不同:
<script>
var googleUser = {};
var startApp2 = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'myID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customButton02'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp) {
//alert(resp.name.givenName);
alert("Button 02"); //Display another alert
});
});
}, function(error) {
//alert(JSON.stringify(error, undefined, 2));
});
}
</script>
(...)
<hr style="margin-bottom: 10px;margin-top: 10px;border-top: 1px solid #DDD;">
<div id="customButton02" style="display: inline-block;"></div>
<script>startApp2();</script>
所以我想当我登录时,单击登录按钮01显示按钮01警报,当我登录时,单击登录按钮02显示按钮02警报,但实际上两个按钮都显示相同的按钮02警报,我尝试更改函数名称,但仍然相同
如何修改它
我需要一些帮助。同一个函数有两个定义attachSignin,因此第二个定义删除第一个定义
因此,您可以使用不同的名称更快地命名这两个按钮,或者使用attachSignin来检测您的按钮是否被单击,并做出不同的反应。可能可以使用resp.name.givenName或resp的另一个属性。如果您可以在fiddlewhats renderButton和customButton01中的gSignIn中设置它,那就太好了
<script>
var googleUser = {};
var startApp2 = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'myID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customButton02'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp) {
//alert(resp.name.givenName);
alert("Button 02"); //Display another alert
});
});
}, function(error) {
//alert(JSON.stringify(error, undefined, 2));
});
}
</script>
(...)
<hr style="margin-bottom: 10px;margin-top: 10px;border-top: 1px solid #DDD;">
<div id="customButton02" style="display: inline-block;"></div>
<script>startApp2();</script>