├── .gitignore ├── LICENSE ├── README assets └── screenshot.PNG ├── README.md ├── app ├── assets │ └── avatar.png ├── controllers │ ├── mainController.js │ └── navbarController.js ├── index.html ├── scripts │ ├── app.js │ └── config.js ├── services │ └── office365Factory.js ├── styles.css └── views │ └── main.html ├── package.json └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | logs/* 2 | !.gitkeep 3 | node_modules/ 4 | tmp 5 | .DS_Store 6 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Office 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README assets/screenshot.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/O365-Angular-Microsoft-Graph-Profile/59aef81af6e7b5fb62696833a0aeb75e8c3f6826/README assets/screenshot.PNG -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [ARCHIVED] Office 365 Profile Angular sample 2 | 3 | **Note:** This repo is archived and no longer actively maintained. Security vulnerabilities may exist in the project, or its dependencies. If you plan to reuse or run any code from this repo, be sure to perform appropriate security checks on the code or dependencies first. Do not use this project as the starting point of a production Office Add-in. Always start your production code by using the Office/SharePoint development workload in Visual Studio, or the [Yeoman generator for Office Add-ins](https://github.com/OfficeDev/generator-office), and follow security best practices as you develop the add-in. 4 | 5 | The Office 365 Profile Angular sample uses the Microsoft Graph API (previously called Office 365 unified API) to get user profile data from various services such as Active Directory, SharePoint, and OneDrive. 6 | 7 | The list of users in the Active Directory tenant appears in the sidebar. After selecting a user, their information, including user details, email address, hire date, manager, direct reports, and public files, are displayed in the main section of the app. All of this information comes from a single endpoint. 8 | 9 | ![O365 Profile Angular sample screenshot](./README assets/screenshot.PNG) 10 | 11 | 12 | ## Prerequisites 13 | 14 | This sample requires the following: 15 | * [Node.js](https://nodejs.org/). Node is required to run the sample on a development server and to install dependencies. 16 | * An Office 365 account. You can sign up for [an Office 365 Developer subscription](http://aka.ms/ro9c62) that includes the resources that you need to start building Office 365 apps. 17 | * A Microsoft Azure tenant to register your application. Azure Active Directory provides identity services that applications use for authentication and authorization. A trial subscription can be acquired here: [Microsoft Azure](http://aka.ms/jjm0q7). 18 | 19 | **Note** You will also need to ensure your Azure subscription is bound to your Office 365 tenant. Check out the Active Directory team's blog post, [Creating and Managing Multiple Windows Azure Active Directories](http://aka.ms/lrb3ln) for instructions. In this post, the *Adding a new directory* section will explain how to do this. You can also read [Associate your Office 365 account with Azure AD to create and manage apps](http://aka.ms/fv273q) for more information. 20 | 21 | 22 | ## Register and configure the app 23 | 24 | 1. Sign in to the [Azure Management Portal](https://manage.windowsazure.com/) using your Office 365 business account credentials. 25 | 26 | 2. Click the **Active Directory** node in the left column and select the directory linked to your Office 365 subscription. 27 | 28 | 3. Select the **Applications** tab and then **Add** at the bottom of the screen. 29 | 30 | 4. On the pop-up, select **Add an application my organization is developing**. Then click the arrow to continue. 31 | 32 | 5. Choose a name for the app, such as *O365-Angular-Profile*, and select **Web application and/or web API** as its **Type**. Then click the arrow to continue. 33 | 34 | 6. The value of **Sign-on URL** is the URL where the application will be hosted. Use *http://127.0.0.1:8080/* for the sample project. 35 | 36 | 7. The value of **App ID URI** is a unique identifier for Azure AD to identify the app. You can use http://{your_subdomain}/O365-Angular-Profile, where {your_subdomain} is the subdomain of .onmicrosoft you specified while signing up for your Office 365 business account. Then click the check mark to provision the application. 37 | 38 | 8. Once the application is successfully added, the Quick Start page for the application appears. From here, select the **Configure** tab. 39 | 40 | 9. Scroll down to the **permissions to other applications** section and click the **Add application** button. 41 | 42 | 10. In this tutorial, we'll use Microsoft Graph API to get user data, so add the **Microsoft Graph** application. Click the plus sign in the application's row and then click the check mark at the top right to add it. Then click the check mark at the bottom right to continue. 43 | 44 | 11. In the **Microsoft Graph** row, select **Delegated Permissions**, and in the selection list, select **Read all users' basic profiles**, **Read items in all site collections**, **Read signed-in user's files**, **Access directory as the signed in user**, and **Sign in and read user profile**. 45 | 46 | 12. Click **Save** to save the app's configuration. 47 | 48 | ### Configure the app to allow the OAuth 2.0 implicit grant flow 49 | 50 | In order to get an access token for Microsoft Graph API requests, the application will use the OAuth implicit grant flow. You need to update the application's manifest to allow the OAuth implicit grant flow because it is not allowed by default. 51 | 52 | 1. Select the **Configure** tab of the application's entry in the Azure Management Portal. 53 | 54 | 2. Using the **Manage Manifest** button in the drawer, download the manifest file for the application and save it to the computer. 55 | 56 | 3. Open the manifest file with a text editor. Search for the *oauth2AllowImplicitFlow* property. By default it is set to *false*; change it to *true* and save the file. 57 | 58 | 4. Using the **Manage Manifest** button, upload the updated manifest file. 59 | 60 | 61 | ## Run the app 62 | 63 | Open *app/scripts/config.js* and replace *{client_ID}* with the client ID of your registered Azure application (found on the **Configure** tab of your application's entry in the Azure Management Portal). 64 | 65 | Next, install the necessary dependencies and run the project via the command line. Begin by opening a command prompt and navigating to the root folder. Once there, follow the steps below. 66 | 67 | 1. Install project dependencies by running ```npm install```. 68 | 2. Now that all the project dependencies are installed, start the development server by running ```node server.js``` in the root folder. 69 | 3. Navigate to ```http://127.0.0.1:8080/``` in your web browser. 70 | 71 | ## Security notice 72 | [ADAL JS](https://github.com/AzureAD/azure-activedirectory-library-for-js) does not validate the token received from Azure AD. It relies on the app’s backend to do so, and until you call the backend, you don’t know if the user obtained an acceptable token. Business applications should have a server-side component for user authentication built into the web application for security reasons. Without this backend token validation, your app is susceptible to security attacks such as the [confused deputy problem](https://en.wikipedia.org/wiki/Confused_deputy_problem). Check out this [blog post](http://www.cloudidentity.com/blog/2015/02/19/introducing-adal-js-v1/) for more information. 73 | 74 | 75 | ## Questions and comments 76 | 77 | We'd love to get your feedback about the Office 365 Angular Snippets sample. You can send your questions and suggestions to us in the [Issues](https://github.com/OfficeDev/O365-Angular-Profile/issues) section of this repository. 78 | 79 | Your feedback is important to us. Connect with us on [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph). Tag your questions with [MicrosoftGraph] and [office365]. 80 | 81 | 82 | ## Additional resources 83 | 84 | * [Office Dev Center](http://dev.office.com/) 85 | * [Microsoft Graph API](http://graph.microsoft.io) 86 | 87 | ## Copyright 88 | Copyright (c) 2015 Microsoft. All rights reserved. 89 | 90 | 91 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 92 | -------------------------------------------------------------------------------- /app/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OfficeDev/O365-Angular-Microsoft-Graph-Profile/59aef81af6e7b5fb62696833a0aeb75e8c3f6826/app/assets/avatar.png -------------------------------------------------------------------------------- /app/controllers/mainController.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. 3 | */ 4 | 5 | (function () { 6 | angular 7 | .module('profileApp') 8 | .controller('MainController', MainController); 9 | 10 | MainController.$inject = ['$scope', '$log', '$q', 'adalAuthenticationService', 'office365Factory']; 11 | 12 | /** 13 | * The MainController code. 14 | */ 15 | function MainController ($scope, $log, $q, adalAuthenticationService, office365) { 16 | var vm = this; 17 | 18 | // Properties 19 | vm.users = []; 20 | vm.activeUser; 21 | 22 | // Methods 23 | vm.selectUser = selectUser; 24 | vm.setUserClass = setUserClass; 25 | vm.setManager = setManager; 26 | 27 | // *********************************** // 28 | // End of exposed properties and methods. 29 | 30 | /** 31 | * This function does any initialization work the 32 | * controller needs. 33 | */ 34 | (function activate () { 35 | $log.info('MainController invoked.'); 36 | 37 | // Once the user is logged in, fetch the data. 38 | if (adalAuthenticationService.userInfo.isAuthenticated) { 39 | getUsersAsync() 40 | .then(function () { 41 | getUserInfo(); 42 | }, function (err) { 43 | $log.error(err); 44 | }); 45 | } 46 | })(); 47 | 48 | /** 49 | * Clears the last selected user's data from the view model 50 | * and gets the data for the new selected user. 51 | */ 52 | function selectUser () { 53 | // Switch to first tab. 54 | vm.makeUserDetailsTabActive = true; 55 | 56 | // Clear current data. 57 | vm.activeUser.directReports = []; 58 | vm.activeUser.manager = null; 59 | vm.activeUser.groups = []; 60 | vm.activeUser.files = []; 61 | 62 | // Get user's data from Office 365. 63 | getUserInfo(); 64 | } 65 | 66 | /** 67 | * Sets the user's manager as the selected user if a manager exists. 68 | */ 69 | function setManager () { 70 | if (vm.activeUser.manager) { 71 | vm.activeUser = vm.activeUser.manager; 72 | vm.selectUser(); 73 | } 74 | } 75 | 76 | /** 77 | * Sets class of selected user. 78 | */ 79 | function setUserClass (objectId) { 80 | if (objectId === vm.activeUser.id) { 81 | return 'active'; 82 | } else { 83 | return ''; 84 | } 85 | } 86 | 87 | /** 88 | * Gets all users in the tenant. 89 | */ 90 | function getUsersAsync () { 91 | return $q(function (resolve, reject) { 92 | office365.getUsers() 93 | .then(function (res) { 94 | // Bind data to the view model. 95 | vm.users = res.data.value.sort(byDisplayName); 96 | 97 | // Set the selected user as the first user in the directory. 98 | vm.activeUser = vm.users[0]; 99 | vm.activeUser.directReports = []; 100 | vm.activeUser.manager = null; 101 | vm.activeUser.groups = []; 102 | vm.activeUser.files = []; 103 | 104 | resolve(); 105 | }, function (err) { 106 | reject(err); 107 | }); 108 | }); 109 | } 110 | 111 | /** 112 | * Gets active user's direct reports, groups, and files. 113 | */ 114 | function getUserInfo () { 115 | // Get the selected user's profile picture. 116 | office365.getProfilePicture(vm.activeUser.id) 117 | .then(function (res) { 118 | // Convert raw image data to encoded data to display. 119 | console.log(res); 120 | var imageUrl = 'data:image/*;base64,' + res.data; 121 | 122 | // Bind data to the view model. 123 | vm.activeUser.photoUrl = imageUrl; 124 | 125 | $log.debug('Photo data: ', res); 126 | $log.debug('Photo URL: ', vm.activeUser.photoUrl); 127 | }, function (err) { 128 | $log.error('User does not have a thumbnail photo.', err); 129 | vm.activeUser.photoUrl = 'assets/avatar.png'; 130 | }); 131 | 132 | // Get the selected user's direct reports. 133 | office365.getDirectReports(vm.activeUser.id) 134 | .then(function (res) { 135 | // Bind data to the view model. 136 | vm.activeUser.directReports = res.data.value; 137 | }, function (err) { 138 | $log.error(err); 139 | }); 140 | 141 | // Get the selected user's manager. 142 | office365.getManager(vm.activeUser.id) 143 | .then(function (res) { 144 | // Bind data to the view model. 145 | vm.activeUser.manager = res.data; 146 | }, function (err) { 147 | if (err.status === 404) { 148 | $log.error('The selected user does not have a manager.'); 149 | } else { 150 | $log.error(err); 151 | } 152 | }); 153 | 154 | // Get the groups the selected user is a member of. 155 | office365.getGroups(vm.activeUser.id) 156 | .then(function (res) { 157 | // Bind data to the view model. 158 | vm.activeUser.groups = res.data.value; 159 | }, function (err) { 160 | $log.error(err); 161 | }); 162 | 163 | /** 164 | * As of 11/9, this function has a bug where it returns a bad error code 165 | * that causes the application to be reloaded indefinitely. Removing until 166 | * this bug is fixed. 167 | */ 168 | // Get the selected user's files that are shared with the signed-in user. 169 | // office365.getFiles(vm.activeUser.id) 170 | // .then(function (res) { 171 | // // Bind data to the view model. 172 | // vm.activeUser.files = res.data.value; 173 | // }, function (err) { 174 | // $log.error('Unable to get files.', err); 175 | // }); 176 | } 177 | 178 | /** 179 | * @name byDisplayName 180 | * @desc Comparison function to sort users by displayName. 181 | */ 182 | function byDisplayName (a, b) { 183 | if (a.displayName < b.displayName) { 184 | return -1; 185 | } else if (a.displayName > b.displayName) { 186 | return 1; 187 | } else { 188 | return 0; 189 | } 190 | } 191 | } 192 | })(); 193 | 194 | // ********************************************************* 195 | // 196 | // O365-Angular-Profile, https://github.com/OfficeDev/O365-Angular-Profile 197 | // 198 | // Copyright (c) Microsoft Corporation 199 | // All rights reserved. 200 | // 201 | // MIT License: 202 | // Permission is hereby granted, free of charge, to any person obtaining 203 | // a copy of this software and associated documentation files (the 204 | // "Software"), to deal in the Software without restriction, including 205 | // without limitation the rights to use, copy, modify, merge, publish, 206 | // distribute, sublicense, and/or sell copies of the Software, and to 207 | // permit persons to whom the Software is furnished to do so, subject to 208 | // the following conditions: 209 | // 210 | // The above copyright notice and this permission notice shall be 211 | // included in all copies or substantial portions of the Software. 212 | // 213 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 214 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 215 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 216 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 217 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 218 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 219 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 220 | // 221 | // ********************************************************* 222 | -------------------------------------------------------------------------------- /app/controllers/navbarController.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. 3 | */ 4 | 5 | (function () { 6 | angular 7 | .module('profileApp') 8 | .controller('NavbarController', NavbarController); 9 | 10 | /** 11 | * The NavbarController code. 12 | */ 13 | function NavbarController ($log, adalAuthenticationService) { 14 | var vm = this; 15 | 16 | // Properties 17 | vm.isCollapsed; 18 | 19 | // Methods 20 | vm.connect = connect; 21 | vm.disconnect = disconnect; 22 | 23 | // *********************************** // 24 | // End of exposed properties and methods. 25 | 26 | // Activate controller when it loads. 27 | activate(); 28 | 29 | /** 30 | * This function does any initialization work the 31 | * controller needs. 32 | */ 33 | function activate () { 34 | vm.isCollapsed = true; 35 | } 36 | 37 | /** 38 | * Expose the login method to the view. 39 | */ 40 | function connect () { 41 | $log.debug('Connecting to Office 365...'); 42 | adalAuthenticationService.login(); 43 | } 44 | 45 | /** 46 | * Expose the logOut method to the view. 47 | */ 48 | function disconnect () { 49 | $log.debug('Disconnecting from Office 365...'); 50 | adalAuthenticationService.logOut(); 51 | } 52 | } 53 | })(); 54 | 55 | // ********************************************************* 56 | // 57 | // O365-Angular-Profile, https://github.com/OfficeDev/O365-Angular-Profile 58 | // 59 | // Copyright (c) Microsoft Corporation 60 | // All rights reserved. 61 | // 62 | // MIT License: 63 | // Permission is hereby granted, free of charge, to any person obtaining 64 | // a copy of this software and associated documentation files (the 65 | // "Software"), to deal in the Software without restriction, including 66 | // without limitation the rights to use, copy, modify, merge, publish, 67 | // distribute, sublicense, and/or sell copies of the Software, and to 68 | // permit persons to whom the Software is furnished to do so, subject to 69 | // the following conditions: 70 | // 71 | // The above copyright notice and this permission notice shall be 72 | // included in all copies or substantial portions of the Software. 73 | // 74 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 75 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 76 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 77 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 78 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 79 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 80 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 81 | // 82 | // ********************************************************* 83 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Office 365 Profile Angular sample 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 61 |
62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /app/scripts/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. 3 | */ 4 | 5 | (function () { 6 | angular 7 | .module('profileApp', [ 8 | 'ngRoute', 9 | 'AdalAngular', 10 | 'ui.bootstrap', 11 | 'angular-loading-bar' 12 | ]) 13 | .config(config); 14 | 15 | function config ($routeProvider, $httpProvider, adalAuthenticationServiceProvider, cfpLoadingBarProvider) { 16 | // Configure the routes. 17 | $routeProvider 18 | .when('/', { 19 | templateUrl: 'views/main.html', 20 | controller: 'MainController', 21 | controllerAs: 'main' 22 | }) 23 | .otherwise({ 24 | redirectTo: '/' 25 | }); 26 | 27 | // Configure ADAL JS. 28 | adalAuthenticationServiceProvider.init( 29 | { 30 | clientId: clientId, 31 | endpoints: { 32 | 'https://graph.microsoft.com': 'https://graph.microsoft.com' 33 | } 34 | }, 35 | $httpProvider 36 | ); 37 | 38 | // Loading bar configuration options. 39 | cfpLoadingBarProvider.includeSpinner = false; 40 | } 41 | })(); 42 | 43 | // ********************************************************* 44 | // 45 | // O365-Angular-Profile, https://github.com/OfficeDev/O365-Angular-Profile 46 | // 47 | // Copyright (c) Microsoft Corporation 48 | // All rights reserved. 49 | // 50 | // MIT License: 51 | // Permission is hereby granted, free of charge, to any person obtaining 52 | // a copy of this software and associated documentation files (the 53 | // "Software"), to deal in the Software without restriction, including 54 | // without limitation the rights to use, copy, modify, merge, publish, 55 | // distribute, sublicense, and/or sell copies of the Software, and to 56 | // permit persons to whom the Software is furnished to do so, subject to 57 | // the following conditions: 58 | // 59 | // The above copyright notice and this permission notice shall be 60 | // included in all copies or substantial portions of the Software. 61 | // 62 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 63 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 64 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 65 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 66 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 67 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 68 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 69 | // 70 | // ********************************************************* 71 | -------------------------------------------------------------------------------- /app/scripts/config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. 3 | */ 4 | 5 | // Enter the appropriate values from your app's entry in the Azure Management Portal. 6 | var clientId = '{client_ID}'; 7 | 8 | // ********************************************************* 9 | // 10 | // O365-Angular-Profile, https://github.com/OfficeDev/O365-Angular-Profile 11 | // 12 | // Copyright (c) Microsoft Corporation 13 | // All rights reserved. 14 | // 15 | // MIT License: 16 | // Permission is hereby granted, free of charge, to any person obtaining 17 | // a copy of this software and associated documentation files (the 18 | // "Software"), to deal in the Software without restriction, including 19 | // without limitation the rights to use, copy, modify, merge, publish, 20 | // distribute, sublicense, and/or sell copies of the Software, and to 21 | // permit persons to whom the Software is furnished to do so, subject to 22 | // the following conditions: 23 | // 24 | // The above copyright notice and this permission notice shall be 25 | // included in all copies or substantial portions of the Software. 26 | // 27 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 28 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 29 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 30 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 31 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 32 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 33 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 34 | // 35 | // ********************************************************* 36 | -------------------------------------------------------------------------------- /app/services/office365Factory.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. 3 | */ 4 | 5 | (function () { 6 | angular 7 | .module('profileApp') 8 | .factory('office365Factory', office365Factory); 9 | 10 | function office365Factory ($log, $http) { 11 | var office365 = {}; 12 | 13 | // Methods 14 | office365.getUsers = getUsers; 15 | office365.getDirectReports = getDirectReports; 16 | office365.getGroups = getGroups; 17 | office365.getFiles = getFiles; 18 | office365.getManager = getManager; 19 | office365.getProfilePicture = getProfilePicture; 20 | 21 | // *********************************** // 22 | // End of exposed properties and methods. 23 | 24 | var baseUrl = 'https://graph.microsoft.com/v1.0/myOrganization'; 25 | 26 | /** 27 | * Gets all users in the tenant. 28 | */ 29 | function getUsers () { 30 | var request = { 31 | method: 'GET', 32 | url: baseUrl + '/users' 33 | }; 34 | 35 | return $http(request); 36 | } 37 | 38 | /** 39 | * Gets the user's direct reports. 40 | */ 41 | function getDirectReports (objectId) { 42 | var request = { 43 | method: 'GET', 44 | url: baseUrl + '/users/' + objectId + '/directReports' 45 | }; 46 | 47 | return $http(request); 48 | } 49 | 50 | /** 51 | * Gets the groups the user is a member of. 52 | */ 53 | function getGroups (objectId) { 54 | var request = { 55 | method: 'GET', 56 | url: baseUrl + '/users/' + objectId + '/memberOf' 57 | }; 58 | 59 | return $http(request); 60 | } 61 | 62 | /** 63 | * Gets the user's files. 64 | */ 65 | function getFiles (objectId) { 66 | var request = { 67 | method: 'GET', 68 | url: baseUrl + '/users/' + objectId + '/drive/root/children' 69 | }; 70 | 71 | return $http(request); 72 | } 73 | 74 | /** 75 | * Gets the user's manager. 76 | */ 77 | function getManager (objectId) { 78 | var request = { 79 | method: 'GET', 80 | url: baseUrl + '/users/' + objectId + '/manager' 81 | }; 82 | 83 | return $http(request); 84 | } 85 | 86 | /** 87 | * Gets the user's profile picture. 88 | */ 89 | function getProfilePicture (objectId) { 90 | var request = { 91 | method: 'GET', 92 | url: baseUrl + '/users/' + objectId + '/photo/$value' 93 | }; 94 | 95 | return $http(request); 96 | } 97 | 98 | return office365; 99 | } 100 | })(); 101 | 102 | // ********************************************************* 103 | // 104 | // O365-Angular-Profile, https://github.com/OfficeDev/O365-Angular-Profile 105 | // 106 | // Copyright (c) Microsoft Corporation 107 | // All rights reserved. 108 | // 109 | // MIT License: 110 | // Permission is hereby granted, free of charge, to any person obtaining 111 | // a copy of this software and associated documentation files (the 112 | // "Software"), to deal in the Software without restriction, including 113 | // without limitation the rights to use, copy, modify, merge, publish, 114 | // distribute, sublicense, and/or sell copies of the Software, and to 115 | // permit persons to whom the Software is furnished to do so, subject to 116 | // the following conditions: 117 | // 118 | // The above copyright notice and this permission notice shall be 119 | // included in all copies or substantial portions of the Software. 120 | // 121 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 122 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 123 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 124 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 125 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 126 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 127 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 128 | // 129 | // ********************************************************* 130 | -------------------------------------------------------------------------------- /app/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Base structure 3 | */ 4 | 5 | /* Move down content because we have a fixed navbar that is 50px tall */ 6 | body { 7 | padding-top: 50px; 8 | } 9 | 10 | /* 11 | * Global add-ons 12 | */ 13 | 14 | .sub-header { 15 | padding-bottom: 10px; 16 | border-bottom: 1px solid #eee; 17 | } 18 | 19 | /* 20 | * Top navigation 21 | * Hide default border to remove 1px line. 22 | */ 23 | .navbar-fixed-top { 24 | border: 0; 25 | } 26 | 27 | /* 28 | * Sidebar 29 | */ 30 | 31 | /* Hide for mobile, show later */ 32 | .sidebar { 33 | display: none; 34 | } 35 | @media (min-width: 768px) { 36 | .sidebar { 37 | position: fixed; 38 | top: 51px; 39 | bottom: 0; 40 | left: 0; 41 | z-index: 1000; 42 | display: block; 43 | padding: 20px; 44 | overflow-x: hidden; 45 | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ 46 | background-color: #f5f5f5; 47 | border-right: 1px solid #eee; 48 | } 49 | } 50 | 51 | /* Sidebar navigation */ 52 | .nav-sidebar { 53 | margin-right: -21px; /* 20px padding + 1px border */ 54 | margin-bottom: 20px; 55 | margin-left: -20px; 56 | } 57 | .nav-sidebar > li > a { 58 | padding-right: 20px; 59 | padding-left: 20px; 60 | } 61 | .nav-sidebar > .active > a, 62 | .nav-sidebar > .active > a:hover, 63 | .nav-sidebar > .active > a:focus { 64 | color: #fff; 65 | background-color: #428bca; 66 | } 67 | 68 | 69 | /* 70 | * Main content 71 | */ 72 | 73 | .main { 74 | padding: 20px; 75 | } 76 | @media (min-width: 768px) { 77 | .main { 78 | padding-right: 40px; 79 | padding-left: 40px; 80 | } 81 | } 82 | .main .page-header { 83 | margin-top: 0; 84 | } 85 | 86 | .detailKey { 87 | font-weight: bold; 88 | display: inline-block; 89 | } 90 | 91 | .detailValue { 92 | display: inline-block; 93 | } 94 | 95 | .avatar { 96 | margin-bottom: 10px; 97 | } 98 | 99 | .navbar-inverse .navbar-text { 100 | color: white; 101 | } -------------------------------------------------------------------------------- /app/views/main.html: -------------------------------------------------------------------------------- 1 | 3 | 4 |
5 |
6 |
7 |

Use the button in the navigation bar to connect to Office 365 and explore your tenant's directory.

8 |
9 |
10 |
11 | 18 | 19 |
20 |

{{ main.activeUser.displayName }}

21 | 22 | 23 |
24 | 25 |
26 |
27 |

Job Title:

28 |

{{ main.activeUser.jobTitle || 'N/A' }}

29 |
30 |
31 |

Department:

32 |

{{ main.activeUser.department || 'N/A' }}

33 |
34 |
35 |

Hire Date:

36 |

{{ main.activeUser.hireDate || 'N/A' }}

37 |
38 |
39 |

Alias:

40 |

{{ main.activeUser.mailNickname || 'N/A' }}

41 |
42 |
43 |

Phone:

44 |

{{ main.activeUser.telephoneNumber || 'N/A' }}

45 |
46 |
47 |

State:

48 |

{{ main.activeUser.state || 'N/A' }}

49 |
50 |
51 |

Country:

52 |

{{ main.activeUser.country || 'N/A' }}

53 |
54 |
55 |

Manager:

56 |

{{ main.activeUser.manager.displayName || 'N/A' }}

57 |

N/A

58 |
59 |
60 | 61 |
62 |
63 |

{{ report.displayName }}

64 |
65 |

Job Title:

66 |

{{ report.jobTitle || 'N/A' }}

67 |
68 |
69 |

Department:

70 |

{{ report.department || 'N/A' }}

71 |
72 |
73 |

Hire Date:

74 |

{{ report.hireDate || 'N/A' }}

75 |
76 |
77 |

Alias:

78 |

{{ report.mailNickname || 'N/A' }}

79 |
80 |
81 |

Phone:

82 |

{{ report.telephoneNumber || 'N/A' }}

83 |
84 |
85 |

State:

86 |

{{ report.state || 'N/A' }}

87 |
88 |
89 |

Country:

90 |

{{ report.country || 'N/A' }}

91 |
92 |
93 |
94 | 95 |
96 |

{{ main.activeUser.displayName }} is a member of the following {{ main.activeUser.groups.length }} groups.

97 |
    98 |
  • {{ group.displayName }}
  • 99 |
100 |
101 | 102 |

{{ main.activeUser.displayName }}'s Files

103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 115 | 116 |
NameLast ModifiedLink
{{ file.name }}{{ file.dateTimeLastModified | date: 'shortDate' }} 113 | Link 114 |
117 |
118 |
119 |
120 | 121 |
122 |
123 | 124 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "O365-Angular-Profile", 3 | "license": "MIT", 4 | "main": "server.js", 5 | "dependencies": { 6 | "express": "^4.12.3", 7 | "morgan": "^1.5.2", 8 | "path": "^0.11.14" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file. 3 | */ 4 | 5 | var express = require('express'); 6 | var app = express(); 7 | var morgan = require('morgan'); 8 | var path = require('path'); 9 | 10 | // Initialize variables. 11 | var port = process.env.PORT || 8080; 12 | 13 | // Configure morgan module to log all requests. 14 | app.use(morgan('dev')); 15 | 16 | // Set the front-end folder to serve public assets. 17 | app.use(express.static(__dirname + '/app')); 18 | 19 | // Set up our one route to the index.html file. 20 | app.get('*', function (req, res) { 21 | res.sendFile(path.join(__dirname + '/app/index.html')); 22 | }); 23 | 24 | // Start the app. 25 | app.listen(port); 26 | console.log('Listening on port ' + port + '...'); 27 | 28 | // ********************************************************* 29 | // 30 | // O365-Angular-Profile, https://github.com/OfficeDev/O365-Angular-Profile 31 | // 32 | // Copyright (c) Microsoft Corporation 33 | // All rights reserved. 34 | // 35 | // MIT License: 36 | // Permission is hereby granted, free of charge, to any person obtaining 37 | // a copy of this software and associated documentation files (the 38 | // "Software"), to deal in the Software without restriction, including 39 | // without limitation the rights to use, copy, modify, merge, publish, 40 | // distribute, sublicense, and/or sell copies of the Software, and to 41 | // permit persons to whom the Software is furnished to do so, subject to 42 | // the following conditions: 43 | // 44 | // The above copyright notice and this permission notice shall be 45 | // included in all copies or substantial portions of the Software. 46 | // 47 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 48 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 49 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 50 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 51 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 52 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 53 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 54 | // 55 | // ********************************************************* 56 | --------------------------------------------------------------------------------