How to plug MCImageManager into Kayako?

Discussion in 'Developing, APIs and extending' started by nibb, Oct 2, 2011.

  1. nibb

    nibb Reputed Member

    Making visual tutorials with Kayako or anything that has images in the Knowledgabse is a pain in Kayako because you to manually have to upload files and images via FTP and then set the url.

    I understand this is a limitation of TinyMCE but for less than 50$ you can buy the option to upload images directly, the money is worth vs the time you waste in productiviy. At least if you really plan to use Kayako News system and the Knowledgebase.

    But has anyone done this already? Has someone integrated MCImageManager already in Kayako?

    I want to make sure it works correctly before buying unless Kayako uses some limited implementation which could cause troubles to it.

    Thanks
     
  2. Gary McGrath

    Gary McGrath Staff Member

    Hi Nibb,

    According to the MCImageManager stuff, it should be very straight forward to add it, the tinyMCE in kayako is the latest version, so it should also be compatible, but I have never tried it.

    Gary
     
  3. nibb

    nibb Reputed Member

    Hi, I just wanted to update all you that this is not as easy as it look, specially because the plugins needs to be authenticated with Kayako.

    All I found was where the files are in Kayako which are:
    \__swift\thirdparty\TinyMCE

    As for the rest of the instructions to install the Image Manager I really want someone from Kayako to jump into this. I really do need to upload images directly for tutorials, otherwise its a pain. I bought the Image Manager for TinyMCE but integration is just plug and play like I suspected:

    Installing it as a TinyMCE plugin

    1. Unpack the imagemanager and copy it to the tinymce plugins directory (tiny_mce/plugins/imagemanager).
    2. Add imagemanager to the TinyMCE init plugins option.
    3. Add insertimage to the list of buttons in the TinyMCE init options.
    4. Reload the page and verify that the imagemanager is working by checking for browse buttons inside the link and image dialogs.
    5. Configure the filesystem.rootpath config option by editing the config.php file (tiny_mce/plugins/imagemanager/config.php)
    6. Make sure that the configured rootpath has write access.
    7. Enable and integrate your CMS with the SessionAuthenticator or any other Authenticator implementation to make it secure. You can either use your own authentication script or set a username and password in the login_session_auth.php file. If you don't add username and password settings for ImageManager, any visitor to your website may be able to upload or delete any image they like.
    (Note: You can turn off the Authenticator by setting the "authenticator" config option to nothing, empty string, but this is not recommended unless there is some other protection, this is the same thing as leaving the keys in your car while away, anyone can access and upload files to your website.)
     
  4. Gary McGrath

    Gary McGrath Staff Member

    Hi Nibb,

    For quickness, you can configure a static username and password, and then when you attempt to use the image editor, it will prompt for that username and password.

    Ideally I would create a new directory to store the images with the relevant write permissions, but in a pinch, you could use the kayako files directory

    Gary
     
  5. nibb

    nibb Reputed Member

    Yes this was initially my idea as well, but this kills the purpose of having this plugins, be as easy and with less clicks as possible to be able to upload images. If I have to manually log in then I dont see any use for it. It should use the Kayako authentication, specially if you have several users.

    But right now my main problem is that I cannot find step 2 and 3 anywhere in my Kayako.
     
  6. Gary McGrath

    Gary McGrath Staff Member

    To get it working, you will need to edit this file ( core.js ) located at __swift\themes\admin_default

    Goto line ~596, you will see this: function LoadTinyMCE() {

    Gary
     
  7. nibb

    nibb Reputed Member

    Hi, yes integrating ImageManager to TinyMCE in Kayako is as easy as uploading the plugin and editing the core.js file as pointed.

    Still a correct integration would be to use the session of the logged user in Kayako. This is my main question.

    Kayako support told me you dont need to set any logins since TinyMCE is already loaded from the staff side as a logged user so its safe.

    I just want to notify everyone that is not true. If you go this way and disabled authentication you are leaving your plugin open and anyone on the Internet can upload or delete inside the folder, this would be mean a huge security risk in your server.

    The faq its that TinyMCE is not loaded safely at all in Kayako, being inside the admin or staff side doesnt mean anything. You can still load directly in the browser the ulr of the TinyMCE image manager directly without a Kayako account and if you have authentication disabled then you leave an open server.

    Having to load in again is a pain. This is not the way its suppose to work. The plugin should use a session from Kayako to verify a logged in users. Currently I have a manual login or you can besides that protect via Apache or your webserver the folder where content is stored. But the correct way this should work with Kayako is using the Kayako logged in user.

    The plugin provides nice options via the "loggin_session_auth.php" file and in the config option. I found how to integrate this into allot of CMS like WordPress, Joomla, etc.

    Kayako said cannot support me on this its an external software. Thats sad, because Kayako doesn't provide any kind of functionality to upload images or content to the news of knowledge base, at least they used TinyMCE and they provide this feature with the external plugins but I think Kayako since it doesnt ship Kayako already with the plugin included should at least support the integration for people like me that bought it as an addon. Otherwise the editor is worthless in my case, as its just text, and I need to put images and other content in the news, faq, etc. And this is the most easy and productive way to do it.

    I hope someone comes up with how to authenticate this the Kayako user. The plugin is nice, with loads of options it can even allow each user to upload the content in its own directory. I think for business and companies this is a must be. And for this Kayako should at least put a Howto into how to integrate it nicely and safely. You can say Kayako is not responsible for the plugin but they decided to use TinyMCE for a reason vs other editors that allow to upload content as a defauft. TinyMCE is powerful and I see what they used it but they should know from the start people would feel the upload feature is a big missing feature of any CMS this days. Any software that only lets you upload a picture via a URL is considered outdated this days.
     
  8. Gary McGrath

    Gary McGrath Staff Member

    Hi Nibb,

    I can probably code the auth script to search the kayako sessions, and check if it can match IP, browser, login type ( e.g. is it staff login ) and if it can match them, then load up the image editor.

    I might also be able to make sure it will only load up if the URL is helpdeskurl/staff ( not sure though )

    Gary
     
  9. Gary McGrath

    Gary McGrath Staff Member

    Hi all,

    Attached is a php authenticator for tinyMCE Image Manager.

    It checks that the client's IP address trying to open the imagemanager matches a currently logged in staff's IP address.
    It checks the staff user is actually logged into the staff control panel
    It checks the staff user has a valid staffid
    It checks that the client browser trying to open the image manager is using the same browser as the staff member logged into the staff CP.
    Finally it checks the last activity of the staff session, and if its more than 15mins ago, it refuses to accept it as a valid session.

    thats about the best I could to do ensure it was absolutely a staff member trying to open the image editor without being able to launch into the kayako session.

    N.b. You will need to edit the file and add in your sqlserver address, database name, username and password for sql.
    Gary
     

    Attached Files:

  10. masterctrl1

    masterctrl1 Kayako Guru

    So could Kayako use this in their next version to enable Image Manager for everyone (even Kayako OnDemand)? :D
    One reason why they may be wary of offering this function is disk space. People are notorious for uploading images without sizing them for use first.
    Any chance Image Manager does this automatically? IE, resize/optimize an image for the appropriate space so you don't upload 2meg bitmaps when a 167k jpeg or 10k gif would do?
    I don't mind URLs to a separate storage space as long as the editor automates this process for you. IE, uploads an image to your designated website's image library folder and imbeds the link within the editor at the same time.
    You run into a similar issue if you want to insert flash or HTML5 tutorials. This would be best handled by the content editor.
    Otherwise writing KB articles is a very tedious process -- which it shouldn't be.
     
  11. Gary McGrath

    Gary McGrath Staff Member

    If kayako did implement it, it would be better, as they could write a session checker into it, I cannot actually check the actual session in kayako as its a protected area ( its one of the only coding pages that remains encrypted even on self hosted ).

    So I just coded an authenticator to make it secure as possible without being able to access the actual session. ( I am not even sure its possible to bypass the authenication method its using, it would require a great deal of access to a staffs members system to even begin to break it )

    Gary
     
  12. nibb

    nibb Reputed Member

    Well, if Kayako does implement this as default I would sure want my money back I paid for the plugin :). Just kidding.

    Well, having to put a username and password is annoying. Its not a big deal but it would be better if it could be restricted to a user logged in. Making this per user and session would be complicated but a start would be something very simple as just checking if you are loading the script as authenticated or not. If not then it should just dont work. Otherwise it should log the plugin.

    You can actually disabled the authentication all together in the plugin but of course you would only do this if the whole TinyMCE and plugins are loaded safely which are not. Everyone in the Internet can load the files. Saying this I saw tons of security issues in Kayako with this, you can browser almost every folder and file from a Kayako installation via the Internet, even sessions which is not good. A simple "index.html" or htaccess rule should be in place to deny access to certain parts of Kayako.

    Some stuff should also be loaded safely, that means only when a user is logged in, if TinyMCE worked this way then this would not be a problem in the first place, you could just disabled authentication all together in plugin as only logged users could load it in the first place. I think Kayako Support actually thought it works this way, this is why they told me I dont need authentication as the WYSIWYG editor is already available only for inside logged sections. Just its loaded from staff side and admin, but that is just the HTML code in the page that loads, there is no secure way in any way, and its not needed as you cannot do anything with the editor itself, but with a plugin like the ImageManager or File Manager its another story as you have access to write/read folder to upload content.

    Maybe Kayako does leave everything open (the files and core files) so they can be loaded from different systems, like the mobile versions, not sure about this. The simple solution would just make the authenticator file check if you are a logged user or not. Im sure its possible as Kayako has an API and is open to plugins and there allot of plugins that can only be used as logged user, so they must be sure checking specific variables in the session or users. Some plugins even do actions of specific users, so technically this should be possible.
     
  13. Gary McGrath

    Gary McGrath Staff Member

    Hi Nibb,

    Without kayako coding it themselves, the best your going to get is the authentication script I wrote, it does verify that you are a logged in staff member, it just does it differently than checking the actual session.

    The API is not going to work in this case, the plugin is not what you think it is, the issue is "it loads a new window and loads itself up", it acts as its own independant program. At the point the login auth script is called, its too late, its already lost access to the kayako session information. ( I tried various ways to make it access the kayako session, but since its loaded in its own new window, it has no session link with kayako )

    The auth script I wrote is pretty secure, its probably more likely they could guess the username and pasword rather than fake their way through the checks it goes through. It could be made even more secure too, like you could add if the IP address is not within your internal IP range, then do not load the plugin regardless, then only your staff could load it, and only when they are onsite.

    Gary
     
  14. Gary McGrath

    Gary McGrath Staff Member

    Ok, I have redone this to make it more secure. There are 4 files in the zip

    edit, index.php and tiny_mce_gzip.php and replace "ASASASADddfdsfsdfsdfs454545345353454dsfsdfsfsdfsdfsASASASASAS" with your own unique string ( this is effectively your very strong password, so use upper/lower case, numbers etc.. it MUST match in both files. )

    Once edited, Replace these three files in the root folder of the imagemanager directory ( __swift\thirdparty\TinyMCE\plugins\imagemanager ):
    editor_plugin.js
    index.php
    login_session_auth.php

    Replace this file in the root of the TinyMCE directory ( __swift\thirdparty\TinyMCE\ )

    tiny_mce_gzip.php

    Now if you try and use image editor directly, it will tell you that authentication failed, if you try and use it within kayako, it simply works.

    Gary
     

    Attached Files:

  15. SandBag

    SandBag New Member

    Hi Gary,

    Nice bit of coding... Thanks! I've installed the imagemanager plugin, and your lockIMkayako.zip files as directed. Made sense. Used a different salt/passphrase obviously. All perms seem correct (although we are running suPHP so 644 and 755 seems to be the order of the day)...

    When I click on the insertimage button in the TMCE editor toolbar I just get a blank dialog box... the really frustrating thing is - no errors in the apache error_log even with E_ALL enabled in PHP.INI... Plus, I have turned on debug logging in the imagemanager config.php file (at the end of it), and it isn't writing anything in to the imagemanager/logs directory.

    Any ideas? I know this is probably one for Moxie, but if you have got this to work, I suspect there is something obvious I should have done but didn't!

    Steve
     
  16. SandBag

    SandBag New Member

    I should say that I still have the default authentication details in the config.php file...

    PHP:
    // Authenication
        
    $mcImageManagerConfig['authenticator'] = "SessionAuthenticator";
        
    $mcImageManagerConfig['authenticator.login_page'] = "login_session_auth.php";
        
    $mcImageManagerConfig['authenticator.allow_override'] = "*";

        
    // SessionAuthenticator
        
    $mcImageManagerConfig['SessionAuthenticator.logged_in_key'] = "isLoggedIn";
        
    $mcImageManagerConfig['SessionAuthenticator.groups_key'] = "groups";
        
    $mcImageManagerConfig['SessionAuthenticator.user_key'] = "user";
        
    $mcImageManagerConfig['SessionAuthenticator.path_key'] = "mc_path";
        
    $mcImageManagerConfig['SessionAuthenticator.rootpath_key'] = "mc_rootpath";
        
    $mcImageManagerConfig['SessionAuthenticator.config_prefix'] = "imagemanager";

        
    // ExternalAuthenticator config
        
    $mcImageManagerConfig['ExternalAuthenticator.external_auth_url'] = "auth_example.jsp";
        
    $mcImageManagerConfig['ExternalAuthenticator.secret_key'] = "someSecretKey";
     
  17. Gary McGrath

    Gary McGrath Staff Member

    Those are the correct default settings in config.php and they dont need editing to use my script.

    After updating it all, did you goto admin Cp, disgnostics, and rebuild your cache?

    Gary
     
  18. SandBag

    SandBag New Member

    Yeah, sadly that was the first thing I did... Still investigating.
     
  19. Gary McGrath

    Gary McGrath Staff Member

    As a test, use the original index.php file and over write the one I wrote, and see if it prompts you for username/password box?

    gary
     
  20. SandBag

    SandBag New Member

    Line #37 in your index.php file has
    Code:
    require_once($basepath ."CorePlugin.php");
    
    Whereas the original file that now ships with the latest imagemanager plugin has
    Code:
    require_once(MCMANAGER_ABSPATH ."CorePlugin.php");
    They maybe changed from a $variable to a declared constant?

    Anyway - changed it to use MCMANAGER_ABSPATH and everything is fine in the world :)

    Steve
     

Share This Page