Google Signin button not compliant with Google branding

[xyzulu]

If you have Google Signin enabled, on this page /clientarea.php the "Sign in with Google" breaks Google Branding Guidelines: https://developers.google.com/identity/branding-guidelines

If you try to have Google approve your integration (verify your domain) they will now turn it down until this is resolved. I have already reported this to WHMCS, but in the meantime does anyone have any suggestions for bringing this into compliance? I can see it's all CSS.. but I've not yet worked out how to resolve this and use a button like this for example: 

[wp4all]

Hi xyzulu,

quick and dirty ?

button#btnGoogleSignin1:before {
    content: url(https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png);
}

button#btnGoogleSignin1 {
    background-color: #fff0;
    border: 0px;
    padding: 0px;
}

Template is Six for multilinguale support you should maybe just use just the "G" and leave the Text by default.

$_LANG['remoteAuthn']['signInWith'] = 'Sign in with :provider';

 

Greetings Christian

Edited February 18, 2019 by wp4all

[brian!]

1 hour ago, xyzulu said:

If you try to have Google approve your integration (verify your domain) they will now turn it down until this is resolved. I have already reported this to WHMCS

and what did they say? did you get their usual waffle about not being able to give an ETA - which therefore means a hotfix could appear in the next few days, or you could still be waiting for v7.7.2 in May or beyond. 🙄

1 hour ago, xyzulu said:

in the meantime does anyone have any suggestions for bringing this into compliance? I can see it's all CSS.. but I've not yet worked out how to resolve this

I don't think it's going to need a purely CSS solution - not least because the current output is using a FontAwesome 5 Google icon and that URL of yours suggests that Google want you to use the multicoloured logo image.

you could fix it with a ClientAreaPageLogin hook that loops through the array (the button login code is in the array, not a template) and replace the button code for Google - the hook itself isn't that difficult, it's getting the required code to change it too that is more troublesome... the build button code might be of some help, but this could be fraught with issues - not least checking whether Facebook & Twitter have similar rules and then having to update all three... plus having to keep them using consistent designs.

Christian's css might be a good starting point as a temporary css hack (I don't use Google login so can't test it), but Google's guidelines state that the buttons have to be the same size (approx), so other existing social login buttons would need to be resized too to match.

[wp4all]

Here is the solution by keeping the Text and just replacing the font awesome "G" | "\f1a0" by an background image.

 

button#btnGoogleSignin1:hover {
    background-color: #fff0;
    color: #000;
}
.fa-google:before {
    content: none;
}
.btn-google {
    background-image: url(https://www.bilder-upload.eu/upload/5941a3-1550500826.png)!important;
    background-repeat: no-repeat;
    background-position: 35px 50%;
    background-color: #fff;
    border: 1px solid #000;
    padding-left: 51px;
}

You should keep in mind if you set the content to none.

.fa-google:before {
    content: none;
}

it could be missed in some other place so you should place it maybe inline coded.

In the top solution with the Button image I forgot the hover  style so just use this one above.

Greetings Christian

Edited February 18, 2019 by wp4all

[brian!]

if that works Christian, well done for putting the effort in.

[xyzulu]

Thanks for your help guys..

 

To be honest, WHMCS reply wasn't as I had hoped.. it's on their list.. but no urgency.. and also the blame was put on Google. It will be resolved in the future, but who knows when. I asked them for a quick solution like the one above here.. unfortunately the tech didn't read the ticket carefully as they gave me a solution for replacing the admin logo when configuring Google Sign-in integration.

 

If features like this are not supported, it's probably best not to use them.. maybe I'll just disable it.. but I will check out the solution above and see if Google approve it.

 

Thanks again! @wp4all and @brian!

[wp4all]

Hi @xyzulu,

please be aware that the Logo should be official from Google (Google Branding Guidelines) , the Logo under 

https://www.bilder-upload.eu/upload/5941a3-1550500826.png

was just to show what could be possible. The Link should be temporarily as this is an free upload service.

Greetings Christian

[wp4all]

Hello, @xyzulu
a customer wanted to get the whole thing implemented, while some bugs appeared I would rather suggest this change here.

Instead of hiding the Font Awesome "G" | "\f1a0" I would rather replace it by an graphic.

<-- Button --> 
.btn-google {
    background-color: #ffffff!important;
    color: #000!important;
    border: 1px solid #ccc!important;
    min-width: 187.55px;
}

<-- Googel G -->
i.fab.fa-google {
    content: url(/img/25px-Google__G__Logo.png);
    margin-bottom: -4px;
    margin-right: -4px;
    width: 28px;
    height: 18px;
}

Since the G appears in many places, you are sure that the G appears in color.

I have attached the Logo I used for it. 

 

Greetings Christian

[xyzulu]

That's a great solution.. thanks!

[xyzulu]

Ok.. what dumb thing have I done.. I've added these overrides to custom.css.. but still not seeing my changes..

[wp4all]

Hi  @xyzulu,

because this belongs to the Bootstrab *.css so you need to change it in the all.min.css .

Just open the all.min.css and add following code at the end after the "}":

.btn-google {color: #000;background-color: #ffffff;border-color: #ccc;}.fab.fa-google {content: url(../img/25px-Google__G__Logo.png);margin-bottom: -4px;margin-right: 1px;margin-left: -8px;width: 17px;height: 17px;}.btn-google.active, .btn-google:active, .btn-google:focus, .btn-google:hover, .open .dropdown-toggle.btn-google {color: #000;background-color: #ffffff;border-color: #ccc;}

The images has to be in ../templates/six/img/ than the code should work c&p.

If this is the only change you can use also the added version it should work .

Remember after every upgrade of the six template you need to add this line again.

Before upgrading WHMCS you should get an information that you have some modified Files.

Greetings Christian

 

 

all.min.css

Edited February 25, 2019 by wp4all

[xyzulu]

Perfect.. thanks

[wp4all]

Hi @xyzulu,

here is an improved version, the problem is that IE & IE Edge have some problems with css pseudo element like  content / :: before / :: after .

Under IE you should have this picture: 

You can see that the Google G is behind the font-awesome icon "G " so we change it from content to background image and hide the font-awesome icon with transparent color.

i.fab.fa-google {
    color: rgba(0, 0, 0, 0);
}

i.fab.fa-google {
    background: url(../img/25px-Google__G__Logo.png) no-repeat;
    background-size: 14px 14px;
    margin-bottom: -3px;
    margin-right: -3px;
    margin-left: -20px;
}

Now it works as well under the IE / Edge Browser:

Possible that you need to adapt the margin settings I do not use 100% Six conform Template.

 

Greetings Christian

Edited March 13, 2019 by wp4all

[xyzulu]

Thanks for your continued help.. I just hope WHMCS incorporate the correct Google branding in their next update.

[WHMCS ChrisD]

Hey all, I've noted this thread in the internal case log and have asked internally if we can look at the priority on this one 🙂

[WHMCS John]

Hi @xyzulu,

In order to use the Google Sign-in feature, it is not necessary for Google to review the integration. In my tests, creating a credential set does not require approval: https://docs.whmcs.com/Configuring_Sign-In_using_Google

Therefore I'd be interested to hear the details of your project which necessitates this?

 

Were you able to gain approval with the CSS changes suggested in this thread? These are the kind of changes we were be considering, so it will be good to have confirmation.

 

 

[xyzulu]

22 minutes ago, WHMCS John said:

Hi @xyzulu,

In order to use the Google Sign-in feature, it is not necessary for Google to review the integration. In my tests, creating a credential set does not require approval: https://docs.whmcs.com/Configuring_Sign-In_using_Google

Therefore I'd be interested to hear the details of your project which necessitates this?

You're killing me John 😉 I opened a ticket about this more than a month ago.. and it was closed twice (the second time after I reopened it).

 

Unless you request verification Google won't show your app (your integration) as authorised.. to quote them:

Quote

Authorised domains 
To protect you and your users, Google only allows applications that authenticate using OAuth to use Authorized Domains. Your applications' links must be hosted on Authorized Domains

Why do people like me need to education WHMCS on simple issues like this?

 

Quote

 

Were you able to gain approval with the CSS changes suggested in this thread? These are the kind of changes we were be considering, so it will be good to have confirmation.

 

 

Yes, see: 

 

 

Edited March 14, 2019 by xyzulu

[xyzulu]

See ticket: #IPF-991182

30 Jan 2019 I was told that this was created: #CORE-12868

 

Why was a ticket not enough? Why did this issue only come to the attention of WHMCS developers after an active community thread? In future, how do you suggest we report issues like this?

[WHMCS John]

Hi @xyzulu,

Your case is logged with the development team following your ticket, and this is still the case now.

I'm pleased to hear that the CSS changes allowed you to complete the approval process, that us helpful for us to know.

 

It was interesting that Google required approval for the apps, as we do not use any sensitive scopes. But it appears it may be related to the use of a logo on the consent screen.

So another potential workaround in the meantime might be to leave the logo blank when creating the OAuth Credentials consent screen.

[xyzulu]

5 hours ago, WHMCS John said:

So another potential workaround in the meantime might be to leave the logo blank when creating the OAuth Credentials consent screen.

A workaround would not be needed if WHMCS devoted 15mins of developer time to resolving this issue. If WHMCS uses the Google logo in their implementation they should have followed the Google guidelines. When this was brought to your attention in a ticket it should have been resolved asap. It's 6 week since my ticket.. and counting.

 

It's crazy how I was told in my ticket that this was a customization request and that WHMCS would not be able to help. Then, when I tried to get the staff member to understand the issue (despite being crystal clear) the "workaround" they provided was totally useless. And, now WHMCS staff are still debating with me/us about whether there is an issue or not in this thread and providing workaround.

Just resolve this issue please!

Edited March 14, 2019 by xyzulu

[sitesme]

Hi

We have the exact same problem but with facebook logo.

We received a "Facebook Policy Warning" saying that their logo is not compliant with their branding guidelines.

Is there any planned update to ensure that all logos (Google, Facebook, Twitter) will be compliant by their guidelines?

Thank you

[wp4all]

Hi @sitesme,

4 hours ago, sitesme said:

Is there any planned update to ensure that all logos (Google, Facebook, Twitter) will be compliant by their guidelines?

Maybe in the next release who knows .

But you can solve it on the same way as described here : Change Google

 Just use instead of i.fab.fa-google --> i.fab.fa-facebook-f and replace the Google image with that from Facebook.

i.fab.fa-google {
    color: rgba(0, 0, 0, 0);
}

i.fab.fa-google {
    background: url(../img/25px-Google__G__Logo.png) no-repeat;
    background-size: 14px 14px;
    margin-bottom: -3px;
    margin-right: -3px;
    margin-left: -20px;
}

If you have any problems or need help just contact me .

Greetings Christian

[sitesme]

Thank you @wp4all

This would be ok for a quick fix. However, I try to avoid making individual file changes as they easily get overridden when a new version comes.

I am looking for a permanent solution, hopefully, this will help all the users facing the same problem as we all do for Google, Facebook, and Twitter as well.

I hope @WHMCS John can give us an idea about when this will be taken care of.