[Dúvida] Como estilizar o botão de login do google?

google.accounts.id.initialize({ client_id: '${environment.properties["sgi.google-api-client-id"][0]}', callback: handleCredentialResponse }); google.accounts.id.renderButton( document.getElementById("google_login"), { shape: "pill", text: "signin_with", size: "large", logo_alignment: "center", locale: "pt" } );

A integração do botão de login do Google usando a API google.accounts.id.renderButton geralmente cria um iframe para garantir a segurança e a integridade do processo de login. No entanto, existem maneiras alternativas de criar um botão de login do Google sem usar o renderButton, permitindo mais flexibilidade na estilização. Você pode implementar a autenticação do Google usando o OAuth 2.0 diretamente e estilizar seu próprio botão de acordo com suas necessidades.

HTML:

<button id="custom-google-login">Login com Google</button>

JS:

document.getElementById('custom-google-login').addEventListener('click', function() {
    // Inicie o processo de autenticação do Google
    signInWithGoogle();
});

function signInWithGoogle() {
    const clientId = '${environment.properties["sgi.google-api-client-id"][0]}';
    const redirectUri = 'URL_DE_REDIRECIONAMENTO'; 
    const scope = 'email profile';

    const authUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=token&scope=${scope}`;

    // Redirecione o usuário para a página de login do Google
    window.location.href = authUrl;
}

CSS:

#custom-google-login {
    background-color: #dd4b39;
    color: white;
}