Integrate Collabora Online with Web Applicatjons Collabora - PowerPoint PPT Presentation

FOSDEM 2020 Integrate Collabora Online with Web Applicatjons Collabora Productjvity By Andras Timar Collabora Productjvity andras.tjmar@collabora.com @tjmar +tjmar74

C Collabora Online Uses LibreOffjce/Collabora Offjce under the hood for document rendering ● Not a standalone applicatjon… ● Does not implement user authentjcatjon ● Does not implement document storage ● Designed to be a building block of a web applicatjon that needs ● Document viewer ● Document editor ● Collaboratjve editjng ● ODF, OOXML, plus many more fjle formats are supported ● Therefore integratjon is the key to success! ● collabora online . com

C How to experience a success story? Install CODE on a dedicated server ● htups://www.collaboraoffjce.com/code/ ● Setup the SSL for the htups access ● Install the integratjon between your document storage and the Online ● Or if your are integratjng yourself, implement the REST endpoints ● And modify your webapp to add iframe for the Online ● Enjoy the success! :-) ● Or maybe you have an additjonal need before you are completely happy with Online in your webapp? collabora online . com

C Alfresco Alfresco connector available thanks to Arawa htups://github.com/ArawaFr/libreoffjce-online-repo ● Implemented in Java ● To match their integratjon needs, Collabora ● has implemented support for monitoring the loolwsd health Several Online nodes can connect ● to one central place that collects the state collabora online . com

C EGroupware Connector available thanks to eGroupware from their repository htups://github.com/EGroupware/collabora ● Implemented in PHP + JavaScript ● To match their integratjon needs, ● we have Improved the printjng in Firefox ● Updated dockerfjles ● collabora online . com

C Kolab Connector available thanks to Kolab themselves. htups://git.kolab.org/source/wopi/ ● To match their integratjon, we had ● to expose various functjonality via postMessage Like closing all the views ● from the master view, downloading or printjng collabora online . com

C Matuermost Connector writuen by Florin Ciornei (Collabora) htups://github.com/CollaboraOnline/collabora-matuermost ● Writuen in Go ● Supported document formats ● can be opened from the chat in a popup editjng window Collaboratjve editjng works ● Result is saved back to the atuachment ● collabora online . com

C Moodle Plugin to add a live document editor to the Moodle e-learning course htups://github.com/learnweb/moodle-mod_collabora ● students and teachers can ● have “in-class collaboratjon” on documents collabora online . com

C Nextcloud Connector originally developed by Collabora, but now with features from Nextcloud htups://github.com/nextcloud/richdocuments ● Implemented in PHP and JavaScript ● Many features in the Online were implemented to match the Nextcloud’s integratjon ● needs, like: Specifjcatjon of avatars in CheckFileInfo ● Support for templates – TemplateSource in CheckFileInfo ● /hostjng/capabilitjes – for early check of whether a partjcular version supports ● some features or not And many more... ● collabora online . com

C ownCloud Originally implemented by Collabora, now with features from ownCloud. htups://github.com/owncloud/richdocuments ● Implemented in PHP and JavaScript ● To match their integratjon needs, ● we are improving Watermarking substantjally So that each user in a document ● can have a difgerent, dedicated watermark collabora online . com

C Pydio Available thanks to Pydio htups://github.com/pydio/pydio-core/tree/develop/core/src/plugins/editor.libreoffjce ● Implemented in PHP and JavaScript ● To match their integratjon needs, we ● had to extend what characters can be used in the access_token collabora online . com

C Roove Connector implemented by SofuDistributjon For their integratjon, we had ● to improve Save as and full-screen handling of presentatjons. collabora online . com

Need to create an own integratjon?

C The Online uses a WOPI-like protocol htups://wopi.readthedocs.org/en/latest/ WOPI-like host (provides data) Webapp integrating the Online Iframe with OnLine editor WOPI-like client (provides editing) collabora online . com

C REST endpoints To download the fjle: GET htups://<WOPI host URL>/<...>/wopi*/fjles/<id>/contents?access_token=<token> ● Upload back: POST htups://<WOPI host URL>/<...>/wopi*/fjles/<id>/contents? ● access_token=<token> CheckFileInfo to provide informatjon about the fjle: htups://<WOPI host URL>/<...>/wopi*/fjles/<id>?access_token=<token> ● collabora online . com

C Security token To be able to access fjles securely, an authentjcatjon token has to be passed to the Online From the Online point of view, it can be any random number / string that will be ● passed as part of the URL when accessing the document storage Should be generated according to the user who is logged in + the document But don’t make it possible to guess the token! ● The ideal is to maintain a list on the server + have a random number (mapped to the ● element in the list) as the token collabora online . com

C JavaScript part – embedding the iframe The Connector connects to the discovery service To get the informatjon about how to initjate the iframe, the 1 st call has to be an ● access to a “discovery” xml In theory, difgerent document types can be served by difgerent servers ● Then create the iframe that contains the Online Has to be provided with the access token via a POST request ● And then only gets called back when the document is closed again ● collabora online . com

C Recommended steps Add WOPI REST endpoints to your web service, for the moment returning only a “Hello World” ● message. Implement the CheckFileInfo endpoint ● Now you can see a constructed document containing just “Hello World” in the Online in a simple ● HTML page: <html><body> ● <form actjon="WOPISrc=htups://<WOPI host URL>/<...>/wopi/fjles/<id>" enctype="multjpart/form-data" method="post"> <input name="access_token" value="test" type="hidden"/> <input type="submit" value="Load Collabora Online"/> </form></body></html> In your webapp, create an iframe that embeds the Online ● Implement the real access_token handling ● Update the REST endpoints to actually load real data ● Implement the PutFile endpoint to really save the data ● collabora online . com

Need to further tweak the functjonality?

C Extending without Touching the Online Code Sometjmes the functjonality is too specifjc to the integratjon via postMessage It’s possible to add a butuon to the toolbar via a message ● And react on the user pressing it ● See loleafmet/reference.html ● collabora online . com

C postMessage API For signalling from the iframe back to the parent frame. You can use this afuer all the JS is loaded – which is signalled by App_LoadingStatus ● with Status “Frame_Ready”. When that happens, the parent has to send Host_PostmessageReady. Then for insertjng a butuon, the host can use Insert_Butuon ● Each tjme the butuon is pressed, the host receives a message Butuon_Clicked with the ● id of the butuon. collabora online . com