title: How to pass an access token in an ajax call
body: <p><a href="https://stackoverflow.com/questions/45442344/zendesk-api-ticket-submission-using-javascript-authorization">I asked a question earlier today</a> about making an ajax call with the ZenDesk API. </p>
  
  <p>I can successfully run the following in command prompt and create a ticket in ZenDesk (<code>my_api_token</code> is the API token string):</p>
  
  <pre><code>curl https://mydomain.zendesk.com/api/v2/tickets.json \
    -d '{"ticket": {"subject": "Test ticket from API", "comment": { "body": "Just a test -kawnah" }}}' \
    -H "Content-Type: application/json" -u kawnah@email.com/token:my_api_token -X POST
  </code></pre>
  
  <p>What I'm trying to understand now is how this translates into an ajax call. This is the documentation I'm following. </p>
  
  <p>What I am doing at the moment is below: </p>
  
  <pre><code>$.ajax({
          type: 'post',
          url: 'https://domain.zendesk.com/api/v2/tickets.json',
          data: {
            "ticket": {
              "subject": "new contact from " + $('#contactFormEmail').val(),
              "comment": {
                "body": $('#contactFormMessage').val()
              }
            }
          },
          // ==========================================================
          // This is where I'm confused....
          // How do I authorize the API via the token? It's here right?
          // I'm trying it via standard setRequestHeader Authorization
          // For learning purposes in my local copy I'm pasting the key 
          // straight in, just to get it working.
          // I know this is bad practice. 
          // ==========================================================
          beforeSend : function( xhr ) {
              xhr.setRequestHeader( 'Authorization', 'BEARER my_api_token' );
          },
          success: function( response ) {
              console.log(response);
          },
          error : function(error) {
              console.log(error);
          }
        });
  </code></pre>
  
  <p>Here are some answers and docs I've looked at already but I'm still really confused:</p>
  
  <p>(best one): <a href="https://auth0.com/blog/using-json-web-tokens-as-api-keys/" rel="nofollow noreferrer">https://auth0.com/blog/using-json-web-tokens-as-api-keys/</a></p>
  
  <p><a href="https://stackoverflow.com/questions/549/the-definitive-guide-to-form-based-website-authentication/477578#477578">The definitive guide to form-based website authentication</a></p>
  
  <p><a href="https://stackoverflow.com/questions/33795843/grafana-passing-access-token-in-url">Grafana passing access token in url</a></p>
  
  <p><a href="https://developer.zendesk.com/rest_api/docs/core/tickets#create-ticket" rel="nofollow noreferrer">https://developer.zendesk.com/rest_api/docs/core/tickets#create-ticket</a></p>
  
  <p>What should I be doing differently?</p>