WOPI nodejs, express, react integration

Question

Can anyone guide me how to implement WOPI for MERN Stack? I'm struggling in implementing it.

What I'm struggling at:

• Validating WOPI PROOF

• Implementing Request Headers

Answer 1

Basically you need few essential ingredients as per WOPI integration documentation:

1. Register as Microsoft O365 Cloud Storage Partner with some development domain you'll be using for development and potentially later for production. Something like *.whatewercompany.com. Microsoft will whitelist this domain so it will gave you capability of talking with office online from that domain.
2. Build WOPI host. In your case this will be node app in the backend that needs to implement different REST endpoints as per WOPI REST API Reference. You don't need all of them so just start easy with: CheckFileInfo and GetFile which will give you view only capability and then move to more complex ones like Lock, Unlock, UnlockAndRelock, RefreshLock and PutFile that will give you edit capabilities. I was using C# sample implementation as reference Office-Online-Test-Tools-and-Documentation. I just rewrote it in java and Spring Framework so I would recommend taking similar approach because code is straightforward and really documented with lots of notes and comments.
3. Reference WOPI docs as much as possible at the beginning it will be abstract and complicated but as you start implementing endpoints it will make more and more sense and in few days of work it will start making sense.
4. Build WOPI host page. Refer to Building a host page. It can be just another nodejs endpoint that returns page. That page is is simple and it is basically a host for office online action iframe. OFFICE_ONLINE_ACTION_URL in case of viewing docx file would be https://word-view.officeapps-df.live.com/wv/wordviewerframe.aspx?WOPISrc=https://wopitest.whatewercompany.com/wopi/files/1&access_token=1234567890.
5. So in last step I gave you url to view .docx file but what url you need to call to view .pptx or .xlsx or to edit them. This brings you to WOPI discovery concept where you learn that this url differs per each action like: view, edit, editnew and extension of the document. All in all you need to call WOPI discovery URLs parse xml response and dynamically switch from one url to another depending if user wants to open Word or PowerPoint or if he wants to open it in view or edit. Recommendation is to cache it and refresh it every 12h.
6. If you want to enhance security you need to verify that requests are actually originating from office online and that they are signed correctly. This is one of the things I did last just to make it 100% compatible with Microsoft validation tests but your view and edit will work without it. When you get here note that at the end of xml from step 4 you have proof-key that you'll need for this verification. Here are some examples in different languages C#, Java, Python Verifying that requests originate from Office Online by using proof keys and should not be a great task to make the same in nodejs.
7. Use WOPI interactive application to test your WOPI implementation and look forward for all the green icons you see there. This boils down to something like https://onenote.officeapps-df.live.com/hosting/WopiTestFrame.aspx?WOPISrc=https://wopitest.whatewercompany.com/wopi/files/1&access_token=1234567890 (Note that this should return some file called whatewer.wopitest that will be used in validation). Preferably you would call your host page that in return calls this url to verify first batch of tests called HostFrameIntegration. I would recommend you read WOPI Validation application to get better idea.

Note I was also trying to find sample app out there on git or somewhere rather than going through the process of implementing everything from the scratch but couldn't find anything that looked good and at the end it didn't take that long. All in all if you reference sample C# app together with WOPI documentation and steps I put here you are good to go.