Expose .asmx Web Service to Third Party Clients consuming via Jquery Ajax

Imagine the Following Scenario:

1. http://domain1.com/webservice.asmx
    A .asmx WebService
 
2. http://domain2.com/client.html
    A Client consuming that WebService using Jquery Ajax

STEP 1

PROBLEM
This is a Cross-Domain Request and violates the Same origin Policy.
(which is a security concept for a number of browser-side programming languages)

SOLUTION
A work around is to use JSONP to make the Client Request.
IBM has a Great Article describing This.
Jquery Ajax is described here

STEP 2

PROBLEM
JSONP loads Javascript using <script src=""> element.

In ASP:net  Script files loaded via an HTML <script src=""> element within a browser can only be retrieved via HTTP GET verb requests.
By default ASP.NET  web services layer does not allow web methods to be invoked via the HTTP GET verb.

SOLUTION
To make an ASP.NET AJAX web-method callable via HTTP GET-access, a developer must explicitly attribute each method using ASP.NET's ScriptMethod attribute (and set the UseHttpGet property to true)
[ScriptMethod(UseHttpGet=true)]
Article 1

STEP 3

PROBLEM
The <script> element simply doesn't add content type "application/json; charset=utf-8"  to the request. Yet our JSON WebService is expecting this in the Header of the Request.

SOLUTION

Use a asp.net HTTPModule to filter all requests to the .asmx Webservice and Manually append the correct content type to the Request Header.
Article 1
Article 2


EXAMPLE CODE
Download
1. .asmx Web Service with HTTPModule
2. Jquery Ajax Client 

Setup
Set them both up as Websites in IIS or Apache
with the Client running on default port 80                 http://localhost/jquery-CrossDomainCall-Test.html
and the .asmx Service running on Port 83                http://localhost:83/Service4.asmx
Note you will also need to enable .Net4 for the .asmx Service Website



Same Origin Request
If the client is on the Same Domain as the Web Service
Then we can instead use simple $Jquery.Ajax()
as described in this Great Article

OAuth - Cross-Site Authentication

Nowadays its normal for users to PUSH/PULL data TO/FROM 3rd party Web Applications to your Website.
eg: Facebook LIKE button

USE CASE
1.     A User (or You on behalf of the User) wants to login to their account
        on a 3rd party Web Application and pass data to your Web Application?
eg:  Tweet from your website using their twittername
       Check their Gmail from your website

QUESTION:
Can a user submit their Login Credentials via your WebApp and expect you to securely handle their Sensitive Data?
How does your Web App Authorise & Store their Login Credentials?
How does your website make Requests based on Their Login Credentials?

ANSWER:
OAuth v1 or v2

WIth an OAuth Client connecting to an OAuth Server, we can solve the above USE CASE.

Study the above Diagram for an Overview of OAuth v1
When you're ready to connect to 3rd party Web Apps...read their DOcumentation of their implementation of OAuth since methods and names may change.

Client Side implementation of OAuth
With Browser side code you have no way of PREVENTING people from seeing your Secret 'oauth_consumer_key' and 'oauth_toke_secret'.
StackOverFlow.com Article  StackOverFlow Article 2
Read the following Very Interesting Article for some ideas to solve Client Side OAuth implementation Security Problems. http://derek.io/blog/2010/how-to-secure-oauth-in-javascript/

Note:
You should also understand
SAME-ORIGIN POLICY
SAME-OROGIN POLICY 2
JsonP

Memoization

Once an expensive function runs, it can rewrite itself with an optimized version.

Memoization is a technique similar to caching that takes advantage of

the fact that functions are just data.

var getElement = function() {



    console.log("creating element");

    var element = document.createElement("div");



    // ... Do a bunch of expensive operations



    // Now OVERWRITE this function with a SIMPLER VERSION

    getElement = function() {

        return element;

    };



    return element;

};

The first time getElement runs, it creates the element and runs a bunch
of code with it. Then it rewrites the getElement function to solely return the created element. This makes subsequent calls to getElement much quicker.

Source:  "The JavaScript PocketGuide" - Lenny Burdette 2010