Completed add AAD auth step

Author: jasonjoh

.gitignore

@@ -64,4 +64,5 @@ typings/
 .vscode/
 
 Config.js
+Config.ts
 ReactQuickStart.zip

demo/graph-tutorial/src/App.tsx

@@ -3,9 +3,12 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { Container } from 'reactstrap';
+import { UserAgentApplication } from 'msal';
 import NavBar from './NavBar';
 import ErrorMessage from './ErrorMessage';
 import Welcome from './Welcome';
+import { config } from './Config';
+import { getUserDetails } from './GraphService';
 import 'bootstrap/dist/css/bootstrap.css';
 
 interface AppState {
@@ -15,28 +18,51 @@ interface AppState {
 }
 
 class App extends Component<any, AppState> {
+  private userAgentApplication: UserAgentApplication;
+
+  // <constructorSnippet>
   constructor(props: any) {
     super(props);
 
+    this.userAgentApplication = new UserAgentApplication({
+      auth: {
+          clientId: config.appId,
+          redirectUri: config.redirectUri
+      },
+      cache: {
+          cacheLocation: "localStorage",
+          storeAuthStateInCookie: true
+      }
+    });
+
+    var account = this.userAgentApplication.getAccount();
+
     this.state = {
-      isAuthenticated: false,
+      isAuthenticated: (account !== null),
       user: {},
       error: null
     };
+
+    if (account) {
+      // Enhance user object with data from Graph
+      this.getUserProfile();
+    }
   }
+  // </constructorSnippet>
 
   render() {
     let error = null;
     if (this.state.error) {
       error = <ErrorMessage message={this.state.error.message} debug={this.state.error.debug} />;
     }
 
+    // <renderSnippet>
     return (
       <Router>
         <div>
           <NavBar
             isAuthenticated={this.state.isAuthenticated}
-            authButtonMethod={null}
+            authButtonMethod={this.state.isAuthenticated ? this.logout.bind(this) : this.login.bind(this)}
             user={this.state.user}/>
           <Container>
             {error}
@@ -45,19 +71,106 @@ class App extends Component<any, AppState> {
                 <Welcome {...props}
                   isAuthenticated={this.state.isAuthenticated}
                   user={this.state.user}
-                  authButtonMethod={null} />
+                  authButtonMethod={this.login.bind(this)} />
               } />
           </Container>
         </div>
       </Router>
     );
+    // </renderSnippet>
   }
 
   setErrorMessage(message: string, debug: string) {
     this.setState({
       error: {message: message, debug: debug}
     });
   }
+
+  // <loginSnippet>
+  async login() {
+    try {
+      await this.userAgentApplication.loginPopup(
+          {
+            scopes: config.scopes,
+            prompt: "select_account"
+        });
+      await this.getUserProfile();
+    }
+    catch(err) {
+      var error = {};
+
+      if (typeof(err) === 'string') {
+        var errParts = err.split('|');
+        error = errParts.length > 1 ?
+          { message: errParts[1], debug: errParts[0] } :
+          { message: err };
+      } else {
+        error = {
+          message: err.message,
+          debug: JSON.stringify(err)
+        };
+      }
+
+      this.setState({
+        isAuthenticated: false,
+        user: {},
+        error: error
+      });
+    }
+  }
+  // </loginSnippet>
+
+  // <logoutSnippet>
+  logout() {
+    this.userAgentApplication.logout();
+  }
+  // </logoutSnippet>
+
+  async getUserProfile() {
+    try {
+      // Get the access token silently
+      // If the cache contains a non-expired token, this function
+      // will just return the cached token. Otherwise, it will
+      // make a request to the Azure OAuth endpoint to get a token
+
+      var accessToken = await this.userAgentApplication.acquireTokenSilent({
+          scopes: config.scopes
+        });
+
+      if (accessToken) {
+        // Get the user's profile from Graph
+        var user = await getUserDetails(accessToken.accessToken);
+        this.setState({
+          isAuthenticated: true,
+          user: {
+            displayName: user.displayName,
+            email: user.mail || user.userPrincipalName
+          },
+          error: null
+        });
+      }
+    }
+    catch(err) {
+      var error = {};
+      if (typeof(err) === 'string') {
+        var errParts = err.split('|');
+        error = errParts.length > 1 ?
+          { message: errParts[1], debug: errParts[0] } :
+          { message: err };
+      } else {
+        error = {
+          message: err.message,
+          debug: JSON.stringify(err)
+        };
+      }
+
+      this.setState({
+        isAuthenticated: false,
+        user: {},
+        error: error
+      });
+    }
+  }
 }
 
 export default App;

demo/graph-tutorial/src/Config.ts.example

@@ -0,0 +1,8 @@
+export const config = {
+  appId: 'YOUR_APP_ID_HERE',
+  redirectUri: 'http://localhost:3000',
+  scopes: [
+    'user.read',
+    'calendars.read'
+  ]
+};

demo/graph-tutorial/src/GraphService.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// <graphServiceSnippet1>
+var graph = require('@microsoft/microsoft-graph-client');
+
+function getAuthenticatedClient(accessToken: string) {
+  // Initialize Graph client
+  const client = graph.Client.init({
+    // Use the provided access token to authenticate
+    // requests
+    authProvider: (done: any) => {
+      done(null, accessToken);
+    }
+  });
+
+  return client;
+}
+
+export async function getUserDetails(accessToken: string) {
+  const client = getAuthenticatedClient(accessToken);
+
+  const user = await client.api('/me').get();
+  return user;
+}
+// </graphServiceSnippet1>