我有一个使用 Google 登录的页面。它大部分时间都运行良好;然而,有时我没有收到代码中定义的“240 像素宽的深色主题按钮”,而是收到一个白色的小按钮,上面写着“登录”。当页面仅加载白色小按钮时,登录无法正常工作。代码不是动态的,所以我不知道为什么有时它会呈现白色按钮而不是蓝色按钮。
我的 Bootstrap 4 + JS 代码如下:
<div class="container">
<div class="row justify-content-center col-sm-10 col-md-8 col-lg-6 mx-auto">
<div id="sign_in_button" class="g-signin2 my-5"></div>
<div class="w-100 clearfix"></div>
<div id="sign_out_canvas" class="d-none my-5">
<button name="sign_out_button" id="sign_out_button" type="button" class="btn btn-light btn-sm">
<i class="fas fa-sign-out-alt mx-1"></i>
Sign out
</button>
<a href="javascript:void();" onclick="signOut();"></a>
</div>
</div>
</div>
</cfoutput>
<script>
function renderButton() {
gapi.signin2.render('sign_in_button', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function onSuccess(googleUser) {
console.log('Google User logged in successfully.');
$('div#sign_out_canvas').toggleClass('d-none');
var profile = googleUser.getBasicProfile();
$.ajax({
url: '/model/security.cfc',
method: 'POST',
data: {
method: 'signIn',
'id': profile.getId(),
'full_name': profile.getName(),
'given_name': profile.getGivenName(),
'family_name': profile.getFamilyName(),
'image_url': profile.getImageUrl(),
'email': profile.getEmail()
}
}).done(function(Data) {
window.location.replace("/?Action=Home.Home");
});
}
function onFailure(error) {
console.log(error);
}
</script>