Custom Login Page + Login with Microsoft

Custom Login Page + Login with Microsoft

by Oliver James -
Number of replies: 12
Dear Moodlers,


I am really hoping you can come to my rescue. There has been a change of senior leadership team and the new people are looking to introduce a complete Microsoft experience. E.g. Scrap Moodle in favour of Microsoft Teams.

Anyway, enough of my problems, I want to create a custom logon page that allows people to use the "Login with Microsoft". 

I have created my own custom login page and looked at the standard login page PHP and there isnt anything about the OAUTH2. So I dont know how to implement it. I copied the link from the basic page,but had issue with the session key.

 

Please can someone talk me though it?


Many thanks

Oliver.

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Have you read... Office365

Average of ratings: -
In reply to Howard Miller

Re: Custom Login Page + Login with Microsoft

by Oliver James -

Hi Howard, 

I have taken a cursory glance at that page, but as there wasnt anything to do with custom login pages I didnt take a closer look. Is there something on that page that I need to read specifically?

Kind regards

Oliver.

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

You don’t need a custom login page - when you configure OAuth2 services, the appropriate buttons are added to the standard login page... like the login page on this site for example.

For more info, see

Average of ratings: -
In reply to Jon Bolton

Re: Custom Login Page + Login with Microsoft

by Oliver James -

Hi Jon,

I really do need a custom login page, as the standard login page looks, well standard, no branding for my school. The OAuth2 services are configured and ready to go. A number of staff have already used to import documents from OneDrive.

I just want the code required to put that little "login with my Microsoft" button  on my page.

Kind regards

Oliver.

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

Ah sorry, that wasn’t clear in your original message.

It’s relatively straightforward to customise the login page to make it less standard. Many themes do that very successfully - but if you want a custom login page, you can create a new theme layout specific for the login page. See https://docs.moodle.org/dev/Themes for general guidance but it might be worth having a look at theme/boost/templates/core/login.mustache as a specific starting point.

Alternatively, you can add an alternate login URL - see https://docs.moodle.org/36/en/Managing_authentication#Alternate_login_URL

Remember that the login token was introduced into recent versions - see https://docs.moodle.org/dev/Login_token for more info.

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

The look of your login page is a theme "thing". It's entirely separate from the authentication method you are using.

Average of ratings: -
In reply to Howard Miller

Re: Custom Login Page + Login with Microsoft

by Oliver James -
Dear all, 


Thank you for the links, I will take a look at those today. I feel like I need to share a couple of images with you as I might, in my tiredness, have not explained it very well.

I just need the code that will allow me to put the Microsoft button like the one shown below

Credit: Moodle.org


On to my page.



With any luck the links provided will give me the answer that I am searching for.Thank you again for your support.

Oliver.

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I'm going to move this discussion to the themes forum.

I'm pretty sure that this is nothing to do with authentication. It's just the look you need to accomplish. 

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hello Oliver, Welcome to the MoodleThemes Forum.

Just to start the ball rolling, please can you tell me which version of Moodle you are using together with the name and version of the theme. If the theme is privately owned then can you tell me the name of the parent theme?

Creating a Login page is relatively easy, it just requires  a few pieces of code in order to make it look as you described through the image You posted.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Custom Login Page + Login with Microsoft

by Oliver James -

Hi Mary, 

Thank you for getting in touch.

I am currently running V3.3.5 with a view to upgrading to 3.7 as soon as we can have our bespoke theme updated for it. The current bespoke theme is based on Boost.

The snag I think is going to come from the fact that my custom login page is a very very simple. I.e. just some CSS Bootstrap, Javascript for error handling and the majority of the page is HTML. It has no relation to anything coded in Moodle. In terms of complexity, its like a 5 yr old coded it.  

I have no problem slotting in PHP code if that is what is required.

Hopefully that helps.

Kind regards

Oliver.

Average of ratings: -
In reply to Oliver James

Re: Custom Login Page + Login with Microsoft

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Those buttons are populated in loginform.mustache by:

                {{#hasidentityproviders}}
                    <h6 class="mt-2">{{#str}} potentialidps, auth {{/str}}</h6>
                    <div class="potentialidplist" class="mt-3">
                        {{#identityproviders}}
                            <div class="potentialidp">
                                <a href="{{url}}" title={{#quote}}{{name}}{{/quote}} class="btn btn-secondary btn-block">
                                    {{#iconurl}}
                                        <img src="{{iconurl}}" alt="" width="24" height="24"/>
                                    {{/iconurl}}
                                    {{name}}
                                </a>
                            </div>
                        {{/identityproviders}}
                    </div>
                {{/hasidentityproviders}}

therefore just use that as a starting point to adapt your own overridden version.

Average of ratings: -