Google branding for login button - Google Drive Repository

Google branding for login button - Google Drive Repository

by Nick Stebbing -
Number of replies: 6
Hi Moodlers,

I'm going through the process of getting google verification to allow users to access their google drives. Google have asked that I change the login button that appears when users first access their drive. The button needs to meet their branding guidelines here.

I've provided a screenshot from my site showing the log in button. Funnily enough when I selected the screenshot from my google drive to post here, exactly the same login button appeared, so it seems it was ok for moodle.org. Perhaps google is being a bit stricter now?

Anyway. I feel that I should be able to fix this with my modest php/css skills. But if someone could point me in the right direction that would be great. Also let me know if this should be a bug/feature request posted somewhere.

Some details: Running Moodle 4.0.4+ (Build: 20221021) on Ubuntu 20.04 LTS x64
I tried changing the theme just in case this had some effect.

Thanks,

Nick S

Screenshot showing the button to log in to access google drive files from moodle.
Average of ratings: -
In reply to Nick Stebbing

Re: Google branding for login button - Google Drive Repository

by Ken Task -
Picture of Particularly helpful Moodlers

Am replying here ... rather than developers posting ... yeah, I can understand duel postings, but ...

First ... a comment/question ... how would anyone from Google know that that button looked like - unless you went to them first and asked about issues the Google Drive and that's the only thing they could come up with - not wanting to talk Moodlese with ya! :\   Think that "login button' is generic for all such repos.

So you are not using Google Oauth2 authentication I gather .... if you were, that login button wouldn't show at all.

What happens when one clicks that "Login" button?   User should see an IAM from Google where they select their Google account and login to Google .... it then should pass back to Moodle.

Another comment: hope you maintain your 4 using git ... cause 4.0.x is pretty much right out of the shrink wrap ... it's now 4.0.5+ and 4.1.0 has been released as well.

'SoS', Ken


Average of ratings: -
In reply to Ken Task

Re: Google branding for login button - Google Drive Repository

by Nick Stebbing -
Hi Ken, thanks for the response.

I am using the Google Oauth2 authentication.

This is the behaviour I have observed. When a user first signs into moodle they can choose to log in with their google account. Then when they first use the file picker they are asked to log in again and at this point they are asked to give moodle permission for additional access including "See, edit, create and delete all of your Google Drive files". Once this has been approved users are no longer asked to log in when accessing google drive through the file picker.

As part of the verification process google asked me to submit a video showing how my site uses the google APIs. So this is where they saw the offending login button.

I did get the impression the login button was generic for all repos. I'm hoping I can intercept the repo_id and then change the button. I can see the repo_id being passed back to moodle via AJAX. Mind you, it probably wouldn't matter if I changed the generic button as this is the only repo I expect to use.

I'll post any solutions (or lack of solutions) to both forums, given the age of my post here I'm hoping there will be more response in the other one, so feel free to respond there if you have any other suggestions. And thanks for the heads up on 4.0.x. I didn't use git, but I'll be sure to update manually.

Thanks again,

Nick S
Average of ratings: -
In reply to Nick Stebbing

Re: Google branding for login button - Google Drive Repository

by Ken Task -
Picture of Particularly helpful Moodlers

On the Google end - setup of IAM for your Moodle - have you completed all tabs?   There is site ID to verify you are in control of the site, a terms of service page/link, a privacy page/link, along with the other requirements as to which api's and permissions there.

In the past, docs in moodle said one didn't need a 'system account' ... don't think that's true anymore - you do need to setup a google account and use that account for setup of the API's and IAM to be used for your Moodle.  While that Google permissions screen ask for permissions to 'grant all' - that is usually the one not already chosen.   I've not ever chosen that option.   Grant just enough to be able to interact with Google Drive but not given total control to that account used in IAM.

My observation ... IF I authenticate into a Moodle using Google (intial login to moodle), when I use repository for Google, don't see a "login" page - am not asked to authenticate again.  If I happen to have my Google Email open, and go to a Moodle, I still have to click the login link, but I won't be asked again to provide which account (ie, authenticate).

Now if, I log with a moodle manual account - such as the admin (user id 2) account, if attempting to use Google Drive icon, I will be prompted to login to Google with creds.

Hoping that helps!

'SoS', Ken


Average of ratings: -
In reply to Ken Task

Re: Google branding for login button - Google Drive Repository

by Nick Stebbing -
Hmm, it does sound like I'm using a manual moodle account rather than a google one. I might have gotten that a bit confused. I'm pretty sure I filled out all of the tabs in the google console. Google have been in touch about a number of things, so I expect that was all good. I've addressed a number of issues for them, it's just the branding of that log in button that remains. Perhaps I should have been able to avoid that second button becoming an issue, but I have a solution now anyway...

I've worked out a hack to change the button. I'll explain what I did here in case it helps someone else...
The button button seems to be created in repository/filepicker.js at the following line...

var loginform_node = Y.Node.create(M.core_filepicker.templates.loginform);

To hack the button I looked at the value of M.core_filepicker.templates.loginform and changed it to show the image on the button. Then I replaced the above line with this...

if (repository_id == 9){
hack = '<insert edited code from M.core_filepicker.templates.loginform>'
var loginform_node = Y.Node.create(hack);
} else {
var loginform_node = Y.Node.create(M.core_filepicker.templates.loginform);
}

Note that on my installation the google repository (googledocs) has id 9. I'm guessing this isn't always the case. Also the modified html didn't appear correctly after I pasted it in. I'll upload an image instead to show this.

Hopefully I'll be able to satisfy google with this (or by showing the second button isn't needed).

Thanks again,

Nick SImage of the code I used to add a google branded image to the login button.
Average of ratings: -
In reply to Nick Stebbing

Re: Google branding for login button - Google Drive Repository

by Ken Task -
Picture of Particularly helpful Moodlers

Good work!  If I may ... a reminder ... if using git for you moodle core code, make sure you commit your change (think that's what it's called) for future updates or upgrades might actually replace what you have done to get it to work with your site.

At the very least, keep some documentation so you can replicate the fix IF an update/upgrade whacks it! smile

'SoS', Ken


Average of ratings: -
In reply to Ken Task

Re: Google branding for login button - Google Drive Repository

by Nick Stebbing -
Sorry, for the late update (went into holiday mode). Just confirming that I was granted google verification and the change I made above was the main issue.

There were a few issues that I had to address with my verification video, mainly just not providing the right detail. For example google needs to be able to see the client id in the URL during the sign-in process.

I was asked to consider a reduced scope. The suggestion was that /auth/drive.file might be enough. The description for this is "See, edit, create, and delete only the specific Google Drive files you use with this app". I explained that this wasn't suitable because the site was being used to support face-to-face teaching where students would be creating files independently that they would then need to submit.

Anyway, it's all go now. Students are using it and it's making a big difference.
Thanks, Nick
Average of ratings: -