|
3 | 3 | <head> |
4 | 4 | <title>Quickstart for MSAL JS</title> |
5 | 5 | <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script> |
6 | | - <script src="/msal-0.9.0.min.js"></script> |
| 6 | + <script src="/msal-1.0.0-preview.min.js"></script> |
7 | 7 | <link rel="stylesheet" type="text/css" href="/style.css"> |
8 | 8 | </head> |
9 | 9 |
|
|
18 | 18 | </div> |
19 | 19 | </div> |
20 | 20 | <script> |
21 | | - var applicationConfig = { |
22 | | - clientID: "245e9392-c666-4d51-8f8a-bfd9e55b2456", |
23 | | - authority: "https://login.microsoftonline.com/common", |
24 | | - graphScopes: ["user.read", "Mail.Send"], |
25 | | - graphEndpoint: "https://graph.microsoft.com/v1.0/me" |
26 | | - }; |
27 | 21 |
|
28 | | - var config = { |
| 22 | + // Browser check variables |
| 23 | + var ua = window.navigator.userAgent; |
| 24 | + var msie = ua.indexOf('MSIE '); |
| 25 | + var msie11 = ua.indexOf('Trident/'); |
| 26 | + var msedge = ua.indexOf('Edge/'); |
| 27 | + var isIE = msie > 0 || msie11 > 0; |
| 28 | + var isEdge = msedge > 0; |
| 29 | + //If you support IE, our recommendation is that you sign-in using Redirect APIs |
| 30 | + //If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check |
| 31 | + |
| 32 | + var loginType; // can change this to default an experience outside browser use |
| 33 | + if (!isIE) { |
| 34 | + loginType = "POPUP"; |
| 35 | + } |
| 36 | + else { |
| 37 | + loginType = "REDIRECT"; |
| 38 | + } |
| 39 | + |
| 40 | + var msalConfig = { |
29 | 41 | auth: { |
30 | | - clientId: applicationConfig.clientID, |
31 | | - authority: applicationConfig.authority, |
| 42 | + clientId: "245e9392-c666-4d51-8f8a-bfd9e55b2456", |
| 43 | + authority: "https://login.microsoftonline.com/common", |
32 | 44 | validateAuthority: true |
33 | 45 | }, |
34 | 46 | cache: { |
|
37 | 49 | } |
38 | 50 | }; |
39 | 51 |
|
40 | | - var myMSALObj = new Msal.UserAgentApplication(config); |
| 52 | + var loginRequest = { |
| 53 | + scopes: ["user.read"] |
| 54 | + }; |
| 55 | + |
| 56 | + var graphConfig = { |
| 57 | + graphScopes: ["Mail.Read", "Mail.Send"], |
| 58 | + graphMeEndpoint: "https://graph.microsoft.com/v1.0/me" |
| 59 | + }; |
| 60 | + |
| 61 | + var tokenRequest = { |
| 62 | + scopes: graphConfig.graphScopes |
| 63 | + }; |
| 64 | + |
| 65 | + var myMSALObj = new Msal.UserAgentApplication(msalConfig); |
| 66 | + // Register Callbacks for redirect flow |
41 | 67 | myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack); |
42 | 68 |
|
43 | 69 | function signIn() { |
44 | | - let loginRequest = { |
45 | | - scopes: applicationConfig.graphScopes |
46 | | - }; |
47 | 70 | myMSALObj.loginPopup(loginRequest).then(function (loginResponse) { |
48 | 71 | //Login Success |
49 | 72 | showWelcomeMessage(); |
|
59 | 82 |
|
60 | 83 | function acquireTokenPopupAndCallMSGraph() { |
61 | 84 | //Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph |
62 | | - let tokenRequest = { |
63 | | - scopes: applicationConfig.graphScopes |
64 | | - }; |
| 85 | + |
65 | 86 | myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) { |
66 | | - console.log(tokenResponse.scopes); |
67 | | - callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback); |
| 87 | + callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback); |
68 | 88 | }).catch(function (error) { |
69 | | - console.log(error); |
| 89 | + console.log(error.errorMessage); |
70 | 90 | // Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY |
71 | 91 | if (requiresInteraction(error.errorMessage)) { |
72 | 92 | myMSALObj.acquireTokenPopup(tokenRequest).then(function (tokenResponse) { |
73 | | - callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback); |
| 93 | + callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback); |
74 | 94 | }).catch(function (error) { |
75 | 95 | console.log(error); |
76 | 96 | }); |
|
96 | 116 |
|
97 | 117 | function showWelcomeMessage() { |
98 | 118 | var divWelcome = document.getElementById('WelcomeMessage'); |
99 | | - divWelcome.innerHTML = 'Welcome ' + myMSALObj.getAccount().userName + "to Microsoft Graph API"; |
| 119 | + divWelcome.innerHTML = "Welcome " + myMSALObj.getAccount().userName + " to Microsoft Graph API"; |
100 | 120 | var loginbutton = document.getElementById('SignIn'); |
101 | 121 | loginbutton.innerHTML = 'Sign Out'; |
102 | 122 | loginbutton.setAttribute('onclick', 'signOut();'); |
|
106 | 126 | // This function can be removed if you do not need to support IE |
107 | 127 | function acquireTokenRedirectAndCallMSGraph() { |
108 | 128 | //Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph |
109 | | - let tokenRequest = { |
110 | | - scopes: applicationConfig.graphScopes |
111 | | - }; |
112 | 129 | myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) { |
113 | | - callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback); |
| 130 | + callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback); |
114 | 131 | }).catch(function (error) { |
115 | 132 | console.log(error); |
116 | 133 | //Call acquireTokenRedirect in case of acquireToken Failure |
|
122 | 139 |
|
123 | 140 | function acquireTokenRedirectCallBack(response) { |
124 | 141 | if (response.tokenType === "access_token") { |
125 | | - callMSGraph(applicationConfig.graphEndpoint, response.accessToken, graphAPICallback); |
| 142 | + callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, graphAPICallback); |
126 | 143 | } else { |
127 | 144 | console.log("token type is:" + response.tokenType); |
128 | 145 | } |
|
133 | 150 | } |
134 | 151 |
|
135 | 152 | function requiresInteraction(errorMessage) { |
| 153 | + console.log(errorMessage) |
136 | 154 | if (!errorMessage || !errorMessage.length) { |
137 | 155 | return false; |
138 | 156 | } |
139 | 157 | return errorMessage.indexOf("consent_required") !== -1 || |
140 | 158 | errorMessage.indexOf("interaction_required") !== -1 || |
141 | 159 | errorMessage.indexOf("login_required") !== -1; |
142 | 160 | } |
143 | | - // Browser check variables |
144 | | - var ua = window.navigator.userAgent; |
145 | | - var msie = ua.indexOf('MSIE '); |
146 | | - var msie11 = ua.indexOf('Trident/'); |
147 | | - var msedge = ua.indexOf('Edge/'); |
148 | | - var isIE = msie > 0 || msie11 > 0; |
149 | | - var isEdge = msedge > 0; |
150 | 161 |
|
151 | | - //If you support IE, our recommendation is that you sign-in using Redirect APIs |
152 | | - //If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check |
153 | | - if (!isIE) { |
| 162 | + // runs on page load, change config to try different login types to see what is best for your application |
| 163 | + if (loginType === 'POPUP') { |
154 | 164 | if (myMSALObj.getAccount()) {// avoid duplicate code execution on page load in case of iframe and popup window. |
155 | 165 | showWelcomeMessage(); |
156 | 166 | acquireTokenPopupAndCallMSGraph(); |
157 | 167 | } |
158 | 168 | } |
159 | | - else { |
| 169 | + else if (loginType === 'REDIRECT') { |
160 | 170 | document.getElementById("SignIn").onclick = function () { |
161 | 171 | let redirectTokenRequest = { |
162 | | - scopes: applicationConfig.graphScopes |
| 172 | + scopes: graphConfig.graphMeEndpoint |
163 | 173 | }; |
164 | 174 | myMSALObj.loginRedirect(redirectTokenRequest); |
165 | 175 | }; |
|
168 | 178 | showWelcomeMessage(); |
169 | 179 | acquireTokenRedirectAndCallMSGraph(); |
170 | 180 | } |
| 181 | + } else { |
| 182 | + console.error('Please choose a valid login type'); |
171 | 183 | } |
172 | 184 | </script> |
173 | 185 | </body> |
|
0 commit comments