9 Replies Latest reply on Oct 4, 2017 8:13 AM by po0040447

    Login Page Tutorial

    alopez

      Hi Learn Dev Team,

       

      I have many clients requesting an official tutorial describing how to personalize the Learn Login Page. So far I have sent some examples I have from other customers and others made by us, but, Do you have a complete tutorial which includes CSS, Background Images (sizes, extentions allowed), BbTags used in the jsp file, how to add common snippets like twitter or facebook , etc.?

       

      Thanks in advance for your support.

        • Re: Login Page Tutorial
          lowey.kevin

          I did a minor modification to the login page at the University of Saskatchewan. This was done for three main goals:

          1. Emphasize the CAS login button as we want people to log in using our campus CAS system
          2. Hide the default Blackboard login form, but have it available to display for non-cas accounts (test accounts, etc.)
          3. Apply some branding changes that were specific to the login page.

           

          This was accomplished as follows:

          1. Added style information to use "#loginForm {display:none;}" so that the login form was hidden by default.
          2. Added this text to add the link "Test Account Login" which displays the login form if needed:
            <p class="center"><a href="#" onclick="document.getElementById('loginForm').style.display='block';">Test Account Login</a></p>
          3. Added another link inside the "loginBox" area that said "Log in using CAS" which linked to the same CAS link that is normally shown at the bottom of the login form. The branding was modified to display this as a large button.
          4. There were also a few minor branding changes to change colours, etc. but those are not major. Those branding changes were put into the area in the login.jsp file reserved for that purpose.

           

           

          Somewhat related, a few years ago I did a session at DevCon about branding, where I made Blackboard look like a terminal on the "Star Trek The Next Generation" TV series. (That was back when they were calling Blackboard Learn "Next Generation").

           

          Part of that was customizing the login page. I used similar javascript as above to hide the default login button but did a lot more branding changes. Clicking on "ENTER AUTHORIZATION CODE" was similar to selecting "Test Account Login" on our production system. On the "Star Trek" login page I also embedded audio clips that auto played to give the Star Trek authenticity. That was just normal HTML code on the page. The images and audio clips I stored in the "institution" area as files that were world readable, then just linked to them from the login page.

           

          You can see it at Demo of Starfleet Academy LCARS terminal implemented with Blackboard Learn - YouTube

           

          Enjoy!

          - Kevin Lowey

          6 of 6 people found this helpful
            • Re: Login Page Tutorial
              fage

              Hi Kevin Lowey thank you for the detailed description of your login page changes.

               

              Added another link inside the "loginBox" area that said "Log in using CAS" which linked to the same CAS link that is normally shown at the bottom of the login form. The branding was modified to display this as a large button.

               

              This is very similar to what I am trying to do, only we are using SAML authentication. How did you unpick the content of <loginUI:loginForm /> so that it builds the CAS login link dynamically? The redirectURL can change depending on where the page request came from, so hard coding it will not work in situations where another system uses Blackboard for authentication (and then on to the original system). Which is the issue I am having.

               

              Many thanks,

              Alice

                • Re: Login Page Tutorial
                  lowey.kevin

                  Hi,

                  You can see our login page at https://bblearn.usask.ca/

                   

                  First thing we did is in the "custom styles go here" section we hid the entire login form by adding this:

                  /* hide the login form initially (will use javascript to display if needed */

                  #loginForm{

                      display: none;

                  }

                   

                  Later, in the "loginbox" div, I added the following. This runs the Blackboard CAS login (our provider for CAS is "_102_1") then tells the CAS provider to redirect back to the default Blackboard login location. Note that I did not include the "/" on the end of the redirect url. That is important (see next step).

                  <a href="/webapps/bb-auth-provider-cas-bb_bb60/execute/casLogin?cmd=login&authProviderId=_102_1&redirectUrl=https%3A%2F%2Fbblearn.usask.ca" id="casUrl">Log in with your NSID</a> 

                   

                  Now here's the magic that handles the correct redirect.  By default the Blackboard login uses a parameter called "new_loc" to identify where to redirect to. It does NOT include the node name, just a relative url from the root of the server.  What we need to do is to take the url in the "new_loc" and tack that on to the end of the "redirectUrl". Since it always starts with the "/", that's why we didn't add the "/" in the default redirectUrl. It is also important that the link above used the id of "casUrl". Here's the code I used to do that, which was located at the top of the <div id="loginBox"> area:

                   

                  <bbNG:jsBlock>

                  <script lang="javascript">

                    <!-- use this to add in new_loc attributes if necessary -->

                    <!-- querySt obtained from recommended login changes for old open source CAS B2 -->

                    function querySt(ji) {

                      hu = window.location.search.substring(1);

                      gy = hu.split("&");

                      for (i=0;i<gy.length;i++) {

                        ft = gy[i].split("=");

                        if (ft[0] == ji) {

                          return ft[1];

                        }

                      }

                      return null;

                    }

                    new_loc=querySt("new_loc")

                    if(new_loc!=null){

                      document.getElementById('casUrl').href += new_loc;

                    }

                    <!-- end of bit to add new_loc -->

                  </script>

                  </bbNG:jsBlock>

                   

                  The last change is that I added a link called "Test Account Login". When a person clicked that link, it ran some javascript that displayed the hidden loginForm. This lets people log into the system directly instead of via CAS (for test accounts, admin account,etc.). I put this just before the "div id="loginForm"" section.

                   

                  <p class="center"><a href="#" onclick="document.getElementById('loginForm').style.display='block';">Test Account Login</a></p>

                   

                  Hope this helps (and all the HTML code came through ok)

                  - Kevin Lowey

                  2 of 2 people found this helpful