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