0

I'm working on an Office Add-in for Outlook, build in React with Yeoman Generator (https://github.com/OfficeDev/Office-Addin-TaskPane-React.git)

The principle is pretty simple, when I click a button in the Outlook ribbon, it has to replace the mail Signature with a new one fetched through an API.

Here's the thing : when I write some hard coded html: no problem. And when I replace an Outlook Signature with a dummy data from jsonplaceholder, everything works fine as well: my signature is correctly replaced.

But as soon as I try to fetch it from my backend built on Spring Boot and running on Localhost, nothing works as expected. My endpoint is working fine and sends correct JSON response in Postman or in my browser.

Action launched on click :

getRemoteSignature().then(
(signature) => {
  // replace 'htmlSignature' by 'title' for dummy data test
  item.body.setSignatureAsync(signature.htmlSignature, {
    coercionType: "html",
  })
});

My function to fetch data from my API:

async function getRemoteSignature() {
  // So this one works fine and replaces my signature in outlook
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  // This one is a pain in the a** and doesn't want to work
  const response = await fetch('https://localhost:8443/api/v1/signature/find/1');
  const signature = await response.json();
  return signature;
}

My Outlook Add-in is running in https://localhost:3000 with node.js, my SpringBoot backend runs on https://localhost:8443 with tomcat.

Thanks for your help if someone has an idea of what is going on or what I did wrong...

Rick Kirkham
  • 9,038
  • 1
  • 14
  • 32
Damien Puaud
  • 274
  • 1
  • 7
  • Have you tried using Fiddler to understand what is happening in the background? – Eugene Astafiev Feb 16 '22 at 15:56
  • Can you access the requested URL in the browser? – Eugene Astafiev Feb 16 '22 at 15:57
  • Hi @EugeneAstafiev ! Yep, https://localhost:8443/api/v1/signature/find/1 opens and works fine in the browser, sending back the expected response. I haven't tryied Fiddler, i'll do that now. – Damien Puaud Feb 16 '22 at 16:09
  • Also you may try to list the domain in the section of your add-in manifest. – Eugene Astafiev Feb 16 '22 at 16:12
  • The domain is listed in the manifest in the AppDomains sections but not working anyway. Actually I'm wondering if it's not because I self-signed the SSL certificate or something like that... – Damien Puaud Feb 16 '22 at 16:27
  • Run the command `npm run install-dev-certs`. Select `Yes` to the prompt to install the certificate. – Eugene Astafiev Feb 16 '22 at 23:05
  • This command didn't work for me, I got errors popping. But it's definitely because of this certificate I generated (with keytool). I disabled the SSL in my backend and changed my fetch url to http://localhost:8000 and got the proper behavious I expected. The only thing I have left to do is finding a way to install a better certificate in my backend i guess. Thanks @EugeneAstafiev – Damien Puaud Feb 17 '22 at 09:26
  • Good news! Thank you for sharing the solution for others. – Eugene Astafiev Feb 17 '22 at 09:27

1 Answers1

0

Edit

Ok, as I suspected it was a matter of self-signed certificate. I disabled the SSL in my back-end and pointed back my fetch to http://localhost:8000/api/v1/signature/find/1 and everything worked : my signature was replaced in my email in Outlook.

The only thing I have left to do is finding a way to install a better certificate in my backend i guess.

Damien Puaud
  • 274
  • 1
  • 7