WIP

src/HostedExplorer.tsx

@@ -26,6 +26,9 @@ import { useGraphPhoto } from "./hooks/useGraphPhoto";
 import { ConnectScreen } from "./Platform/Hosted/ConnectScreen";
 import "./Shared/appInsights";
 import { useAADAccount } from "./hooks/useAADAccount";
+import * as Msal from "msal";
+import { fetchMe } from "./hooks/useGraphProfile";
+import { fetchSubscriptions } from "./hooks/useSubscriptions";
 
 initializeIcons();
 
@@ -53,7 +56,21 @@ const configuration: Configuration = {
 //   }
 // };
 
-const application = new PublicClientApplication(configuration);
+// const application = new PublicClientApplication(configuration);
+
+const msal = new Msal.UserAgentApplication({
+  auth: {
+    authority: "https://login.microsoft.com/common",
+    clientId: "203f1145-856a-4232-83d4-a43568fba23d",
+    redirectUri: "https://dataexplorer-dev.azurewebsites.net"
+  }
+});
+
+// msal.handleRedirectCallback((error, response) => {
+//   console.log(error, response);
+//   debugger;
+//   // handle redirect response or error
+// });
 
 const App: React.FunctionComponent = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
@@ -209,9 +226,18 @@ const App: React.FunctionComponent = () => {
                 className="mecontrolSigninButton"
                 text="Sign In"
                 onClick={() => {
-                  instance.loginPopup({
-                    scopes: ["https://graph.microsoft-ppe.com/" + "/.default"],
-                    redirectUri: "https://localhost:1234/hostedExplorer.html"
+                  msal.loginPopup().then(foo => {
+                    msal.acquireTokenSilent({ scopes: ["https://graph.windows.net//.default"] }).then(bar => {
+                      debugger;
+                      // const token =
+                      //   "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IjVPZjlQNUY5Z0NDd0NtRjJCT0hIeEREUS1EayIsImtpZCI6IjVPZjlQNUY5Z0NDd0NtRjJCT0hIeEREUS1EayJ9.eyJhdWQiOiJodHRwczovL21hbmFnZW1lbnQuYXp1cmUuY29tLyIsImlzcyI6Imh0dHBzOi8vc3RzLndpbmRvd3MubmV0LzcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0Ny8iLCJpYXQiOjE2MDkyMDYwNDQsIm5iZiI6MTYwOTIwNjA0NCwiZXhwIjoxNjA5MjA5OTQ0LCJhY3IiOiIxIiwiYWlvIjoiQVpRQWEvOFNBQUFBYzZ3RmNHOWRDYTRDS2tXL2YxdnM5b3Z2Y0tqN3NLazJqc3c5MG1MRlJkclJLelZ3cnJpS0hMNXBua0tFejVlQWlXYTRwd2JHNXdKY240dkpLVUpXb2JGdmdkVXhteWd4NGlxOXk1Z0l6TW9zM25DRGdodCtxa3lyVGlrVzJ0WTA0amRLeFA2Q2wzWm10UzYxMmhmdkFkQVRBZ3Arc0w1TUdzU05KcElUR1dBZ1RKZXZ4c1dHek5Sb2hPOXdWVUN4IiwiYW1yIjpbInB3ZCIsInJzYSIsIm1mYSJdLCJhcHBpZCI6IjIwM2YxMTQ1LTg1NmEtNDIzMi04M2Q0LWE0MzU2OGZiYTIzZCIsImFwcGlkYWNyIjoiMCIsImRldmljZWlkIjoiMzI3NjNiYjktMDNlNS00ZDBkLTliZmEtZmEyY2U5OGQ1ZGVlIiwiZmFtaWx5X25hbWUiOiJGYXVsa25lciIsImdpdmVuX25hbWUiOiJTdGV2ZSIsImhhc2dyb3VwcyI6InRydWUiLCJpcGFkZHIiOiI0NS4yMi4xMjIuMjIwIiwibmFtZSI6IlN0ZXZlIEZhdWxrbmVyIiwib2lkIjoiN2M4Yjk4ZGItOTA3OC00NGM3LWE5YWItYzJiOGYxOGRiZDM2Iiwib25wcmVtX3NpZCI6IlMtMS01LTIxLTIxMjc1MjExODQtMTYwNDAxMjkyMC0xODg3OTI3NTI3LTMyMjM1ODIxIiwicHVpZCI6IjEwMDM3RkZFQUJDNTk0QjYiLCJyaCI6IjAuQVJvQXY0ajVjdkdHcjBHUnF5MTgwQkhiUjBVUlB5QnFoVEpDZzlTa05XajdvajBhQUprLiIsInNjcCI6InVzZXJfaW1wZXJzb25hdGlvbiIsInN1YiI6InNJV3JwSTFoQVNUWXJoUFVrYWp1NUtQb3Z6SHdzUkdnOTN3U2t1OEs0aW8iLCJ0aWQiOiI3MmY5ODhiZi04NmYxLTQxYWYtOTFhYi0yZDdjZDAxMWRiNDciLCJ1bmlxdWVfbmFtZSI6InN0ZmF1bEBtaWNyb3NvZnQuY29tIiwidXBuIjoic3RmYXVsQG1pY3Jvc29mdC5jb20iLCJ1dGkiOiJ2ME0xNVdjSWkwcVpwNTdEd1QwSUFnIiwidmVyIjoiMS4wIiwieG1zX3RjZHQiOjEyODkyNDE1NDd9.WD_NlNg2C9rOeES_zRDEIn9MQaNTElyd1NjmQ89dGg8PxCurhZpnuSNmv6J8KuAaiVtifppu64zP5nPDouAsdq5lWrJ5N6WZE9Aox0RuVMqoQRTYEYSeC0R-2wh_77G77zPHVq2qMTOHKz60_Que6_T5VTOFsNpfPzRQwqXmnIvUZnKqf6cBvxLyJYE2IsXSuOdB7jDNWfnsGv19Ew7IdScS4PoIrsVGX5E7rQ4B_bUoYm74ooiH8W0TmVXah21Z66fVAEzuWYlIX5G6ylmT9ncDefVon5JKKe5ksN5GrNjPpVVm3tyCwJeRO_zmtd7nqOZ6GLrn5hzR4CpKB63Fng";
+                      fetchMe(bar.accessToken).then(resp => {
+                        debugger;
+                      });
+                    });
+                    // msal.acquireTokenSilent({ scopes: ["https://graph.windows.net//.default"] }).then(bar => {
+                    //   debugger;
+                    // });
                   });
                 }}
                 styles={{
@@ -253,9 +279,4 @@ const App: React.FunctionComponent = () => {
   );
 };
 
-render(
-  <MsalProvider instance={application}>
-    <App />
-  </MsalProvider>,
-  document.body
-);
+render(<App />, document.body);

src/hooks/useGraphProfile.tsx

@@ -12,7 +12,7 @@ export async function fetchMe(accessToken: string): Promise<ProfileResponse> {
     headers: headers
   };
 
-  return fetch("https://graph.microsoft.com/v1.0/me", options)
+  return fetch("https://graph.windows.net/me?api-version=1.6", options)
     .then(response => response.json())
     .catch(error => console.log(error));
 }