[英]How can I get two Sign-in with Google buttons executing different actions?
As title says, I have two custom Sign-In with Google buttons and I want each button redirects to a certain link but when I test an example both buttons execute the same action of the second button. 如标题所示,我有两个自定义的Google登录按钮,我希望每个按钮都重定向到某个链接,但是当我测试示例时,两个按钮都执行与第二个按钮相同的操作。 This is my example displaying alerts in this case:
这是我在这种情况下显示警报的示例:
<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>
This customButton01 button displays an alert "Button 01" after login with gmail account, this is the code: 使用gmail帐户登录后,此customButton01按钮显示警报“按钮01”,这是代码:
<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>
In customButton02 button is the same code but with the difference of display an alert "Button 02": 在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>
So I want when I sign-in clicking on "Sign-In Button01" displays "Button 01" alert, and when I sign-in clicking on "Sign-In Button02" displays "Button 02" alert, but actually both buttons display the same "Button 02" alert, I tried to change function name but it's still the same. 所以我想在登录时单击“登录Button01”显示“按钮01”警报,而在登录时单击“登录Button02”显示“按钮02”警报,但实际上两个按钮都显示相同的“按钮02”警报,我尝试更改功能名称,但仍然相同。
How can I modify it? 我该如何修改?
I'd like some help. 我需要一些帮助。
You've got two definitions for the same function attachSignin
, so the 2nd erase the 1st. 对于相同的函数
attachSignin
,您有两个定义,因此第二个将第一个删除。
So either you name the two of them with a different name (quicker), or you adapt attachSignin
to detect wich of your buttons is clicked and react differently (cleaner), maybe by using resp.name.givenName
or another attribute of resp
. 因此,您可以使用不同的名称(快捷键)来命名它们两者,或者您可以通过使用
resp.name.givenName
或resp
另一个属性来使attachSignin
适应检测到您的按钮被点击并做出不同的响应(更resp.name.givenName
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.