security - calling my web api from jquery securely -

i have simple question may point out complicated answer :(

i have web api works fine. want set authentication/authorization. need work on platforms, jquery. naturally don't want send username , password along pipeline in plain text this:

function getallcategories() {     var credentials = $.base64.encode('r3plica:mypassword');     var authtype = "basic " + credentials;      $.ajax({         url: "http://localhost:18904/api/categories",         type: "get",         beforesend: function (xhr) {             xhr.setrequestheader("authorization", authtype);         },         success: function (data) {             alert('success!');         },         error: function () {             alert('error');         }     }); } 

so have been looking @ other alternatives. alternative use 3 legged oauth? hoping pass query string key/value api , let handle can't find step step process doing that. seems complicated.

so, know of can do? have read loads , tried implement loads of stuff.

i managed working: http://codebetter.com/johnvpetersen/2012/04/04/moving-from-action-filters-to-message-handlers/ can tell though, need encrypt string (username) prior sending api using public key , api decrypt using private key , authorize you.

so 2 questions simple :)

1. can use above link , call jquery (i.e. not using 3rd party libraries)
2. if not, best way go securing api can called directly jquery.ajax call?

just clarify, using ssl api

cheers in advance,

/r3plica

for websites (where user can sourcecode) generate through php authenticationtoken , put javascript. token changes every page reload.

for example:

<script type="text/javascript">var authtoken = '<?=gentoken();?>'</script> [...] $.ajax( [..]     beforesend: function (xhr) {         xhr.setrequestheader("owntoken", authtoken);     }, 

and check token serverside.