A Zendesk app for a tutorial on adding OAuth at https://support.zendesk.com/hc/en-us/articles/205225558

main.js

$(function() {

  var client = ZAFClient.init();
  client.invoke('resize', {width: '100%', height: '400px'});

  showStart();

  $("#check-token").click(function (event) {
    event.preventDefault();
    client.invoke('notify', 'Authenticating...');
    var source = $("#auth_iframe-hdbs").html();
    var template = Handlebars.compile(source);
    var html = template();
    $("#content").html(html);
  });

  $(window).on("message", function (event) {
    var origin = event.origin || event.originalEvent.origin;
    if (origin !== "https://my-example-app.herokuapp.com")
	  return;
    var msg = event.data || event.originalEvent.data;
    if (msg.token == 'undefined') {
	  startAuth(client);
    } else {
	  showForm(msg.token, client);
    }
  });

});

function showStart() {
  var source = $("#start-hdbs").html();
  var template = Handlebars.compile(source);
  var html = template();
  $("#content").html(html);
}

function startAuth(client) {
  client.get('ticket.id').then(
    function(data) {
      var ticket_id = data['ticket.id'];
      var source = $("#start_auth-hdbs").html();
      var template = Handlebars.compile(source);
      var html = template({state: ticket_id});
      $("#content").html(html);
    }
  );
}

function showForm(token, client) {
  var source = $("#add_task-hdbs").html();
  var template = Handlebars.compile(source);
  var html = template();
  $("#content").html(html);

  $("#add-btn").click(function(event) {
    event.preventDefault();
    if ($("#name").val().length == 0) {
      client.invoke('notify', 'Name can\'t be blank.', 'error');
    } else {                  // good to go
      var task = {
        data: {
          name: $("#name").val(),
          notes: $("#notes").val(),
          projects: [parseInt($("#project-id").val())]
        }
      };
      sendTaskData(task, token, client);
    }
  });
}

function sendTaskData(task, token, client) {
  var settings = {
  	url: 'https://app.asana.com/api/1.0/tasks',
  	headers: {"Authorization": "Bearer " + token},
  	type: 'POST',
  	contentType: 'application/json',
  	data: JSON.stringify(task)
  };
  client.request(settings).then(
  	function () {
  		client.invoke('notify', 'Task successfully added to Asana.');
  		window.location.reload();
  	},
  	function (response) {
  		var msg = 'Error ' + response.status + ' ' + response.statusText;
  		client.invoke('notify', msg, 'error');
  	}
  );
  client.invoke('notify', 'Task sent! Please wait...');
}