Implementing SSO using jsConnect 1.4.1 with Vanilla 2.0.18.10 - Part II

TennisCircleNet

Part II describes how I overcame some of the appearance and navigation issues encountered when deploying Vanilla through SSO in an embedded format.

2. Controlling user navigation and appearance

2.1 Side menu navigation buttons launch full site within embedded frame

If you're deploying non-embedded Vanilla, this probably isn't a problem for you, but for embedded installations clicking the sign-in and register buttons result in your full site launching within the embedded frame. This just looks ugly! To get control over it, we go back to the jsConnect class file. Line 90 is the key line. I modify this line to make things look pretty when your user is already signed in, then I add some code to take control when a user is not signed in.

File: forum\plugins\jsconnect\class.jsconnect.plugin.php

     Line 90: 
$Result = '<div class="JsConnect-Guest">&nbsp; &nbsp; '.Anchor(sprintf(T('Sign In with %s'), $Provider['Name']), $SignInUrl, 'Button 

Primary SignInLink').$RegisterLink.'</div>';  //sblaine replaced <div class="JsConnect-Guest"> with <div class="JsConnect-Guest">&nbsp; &nbsp; 

     Line 92: Code snippet added.
//sblaine added this section
        if(!isset($_COOKIE['signed_in_id'])) {
            $Result = '<div class="JsConnect-Guest">&nbsp; &nbsp; Members: <a href="../sign-in.php" target="_parent">Sign-

in</a></div><div class="JsConnect-Guest">&nbsp; &nbsp; Non-Members: <a href="../join.php" target="_parent">Sign-up</a></div>';
        }
//sblaine section end

When you deploy the modified file you'll see that the sign-in and register buttons have been replaced with links to sign-in or sign-up and your pages will now launch fully in the parent window.

2.2 Controlling banner menu sign-in

If your users click the sign-in link on the banner menu, they're offered the same buttons that appear in the side menu and clicking these buttons results in the same ugly full site launch within the embedded frame. Fortunately, the fix we've already applied in section 2.1 corrects this issue for the banner menu navigation as well. However, clicking the banner menu sign-in launches a popup that offers your users the option of signing-in through your site or signing-in directly to the forum. You may wish to restrict the direct sign-in option by modifying Vanilla code such that the direct sign-in option is not displayed. Note the changes I made to the Vanilla signin.php file attached.

File: forum\applications\dashboard\views\entry\signin.php

   // Render the main signin form.
   echo '<div class="MainForm">';

   //include $this->FetchViewLocation('passwordform');  //sblaine commented out this line

   //echo $this->Data('MainForm');  //sblaine commented out this line

   //echo '</div>';  //sblaine commented out this line

   //sblaine added this section

    if(!isset($_COOKIE['signed_in_id'])) {
        echo '&nbsp; &nbsp; You must sign-in or sign-up through TennisCircle.net.</div>';
    }
    else {
        echo '</div>';
    }

   //sblaine section end

   // Render the buttons to select other methods of signing in.
   if (count($Methods) > 0) {
      //echo '<div class="Methods">'  //sblaine commented out this line
      //   .Wrap('<b>'.T('Or you can...').'</b>', 'div');  //sblaine commented out this line

      foreach ($Methods as $Key => $Method) {
         $CssClass = 'Method Method_'.$Key;
         echo '<div class="'.$CssClass.'">',
            $Method['SignInHtml'],
            '</div>';
      }

      //echo '</div>';  //sblaine commented out this line

    //sblaine added this section 
    if(!isset($_COOKIE['signed_in_id'])) {
        echo '<br /></div>';
    }
    else {
        echo '</div>';
    }  
    //sblaine section end

   }

echo '</div>';

To enhance the aesthetics of the new sign-in popup, I made one small change to jsconnect.css as follows:

File: forum\plugins\jsconnect\design\jsconnect.css
.JsConnect-Container { overflow: hidden; margin: 5px 0; padding: 15px ; /* //sblaine added this line */ }

2.3 Restricting changes in the Vanilla user profile

You may allow your users to maintain a profile on your site. Once you deploy Vanilla it has it's own user profile system built-in and from within the Vanilla profile users can change their password or upload a photo, they can even change their user name and email address. Unfortunately, without writing a significant chunk of code, these changes will not be reflected within the user account of my main site. I opt to restrict access to these Vanilla profile modifications rather than write code to link any changes back to my main site.

I modify sidemenu.php such that links to 'Change My Password' and 'Change My Picture' are not displayed. Note that this does not disable these functions, but requires that a user guess the link url and type it into the browser in order to access the functions.

File: forum\applications\dashboard\views\modules\sidemenu.php

             // Loop through all the links in the group.
         foreach ($Item['Links'] as $Link) {
            //echo "\n  <li".Attribute($Link['Attributes']).">",  //sblaine commented out this line
            //   Anchor($Link['Text'], $Link['Url']),   //sblaine commented out this line
            //   '</li>';   //sblaine commented out this line

            //sblaine added this section

            if($Link['Text'] <> 'Change My Password' AND $Link['Text'] <> 'Change My Picture') {
                echo "\n  <li".Attribute($Link['Attributes']).">",
                Anchor($Link['Text'], $Link['Url']),
                '</li>';
            }

            //sblaine section end

         }

         echo "\n", '</ul>';
      }

      echo "\n", '</div>';
   }
   ?>
</div>

I allow the 'Edit My Account' link to remain visible within the user profile even though this link navigates to a popup that allows changes to username and email address. I modify edit.php to disable the username and email address form fields to prevent editing as follows:

File: forum\applications\dashboard\views\profile\edit.php

      <?php
         echo $this->Form->Label('Username', 'Name');
         $Attributes = array();

         if (!$this->CanEditUsername) {
            $Attributes['disabled'] = 'disabled';
         }
         $Attributes['disabled'] = 'disabled';  //sblaine added this line
         echo $this->Form->TextBox('Name', $Attributes);
      ?>
   </li>
   <li>
      <?php
         echo $this->Form->Label('Email', 'Email');
         //echo $this->Form->TextBox('Email');  //sblaine commented out this line
         $Attributes['disabled'] = 'disabled';  //sblaine added this line
         echo $this->Form->TextBox('Email', $Attributes);  //sblaine added this line
      ?>
   </li>

I hope you find this tutorial useful. I'd like to thank the Vanilla Forums development staff for a great product. Please, keep up the good work.

Thanks.

Steven Blaine, Ph.D.

JanHoos

Hi @TennisCircleNet‌! Great write ups! Both parts helped tremendously to get it working on my website! I'm using Wordpress and could not get it to work. Thanks to you its working. I did not even think about the fact that e-mail and username was not being send back. So thanks to your fix, my visitors only have one set of credentials to think about.

Funny thing, the pop-up in the embedded frame was no issue for me. Even tho I have it on embed. I did implement the rest tho and I got a strange "bug" when implementing the changes on sidemenu.php

When I log in to the dashboard, all the pages are pushed down. At first I thought it was not working anymore until I scrolled down

Another thing I thought would increase user experience was adding a line to the second change, on edit.php.

echo 'You can change your e-mail and username on the mainsite: www.domain.com/wp-admin/profile.php';

Working with Wordpress, the screenname is not being picked up by Vanilla, so I removed the username field all together in Vanilla. Looks like Vanilla only takes the username from Wordpress and users cant modify that.

TennisCircleNet

@JanHoos - Glad to hear that my tutorial helped you get set up. I'm not sure why the 'Manage Users' page is being pushed down like that. I didn't have that problem so I didn't look into it. Sorry I can't be of more help with that. Since that is not a page presented to your users, hopefully you don't see it as a big issue.

Thanks.

Steven Blaine, Ph.D.
Webmaster - http://www.TennisCircle.net

JanHoos

Good to know its not a problem you are having! Means I'm going to have to back and fix it. Maybe I did something wrong with the code in your explanation. Thanks for your answer.

Its not a problem, but I think its causing problems in the theme itself as well. On iPad for instance, the theme keeps expanding to the right. :P Thats why I wanted to see if you or anyone else had this dashboard problem as well, so I knew I had done something wrong or not gehehe.

JanHoos

I tried to look for a fix but could not find any. Any chance I can try out your files to see where it is going wrong? I think I only need the files from the step 2 part.

pojo

@TennisCircleNet : Hi, i really appreciate this tutorial, but it's very excellent if we have tutorial for java...

hgtonight

@pojo The only difference is how you implement the sso endpoint. Here is a link to the Java library Vanilla Inc. provides: https://github.com/vanilla/jsConnectJava