[SalesForce] Unable to retrieve context in canvas app when authenticating with oauth

I’m having trouble authenticating my canvas app using oauth2. This is despite being able to authenticate and connect via other means. The following is my problem in detail…

I’ve configured a connected app with the following settings…

OAuth Scope: full, refresh_token, offline_access
Canvas App URL: https://app.d.com/ (this is a locally-running server)
Canvas Access Method: OAuth Webflow (GET)
SAML Initiation Method: None
Locations: Chatter Tab, Visualforce Page, Layouts and Mobile Cards
Options: Enabled as a Canvas Personal App
Lifecycle Class: None

Using OAuth and the jsForce library on the backend, I’m able to authenticate with Salesforce and push events from our web app to a chatter stream. During the authentication process, I save the user’s auth token and refresh token (so that I am able to continue to make calls via the backend).

However, when plugging the Sfdc library into the front end and attempting to access my web app via canvas, I am unable to get the context object. Here is some debugging code (in coffeescript) that I trigger when the web app is loaded via canvas…

initCanvas: (session) =>
    if !Sfdc.canvas.oauth.loggedin()
      debugger
      uri = Sfdc.canvas.oauth.loginUrl()
      Sfdc.canvas.oauth.login({
        uri: uri
        params: {
          response_type: "token"
          client_id: SALESFORCE_API_KEY
          redirect_uri: SALESFORCE_REDIRECT_URI
        }
      })
    else
      debugger
      Sfdc.canvas.oauth.logout()

Ideally, since I already have the user’s auth token (when they enable chatter integration), I shouldn’t need to trigger the Sfdc.canvas.oauth.login() function. I should be able to get the context by creating my own client object. But since I am trying to follow the examples as closely as possible, let’s proceed with the assumption that I’m using the code above…

When the canvas app loads within salesforce, my first “debugger” breakpoint gets hit. After playing through this breakpoint, I receive a salesforce popup window which asks me to authenticate. After authenticating, the canvas app appears to refresh (because it hit the example callback.html endpoint provided) and now my second breakpoint gets hit (after the else statement). At this point, my client object looks like the following…

{
  instanceId: undefined,
  oauthToken: "00Do0000000...Ce7F2kJx”, // shortened for this example
  targetOrigin: undefined
}

Unfortunately, it appears that I need the instanceId and targetOrigin, because when I try to request the context…

Sfdc.canvas.client.ctx(function (msg) { console.log(msg); }, client);

I get back the following error…

{status: 400, statusText: "Bad Request", parentVersion: undefined, payload: "client.instanceId or client.targetOrigin not supplied”}

This response comes from the Sfdc library, not any salesforce server. Any attempts to modify the instanceId and targetOrigin fields directly on the client object do not appear to work either…

client = {oauthToken: "00Do0000000…Ce7F2kJx”, instanceId: “06Po0000000LRQb”, targetOrigin: “https://na17.salesforce.com”};

Sfdc.canvas.client.ctx(function (msg) { console.log(msg); }, client);

Response…

undefined

(no callback msg received in the console)

Looking at the documentation, the instanceId and targetOrigin are defined as…

instanceId: The ID of a canvas app exposed on a Visualforce page. Used internally for canvas app instance management.
targetOrigin: The URL of the canvas app. Used internally for cross-domain communication between the page and the iFrame that contains the canvas app.

Questions…

1.) If the user has already authenticated and given permission to the app, why do we need to request permission a second time?
2.) It appears as though the instanceId and targetOrigin fields are required portions of the client object before being able to request the context via the Sfdc library. How can I obtain these fields?

Best Answer

1.) Technically, if you follow the refresh oauth flow, it isn't necessary to present the user with a new login prompt via the Sfdc.canvas.oauth.loginUrl() method. It is possible to create the client from scratch using the correct oauthToken, targetOrigin, and instanceId params. When one of these parameters is slightly wrong, it is possible for the ctx method to silently fail (as it did above).

2.) To get the correct targetOrigin and instanceId params, it is best to receive them in the hash as part of your canvas app url (ex: https://myapp.com/canvas.html#targetOrigin=xyz&instanceId=abc). In my case, because I was using a front end framework, this hash was stripped upon page load - so I wasn't able to see that they were actually getting sent over.

Related Solutions

[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>

[SalesForce] Canvas App started sending GET instead of POST

See Signed Request Authentication.

Has:

a change been made to the Permitted Users field from "Admin approved users are pre-authorized" to "All users may self-authorize", or
when using "All users may self-authorize" and the access token was revoked by the administrator or a time limit was set on the token.

From the docs under Permitted User Value "All users may self-authorize":

If the user has previously approved the app and the access hasn’t been revoked or expired, Salesforce performs a POST to the canvas app with a signed request payload.

If the user hasn’t approved the app, or if the access has been revoked or expired, Salesforce performs a GET to the canvas app URL. The canvas app must handle the GET by accepting the call and looking for the URL parameter _sfdc_canvas_authvalue. If the canvas app receives this parameter value, the canvas app should initiate the approve or deny OAuth flow.
_sfdc_canvas_authvalue = user_approval_required
After the OAuth flow is initiated and the user approves the app, the canvas app should call the repost() method with a parameter of true to retrieve the signed request.

Best Answer

Related Solutions

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

[SalesForce] Canvas App started sending GET instead of POST

Related Topic