Question

正如标题所说，我有两个自定义登录与谷歌按钮，我希望每个按钮重定向到某个链接，但当我测试一个例子时，两个按钮执行第二个按钮的相同操作。这是我在这种情况下显示警报的示例：

<style>
#customButton01{width:280px;background:url(mysite.com/btn01.jpg) no-repeat;height:60px;cursor:pointer;}
#customButton02{width:280px;background:url(mysite.com/btn02.jpg) no-repeat;height:60px;cursor:pointer;}
</style>

此 customButton01 按钮显示警告＆＃34;按钮01＆＃34;用gmail帐户登录后，这是代码：

<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 按钮中是相同的代码但不同的是显示警告＆＃34;按钮02＆＃34;：

<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>

所以当我登录时点击＆＃34;登录Button01＆＃34; 显示＆＃34;按钮01＆＃34;警报，当我登录时点击＆＃34;登录Button02＆＃34; 显示＆＃34;按钮02＆＃34;警报，但实际上两个按钮显示相同的＆＃34;按钮02＆＃34;警告，我试图更改功能名称，但它仍然是相同的。

我该如何修改？

我想要一些帮助。

Answer 1

您对同一个函数attachSignin有两个定义，因此第二个删除第一个。

因此，要么使用不同的名称命名其中两个（更快），要么调整attachSignin来检测按钮的点击并做出不同的反应（更干净），也许使用resp.name.givenName或resp的其他属性。

如何通过执行不同操作的Google按钮进行两次登录？

1 个答案: