Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Initiate OAuth Flow

Start the authorization process in your Canvas app by using OAuth 2.0. If you store or retrieve data, such as an authentication token, from your Canvas app’s local storage in the callback, use window.opener.localStorage instead of window.localStorage.

This code example shows how you can initiate the OAuth 2.0 authorization process in your Canvas app.

1<html>
2<head>
3    <script type="text/javascript" src="/sdk/js/canvas-all.js"></script>
4</head>
5<body>
6    <script>
7
8        function loginHandler(e) {
9            var uri;
10            if (! Sfdc.canvas.oauth.loggedin()) {
11                uri = Sfdc.canvas.oauth.loginUrl();
12                Sfdc.canvas.oauth.login(
13                    {uri : uri,
14                        params: {
15                            response_type : "token",
16                            client_id : "3MVG9lKcPoNINVBLigmW.8dAn4L5HwY VBzxbW5FFdzvU0re2
17                                f7o9aHJNUpY9ACdh.3SUgw5rF2nSsC9_cRqzD",
18                            redirect_uri : encodeURIComponent(
19                                "https://demoapp1234.herokuapp.com/sdk/callback.html")
20                        }});
21            }
22            else {
23                Sfdc.canvas.oauth.logout();
24                login.innerHTML = "Login";
25                Sfdc.canvas.byId("oauth").innerHTML = "";
26            }
27            return false;
28        }
29
30        // Bootstrap the page after the DOM is ready.
31        Sfdc.canvas(function() {
32            // On Ready...
33            var login    = Sfdc.canvas.byId("login"),
34                loggedIn = Sfdc.canvas.oauth.loggedin(),
35                token = Sfdc.canvas.oauth.token()
36            login.innerHTML = (loggedIn) ? "Logout" : "Login";
37            if (loggedIn) {
38                 // Displaying only part of the OAuth token for better formatting.
39                Sfdc.canvas.byId("oauth").innerHTML = Sfdc.canvas.oauth.token()
40                    .substring(1,40) + "…";
41            }
42            login.onclick=loginHandler;
43        });
44    </script>
45    <h1 id="header">Canvas OAuth App</h1>
46    <div>
47        access_token = <span id="oauth"></span>
48    </div>
49    <div>
50        <a id="login" href="#">Login</a><br/>
51    </div>
52</body>
53</html>

When you implement an OAuth 2.0 web server flow, a window pops up so the user can authenticate. If your browser partitions storage, any data stored with storage APIs such as localStorage and sessionStorage is accessible only in contexts with the same top-level site. Because the callback is in a different window than the Canvas app, it has a different top-level site. Therefore, if you use window.localStorage in the callback to store and retrieve data, such as an authentication token, then an Unauthorized: client or client.oauthToken error occurs.

Instead, to store and retrieve data from your Canvas app’s local storage in the callback, use window.opener.localStorage. With the opener property, you can interact with the window that opens another window if they both have the same origin. Because the callback has the same origin as the Canvas app, the local storage is accessible.

Google Chrome and other major browsers now enable storage partitioning by default. For information about their browser requirements, see How Third-Party Cookie Restrictions Impact Salesforce Canvas Apps.

Note

Canvas Developer Guide

Initiate OAuth Flow

See Also