├── .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 |  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 |Job Title:
28 |{{ main.activeUser.jobTitle || 'N/A' }}
29 |Department:
32 |{{ main.activeUser.department || 'N/A' }}
33 |Hire Date:
36 |{{ main.activeUser.hireDate || 'N/A' }}
37 |Alias:
40 |{{ main.activeUser.mailNickname || 'N/A' }}
41 |Phone:
44 |{{ main.activeUser.telephoneNumber || 'N/A' }}
45 |State:
48 |{{ main.activeUser.state || 'N/A' }}
49 |Country:
52 |{{ main.activeUser.country || 'N/A' }}
53 |Job Title:
66 |{{ report.jobTitle || 'N/A' }}
67 |Department:
70 |{{ report.department || 'N/A' }}
71 |Hire Date:
74 |{{ report.hireDate || 'N/A' }}
75 |Alias:
78 |{{ report.mailNickname || 'N/A' }}
79 |Phone:
82 |{{ report.telephoneNumber || 'N/A' }}
83 |State:
86 |{{ report.state || 'N/A' }}
87 |Country:
90 |{{ report.country || 'N/A' }}
91 |Name | 106 |Last Modified | 107 |Link | 108 |
---|---|---|
{{ file.name }} | 111 |{{ file.dateTimeLastModified | date: 'shortDate' }} | 112 |113 | Link 114 | | 115 |