Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Integrating LibreOffice OnLine via WOPI

Integrating LibreOffice OnLine via WOPI

Presentation about how to set up your web service to use LibreOffice OnLine.

Jan Holesovsky

February 04, 2017
Tweet

More Decks by Jan Holesovsky

Other Decks in Programming

Transcript

  1. 1 / 12
    FOSDEM 2017 | Jan Holesovsky
    Integrating LibreOffice
    OnLine via WOPI
    Jan Holesovsky
    Collabora Productivity
    [email protected]
    www.CollaboraOffice.com
    @CollaboraOffice

    View full-size slide

  2. 2 / 12
    FOSDEM 2017 | Jan Holesovsky
    How to integrate into your webapp

    Install LibreOffice OnLine on a dedicated
    server / VM (other than the
    ownCloud/Nextcloud install)

    And setup the SSL for the https access

    Implement the REST endpoints

    Modify your webapp to add iframe for
    LibreOffice Online

    Profit! :-)

    View full-size slide

  3. But maybe you are
    interested
    in some details?

    View full-size slide

  4. 4 / 12
    FOSDEM 2017 | Jan Holesovsky
    WOPI protocol

    LibreOffice Online implements (part of) the
    WOPI (Web Application Open Platform
    Interface) protocol

    LibreOffice Online is a WOPI client that can
    be integrated with a WOPI host (that means
    your webapp)

    WOPI: a well documented open protocol:
    https://wopi.readthedocs.org/en/latest/ .

    View full-size slide

  5. 5 / 12
    FOSDEM 2017 | Jan Holesovsky
    LibreOffice OnLine & WOPI
    Iframe with LibreOffice OnLine
    Webapp integrating the Online
    WOPI host (provides data)
    WOPI client (provides editing)

    View full-size slide

  6. 6 / 12
    FOSDEM 2017 | Jan Holesovsky
    Reference implementation

    https://github.com/owncloud/richdocuments

    Consists of PHP parts and JavaScript

    PHP: Rest endpoints that allow the
    transfer of the data

    JavaScript: The actual integration that
    triggers document loading & showing
    inside the ownCloud / Nextcloud

    View full-size slide

  7. 7 / 12
    FOSDEM 2017 | Jan Holesovsky
    REST endpoints

    To download the file:

    GET https://URL>/<...>/wopi*/files//contents?
    access_token=

    Upload back:

    POST https://URL>/<...>/wopi*/files//contents?
    access_token=

    Check file info:

    https:///<...>/wopi*/files/?
    access_token=

    View full-size slide

  8. 8 / 12
    FOSDEM 2017 | Jan Holesovsky
    Security token

    To be able to access files securely, an
    authentication token has to be passed to
    LibreOffice OnLine

    From the LibreOffice 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

    View full-size slide

  9. 9 / 12
    FOSDEM 2017 | Jan Holesovsky
    Discovery service

    To get the information about how to initiate
    the iframe, the 1st thing has to be an access
    to a “discovery” xml

    Different document types can be served by
    different servers

    View full-size slide

  10. 10 / 12
    FOSDEM 2017 | Jan Holesovsky
    JavaScript part – embedding
    the iframe

    The Connector connects to the discovery
    service

    Creates an iframe that contains the
    LibreOffice 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

    View full-size slide

  11. 11 / 12
    FOSDEM 2017 | Jan Holesovsky
    Recommended steps

    Add WOPI REST endpoints to your web service, for the
    moment returning only a “ Hello World ” message.

    Implement the CheckFileInfo endpont

    Now you can see a constructed document containing
    just “Hello World” in the Online

    https://:/loleaflet//loleaflet.html?
    WOPISrc=https:///<...>/wopi*/files/

    Create an iframe that embeds the LibreOffice Online

    Update the REST endpoints to actually load real data

    Implement the PutFile endpoint to really save the data

    View full-size slide