Response: "Error while substituting the templates", status: 400 when using Request API

Hello,

I am trying to send a post request using the Request API to the MS OneNote API. When I do I receive a response with a 400 error “Error while substituting the templates”

Below is the block of code used to make the request.

let headers = {"Authorization": "bearer <%= access_token %>", "Content-Type": "text/html"}

    let options = {headers: headers, body: "Hello World"};

    let url = 'https://graph.microsoft.com/v1.0/me/onenote/pages?sectionName=Stuff';

    client.request.post(url, options)

    .then(

      function(data) {

      console.log(data);

      showNotification('success', 'Page was created in OneNote')

    },

      function(error) {

      console.log(error);

      showNotification('error', 'Page was unable to be created')

    }

  );

I know that the authorization is working because I can send a get request and return a 200 response with legitimate data. Also I am able to perform a post request to the endpoint url in postman with the same headers and content-type.

Any advice would be greatly appreciated, as this is holding me up from finishing up my app for the codiv hackathon.

Thank you.

Hi @Zach,

  1. When you this issue occuring in the local testing environment, can you please share debug logs for it?
  2. Are you sure the options object is currectly formatted and it has all the properties that OneNote expects?

Hello @Saif, wow the debugger is an amazing tool.

Here is the error I got: FDK 24948: (proxy.js) Substituing Templates {“headers”:{“Authorization”:“bearer {<%= access_token %>}”,“Content-Type”:“text/html”},“body”:“Hope this creates a page”,“url”:“https://graph.microsoft.com/v1.0/me/onenote/pages?sectionName=Stuff",“method”:"post”} with {“iparam”:{},“oauth_iparams”:{}}
FDK 24948: (proxy.js) Template substitution errored with ReferenceError: access_token is not defined
FDK 24948: (proxy.js) Proxy errored with Error while substituting the templates
FDK 24948: (coverage-util.js) Writing coverage.

So it looks like the access_token is not defined. What I don’t get is how then in my get request can it access the token using <%=access_token%> but not in a post request? How do I get that information into the post request header without exposing the token?

Thank you for your help.

Also in the first attempts I did not have the curly braces after “bearer” and still got the same error that access_token was not defined.

Zach,

  1. Are you able to see files inside .fdk folder? When access token is received that is where the access token will be stored. Check if you can see inside .fdk folder.
  2. See the same logs when GET request happens. Let’s find out what is the difference.
  3. To not to expose API Keys that way, you can secure them using secure iparams. That should help.

Also, can you share me the link to OneNotes API documentation, so that I can understand the API key handling expectations of a client.

Hi @Saif , I was able to get this to work. It came down to having issues with the browser caching the token data. After removing all traces of any authentication, I was able to re-authenticate the app using the correct permission setting in Azure and got it working correctly.

Thank you for your help.

1 Like

Nothing is more wonderful than solving the problems that we are struggling with, on our own. :smile:

I a have customer who is seeing the same issue after an update was published on the market place with the app set to auto-update.

This stopped the full page app from loading and threw an error. The same error was logged in the console. I cleared the browser cache and the full page app loaded.

2 Likes

Noting this for future reference, since this same issue was reported by another developer today.

Looking through the logs and docs, the developer figured that they had not added isOAuth: true to the second argument for $request.post() (or client.request.post() when using in frontend components).

So, the same request would look like:

const options = {
  headers,
  body,
  isOAuth: true // This line is necessary
};

await client.request.post(url, options)

Hello @kaustavdm ,

I am getting this error, even adding

isOAuth: true

in request and as well as whitelisting the domain in manifest
Any advice would be greatly appreciated,

Regards,
Hassan Tasleem

@Hassan_Tasleem1 Can you share the code you have to make a request? (Preferably in a separate thread). Also, meanwhile, check this: