[SalesForce] Using Canvas client-side proxy to access Apex REST API from Visualforce page

Is it possible to use the client-side proxy provided by the Canvas SDK from a canvas app embedded within a Visualforce page to access an Apex REST endpoint?

We have a canvas app which calls an Apex REST endpoint

Sfdc.canvas.client.ajax('/services/apexrest/myapp/myservice', {
   client: Sfdc._sr.client,
   success: myCallback
});

This works correctly when the canvas app is loaded from the chatter tab; both the chatter page and the API are on the same domain, na7.salesforce.com, for example.

But when the canvas app is embedded in a Visualforce page, it doesn't work because the Visualforce page is on myapp.na7.visual.force.com, and the client-side proxy sends the request to na7.salesforce.com, causing a cross-origin error.

Any suggestions on making this work?

It would be great if the client-side proxy transparently made use of ajax proxy on the Visualforce domain.

Best Answer

I have confirmed this is a problem. However there is a workaround

Sfdc.canvas.client.ajax('/services/proxy',
   {   
       client : sr.client,
       method: 'GET',
       contentType: "application/json",
       headers : {
           "SalesforceProxy-Endpoint" : sr.client.instanceUrl + "/services/apexrest/Account/001i000000iLoMf",
           "Authorization" : "OAuth "  + sr.client.oauthToken,
           "Accept" : "application/json"
       },
       success : function(data) {
                alert("Status: " + data.status);
               }
    }
);

Related Solutions

[SalesForce] How to call Apex REST API from Javascript

Finally, I solved the problem. I'm pasting my code here for reference

    var result = sforce.connection.login("myname@mymail.com", "mypassword+mysecurityToken");
    sforce.connection.init('{!sessionId}', 'REST web service url'); // here pass current session id of the org from which you are making request.

    sforce.connection.remoteFunction({
           url : REST web service url,
           requestHeaders: {"Authorization":"Bearer "+result.sessionId, "Content-Type":"application/json"}, // here pass the session id of the org in which you have your REST service
           requestData: data to post in JSON format,
           method: "POST",
           onSuccess : function(response) {
                  console.log(response);
              },
           onFailure : function(response) {
                  alert("Failed" + response)
              }
       });

[SalesForce] Calling REST API in Canvas with OAuth Webflow (GET)

Sorry for the delay in answering.

You can do this today with the SDK. There are examples in the SDK on how to use the OAuth method. Essentially, you use canvas to establish the OAuth authentication, and then use the SDK and the OAuth token to get the context portion of the signed request. With that, you can then make the cross domain calls, just as you would with signed request.

An example would be:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<title>Test Page for OAUth User Agent</title>

<script type="text/javascript" src="/sdk/js/canvas-all.js"></script>

</head>
<body>
<script>

    if (self === top) {
        // Not in Iframe
        alert("This canvas app must be included within an iframe");
    }

    function contextCallback(msg){
    var html,context;
    if(msg.status !== 200){
      console.log (msg.status);
      return;
    }
    Sfdc.canvas.client.autogrow(Sfdc.canvas.oauth.client());
        Sfdc.canvas.byId('canvas-request-string').innerHTML = jsonSyntaxHighlight(msg.payload);
    }

     function jsonSyntaxHighlight(json) {
        if (typeof json != 'string') {
           json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                   return '<span class="' + cls + '">' + match + '</span>';
             });
    }

    function clickHandler(e) {
        var uri;

        if (! Sfdc.canvas.oauth.loggedin()) {
            uri = Sfdc.canvas.oauth.loginUrl();
            console.log("Login URI: " + uri);
            // This uri is the outer parent window.
       Sfdc.canvas.oauth.login(
        {uri : uri,
        params: {
                  display : "touch",
          response_type : "token",
          client_id : "", //Add Your Consumer ID
          redirect_uri : encodeURIComponent("") //Add your Callback URL
        }});
        }
        else {
            Sfdc.canvas.oauth.logout();
        }
        return false;
    }

    // Bootstrap the pae once the DOM is ready.
    Sfdc.canvas(function() {
        // On Ready...
        var login    = Sfdc.canvas.byId("login"),
            loggedIn = Sfdc.canvas.oauth.loggedin();
        login.innerHTML = (loggedIn) ? "Logout" : "login";
        Sfdc.canvas.byId("access-token").innerHTML = (loggedIn) ? Sfdc.canvas.oauth.token() : "No Token";
        login.onclick=clickHandler;
    if(loggedIn){
      Sfdc.canvas.client.ctx(contextCallback, Sfdc.canvas.oauth.client());
    }
    });

</script>

<style>
    pre {white-space: pre-wrap;padding: 5px; margin: 5px; overflow:auto;width:auto;height:80%;}
      .string { color: green; }
      .number { color: darkorange; }
      .boolean { color: blue; }
      .null { color: magenta; }
      .key { color: red; }
</style> 

<h1 id="header">OAuth Canvas App</h1>
<div>
 <div>
    <a id="login" href="#">Login</a>
  </div>
  <div>
     Access Token: <span id="access-token"></span>
  </div>
  <div id="canvas-content">
    <h4>Once logged in through OAuth, you can see the JSON representation of Canvas Request below:</h2>
    <pre><code id="canvas-request-string"></code></pre>
 </div> 
 </div>
</body>
</html>

Best Answer

Related Solutions

[SalesForce] How to call Apex REST API from Javascript

[SalesForce] Calling REST API in Canvas with OAuth Webflow (GET)

Related Topic