如何自定义新的Google签名按钮？

发布于 2025-02-02 15:09:23 字数 902 浏览 4 评论 0原文

Google最近在此处宣布了一种新的用户签名方式。

https://developers.google.com/identity/indity/gsi/gsi/web?hl = en

在本教程中，该按钮是通过添加HTML代码或JavaScript创建的。

看起来，

但是，由于按钮都是在新的iframe中创建并渲染的，因此我无法按照自己的意愿自定义按钮样式。

有什么方法可以改变以前提供的按钮样式？

以前，我使用

window.gapi.load('auth2', () => {
    const auth2 = window.gapi.auth2.init(options);
    auth2.attachClickHandler(
      idButtonRef.current,
      {},
      onSuccessCallback,
      onFailCallback,
    );
  });

iDbuttonref.current是按钮，而我所需要的只是按照上述代码显示的按钮和EventListener。因此，我能够根据需要创建按钮样式。

有没有办法通过Google用户签名的新方法来执行此操作？

原文

Google recently announced a new way of user-signing-in here.

https://developers.google.com/identity/gsi/web?hl=en

With this tutorial, the button was created by adding HTML code or javascript.

which looks like,

But since the button is all created and rendered in a new Iframe, I can’t customize the button style as I want.

Is there any way to change the button style as it was offered before?

Previously, I used

window.gapi.load('auth2', () => {
    const auth2 = window.gapi.auth2.init(options);
    auth2.attachClickHandler(
      idButtonRef.current,
      {},
      onSuccessCallback,
      onFailCallback,
    );
  });

idButtonRef.current is the button and all I need was just attach the button and eventlistener as the above code shows. So I was able to create the button style as I want.

Is there a way to do this with a new way of google user signing?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

箹锭⒈辈孓 2025-02-09 15:09:23

这是我自己（而不是优雅）自定义按钮的方法。我制作“正确”的Google按钮，然后将单击处理程序添加到我的自定义按钮中。我们需要在DIV上触发单击（），并使用角色=按钮属性。

我使用普通JavaScript的示例，但是您应该轻松地与React一起做类似的东西。JS：

CSS：

.g_id_signin {
    display: none;
}

HTML：

<div id="g_id_onload"
     data-client_id="{{GOOGLE_CLIENT_ID}}"
     data-login_uri="http://localhost:3000/google"
     data-ux_mode="redirect">
</div>

<div class="g_id_signin"
     data-type="icon"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

<button id="custom-google-btn">Continue with Google</button>

JavaScript：

const googleBtn = document.getElementById('custom-google-btn');

googleBtn.addEventListener('click', () => {
    document.querySelector('.g_id_signin div[role=button]').click();
});

It's my own (and not elegant) way to customize button. I make "right" Google button invisible and then add click handler to my custom button. We need to trigger click() on div with role=button attribute.

My example with plain JavaScript, but you should easily make something similar with React.js:

CSS:

.g_id_signin {
    display: none;
}

HTML:

<div id="g_id_onload"
     data-client_id="{{GOOGLE_CLIENT_ID}}"
     data-login_uri="http://localhost:3000/google"
     data-ux_mode="redirect">
</div>

<div class="g_id_signin"
     data-type="icon"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

<button id="custom-google-btn">Continue with Google</button>

JavaScript:

const googleBtn = document.getElementById('custom-google-btn');

googleBtn.addEventListener('click', () => {
    document.querySelector('.g_id_signin div[role=button]').click();
});

回复收藏 0 原文

~没有更多了~