使用自定义文本的 Google 登录网站
Posted
技术标签:
【中文标题】使用自定义文本的 Google 登录网站【英文标题】：Google Sign In Website Using Custom Text 【发布时间】：2016-04-13 04:32:53 【问题描述】：我已经按照谷歌的官方教程为我的网站实现了谷歌登录： https://developers.google.com/identity/sign-in/web/sign-in
使用上面的教程，我得到了以下按钮
现在我正在尝试将按钮的文本从“登录”更改为“与 Google 联系”但没有任何反应..
我的 javascript 代码..
function onSignIn(googleUser)
var profile = googleUser.getBasicProfile();
loginpassword = profile.getId();
loginemail = profile.getEmail();
;
html 代码..
<div class="g-signin2" data-onsuccess="onSignIn">Connect with Google</div>
知道如何更改文本吗？即使我提供了客户端 ID 和 platform.js 文件的外部链接，它仍然无法正常工作..请帮助..
【问题讨论】：
【参考方案1】：来自 google 的 platform.js 库正在渲染按钮以及文本。
要覆盖它，您需要build your own custom button。来自谷歌的例子：
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = ;
var startApp = function()
gapi.load('auth2', function()
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init(
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
);
attachSignin(document.getElementById('customBtn'));
);
;
function attachSignin(element)
console.log(element.id);
auth2.attachClickHandler(element, ,
function(googleUser)
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
, function(error)
alert(JSON.stringify(error, undefined, 2));
);
</script>
<style type="text/css">
#customBtn
display: inline-block;
background: #4285f4;
color: white;
width: 190px;
border-radius: 5px;
white-space: nowrap;
#customBtn:hover
cursor: pointer;
span.label
font-weight: bold;
span.icon
background: url('path to your button image') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
border-right: #2265d4 1px solid;
span.buttonText
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
</style>
</head>
请注意，您可以找到实际的图标文件on Google's server for download。
设置样式和 Javascript 后，您可以通过 HTML 调用按钮本身，此时您可以指定文本：
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>
请注意，您必须遵守Google's branding guidelines。
【讨论】：
这主要是可行的，但是他们的例子是不完整的，因为谷歌图标 URL 是一个相对于网页服务器的 URI。该示例在从 Google 开发人员的站点提供时有效，因为该图标存在，但默认情况下，任何人都不会在他们自己的服务器上进行测试。 Google 带有品牌内容的 zip 不包含图标，也没有讨论从何处获取官方图标。 @Nick 我已编辑以澄清 Google 示例代码中包含的示例 URL 必须指向有效的图像文件。来自 Google 的示例图标 is available for download。 谢谢，不要敲你的例子，因为谷歌的文档在这里失败了，只是把图标作为例子的一部分，而不是在任何官方位置。期望他们为完整的按钮渲染提供类似于 zip 的图标集，但到目前为止还没有运气。 @Nick 是的，他们的品牌文件以及制作自己的品牌指南的措辞非常混乱。您无法更改图标的大小，但如果您想创建不同大小的自定义图标，请使用示例大小...嗯？【参考方案2】：或者您可以更改使用 Javascript 生成的跨度文本，试试这个 用代码中的“DivID”替换您的 Div id
setTimeout(function ()
$('#DivID div div span span:last').text("Sign up with Google");
$('#DivID div div span span:first').text("Sign up with Google");
, 3000);【讨论】：
【参考方案3】：对于 HTML 部分，例如我们有这样的：
<div id="GoogeSigninButton" data-onsuccess="onSignIn" class="g-signin2"></div>
而对于按钮代码后面的脚本标签，是这样的：
<script>
setTimeout(function ()
$('#GoogeSigninButton div div span span:last').text("Custom Sign in Text");
$('#GoogeSigninButton div div span span:first').text("Custom Sign in Text");
$('#GoogeSigninButton div div span span:last').css("font-family", "Arial");//for font formatting
$('#GoogeSigninButton div div span span:first').css("font-family", "Arial");//for font formatting
, 10000);
</script>
它会在页面加载后 10 秒左右将按钮的文本转换为您需要的自定义文本和自定义字体。
【讨论】：
以上是关于使用自定义文本的 Google 登录网站的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法使用 Spring Security 实现 google 登录和使用 jwt 令牌自定义登录？