403 error when creating request via API

25 Kommentare

  • Thomas Verschoren
    Community Moderator

    Hey,

    Your code looks very similar to mine:

    So I might assume that the Base64 encode of your user/token:token is wrong.

    Can you maybe console.log your BTOA(..) result and compare it to what you would get when entering that same data in e.g. https://www.base64encode.org/?

    jQuery.ajax({
    url: "https://d3v-verschoren.zendesk.com/api/v2/requests",
    type: "POST",
    headers: {
    "Authorization": "Basic 1234567890abdcefd",
    "Content-Type": "application/json",
    },
    contentType: "application/json",
    data: JSON.stringify({
    "request": {
    "subject": "Help!",
    "comment": {
    "body": "My printer is on fire!"
    }
    }
    })
    })
    .done(function(data, textStatus, jqXHR) {
    console.log("HTTP Request Succeeded: " + jqXHR.status);
    console.log(data);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("HTTP Request Failed");
    })
    0
  • Bonaliza Garcia

    @... 

    Yea it's giving me the correct value. I also tried encrypting the whole thing and just pasting it but it's still giving me the error message.

    Could you think of anything else? I'm just lost since it's working on Postman

    0
  • Bonaliza Garcia

    I also tried your code but it gave me the same error.

     

    0
  • Thomas Verschoren
    Community Moderator

    Hey,

    Since you've already opened the developer view in your browser: When you open the Network tab you can inspect your payload: what's actually send and returned:

    You can verify there if it matches your expected user:token/password

     

    0
  • Bonaliza Garcia

    Hey, 

    So I did that. It matches what I used. email/token:api_token.

    Are you using this code in Zendesk or an external app?

    Is it possible that the authentication is somehow clashing with the current logged in user?

    0
  • Thomas Verschoren
    Community Moderator

    I tested this with an external JS application hosted on a server.

    Mind that Zendesk client.request replaces all headers to yourdomain.zendeks.com via proxy with it's own auth tokens.

    0
  • Bonaliza Garcia

    Should the code then be different if using this within zendesk?

    0
  • Bonaliza Garcia

    Hey @...,

    I think it's an issue with the logged in user or the session...

    I tried logging out of Zendesk and tried the exact code on the browser console and it worked...

    Any idea why this is the case?

     

    Thanks

    0
  • Thomas Verschoren
    Community Moderator

    Hey,

    To quote the documentation:

    So when you use client.request the Zendesk Proxy removes any auth headers for your own Zendesk domain and replaces them with the current user and his/her permission level.

    0
  • Bonaliza Garcia

    Hey,

    I am not making an external app. I'm doing this within our Zendesk Portal using the templates (e.g. new_request_page.hbs). Base on my understanding, ZAFClient is used when building an external app that incorporates Zendesk support? 

    My issue is when doing this in Zendesk Portal itself. Also the 404 error only appears when doing a POST request.

    0
  • Camila de la Torre

    Bonaliza, where you able to find a solution for this? I'm having the same issue. 

    2
  • Jesper Angelo

    Same issue here, not sure what to do...

     

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    This is likely caused by a clash with how the fetch API handles cookies in the context of the Help Center, when logged in as an agent or admin. You can use the /api/v2/users endpoint to obtain an authenticity (CSRF) token which should fix the issue. Here’s an example of how that could look:
     

    fetch("/api/v2/users/me")
    .then((data) => {
      return res = data.json();
    })
    .then((res) => {
      const authToken = res.user.authenticity_token;
    
      let myHeaders = new Headers();
      myHeaders.append(
        "Authorization",
        "Basic btoa(email/token:API_Token)"
      );
      myHeaders.append("Content-Type", "application/json");
      myHeaders.append("X-CSRF-Token", authToken);
    
      const raw = JSON.stringify({
          "request": {
            "requester": { "name": "Jane Smith", "email": "jane@example.com" },
            "subject": "TESTING API!",
            "comment": { "body": "My printer is on fire!" },
          },
        });
    
      const requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: raw,
        redirect: "follow",
      };
    
      fetch("/api/v2/requests", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log("error", error));
    });

     
    I hope this helps! Feel free to reach out with any questions.
     
    Tipene

    1
  • Pan Vivian

    @Tipene Hughes 

    I used this code, but I still does not solve my issue. 

    I am using end user to login in zendesk, using email/token: token to post an API, I still get the error message:"error{title: "Forbidden", message: "Invalid authenticity token"}".

    Here is my code snippet:

    Can you help check whether there is something wrong? 

    fetch("/api/v2/users/me")
    .then((data) => {
    return res = data.json();
    })
    .then((res) => {
    const authToken = res.user.authenticity_token;
    console.log(authToken);
    let myHeaders = new Headers();
    myHeaders.append(
    "Authorization",
    "Basic xxxxxxxxxxxxxxxxxxxx"
    );
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("X-CSRF-Token", authToken);
    const raw = JSON.stringify({
    "organization": {
    "name": "ttt"
    }
    });
    const requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
    };
    fetch('/api/v2/organizations', requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log("error", error));
    });

    2
  • Pan Vivian

    Can anyone help me? I am not sure what to do now.

    0
  • Andrey Metelsky

    Tipene Hughes Pan Vivian I'm getting the same "Invalid authenticity token" error.

    I sent a request to Zendesk support 2 days ago, but haven't received a reply yet.

    0
  • Pan Vivian

    Andrey Metelsky

    Hi  have you received response from Zendesk support? Can you share it to me? Thanks.

    0
  • Andrey Metelsky

    Pan Vivian still troubleshooting it with Zendesk support. I'll write you once the issue is resolved.

    1
  • Elton

    I am having this error 403 when I am trying to log in into my account as AGENT. I go until the second step verification and then it goes to the error 403. How Can I correct it and log in??

    0
  • Josh
    Zendesk Customer Care
    Hi Elton!
     
    Thank you for reaching out to us. This can be corrected by logging in the correct credentials however, I would highly advise that you get it touch with your admins as they have control over this in your account.
     
    Best,
    0
  • Manuel Federl

    Pan Vivian Your issue seems to be related to the organizations api end point. According to the documentation you need to be an admin to create organizations. If an end user tries this, then they shoudn't have the required permissions to do so.

     

    Tipene Hughes Your approach looks nice. I didn't know about the x-csrf-token header. I think the authenticity_token property should be included in the JSON format of the user documentation.

    I tried it but it sadly didn't work for me. I checked in the developer console > network what the request looks like. The basic authentication and x-csrf-token match with the data I'm plugging in but I still get a 403 error.

    I'm sending the request through a ReactJS app and Axios in our Help Center.

    0
  • romankris

    This error indicates that the server has determined that you are not allowed access to the thing you've requested, either on purpose or due to a misconfiguration . It's probably because the site owner has limited access to it and you don't have permission to view it. The vast majority of the time, there's not much you can do to fix things on your (*client) end. There are four common causes for 403 Forbidden error (server side) . Here they are listed from most likely to least likely:

    • An empty website directory
    • No index page
    • Incorrect settings in the .htaccess file
    • Permission / Ownership error

    If authentication credentials were provided in the request, the server considers them insufficient to grant access. The client SHOULD NOT automatically repeat the request with the same credentials. The client MAY repeat the request with new or different credentials. However, a request might be forbidden for reasons unrelated to the credentials.

     

    0
  • Ahmed Zaid

    Hi Tipene Hughes,

    Your solution works perfectly on one instance, but when I try it on another that uses SSO, disables Zendesk authentication and has host mapping, it goes back to Invalid authenticity token.

    Is there a workaround for this case?

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Ahmed! A 403 is an indication that you don't have access to the resource. Do you have different permissions in the other instance?

    0
  • Ahmed Zaid

    Hi Greg Katechis,

    I tested this as an admin. I did more testing on a fresh sanbox and added the following code to a fresh Copenhagen theme's article_pages.hbs on 2 different brand help centres of the same sandbox:

    <!-- Begin Custom Code -->
    <script>
    let voteDownButton = document.querySelector(".article-vote-down");
    voteDownButton.addEventListener("click", async function () {
      let payload = {
        request: {
          subject: "Oh No!",
          comment: {
            body: "An article was voted down"
          }
        },
      };
      let headers = new Headers();
      headers.append("Content-Type", "application/json");
      if ("{{signed_in}}" == "false") {
        payload.request.requester = { name: "Anonymous Customer" };
      } else {
        await fetch("/api/v2/users/me.json")
          .then(data => {
            return data.json();
          })
          .then(res => {
            headers.append("X-CSRF-Token", res.user.authenticity_token);
          });
        }

      const request = {
        method: "POST",
        headers: headers,
        body: JSON.stringify(payload),
      };
      fetch("/api/v2/requests", request)
        .then(response => response.text())
        .then(result => console.log(result));
    });
    </script>
    <!-- End Custom Code -->

    Anonymous requests work on both brands, Authenticated requests "signed-in admin" work on the main brand, but on the other one, I get:

    {
      "error": {
        "title": "Forbidden",
        "message": "Invalid authenticity token"
      }
    }
    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk