officedev/o365-angular-microsoft-graph-profile

[DEPRECATED] To see a current sample that demonstrates the concepts explained here, visit https://github.com/microsoftgraph/angular-snippets-rest-sample

[ARCHIVED] Office 365 Profile Angular sample

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, and follow security best practices as you develop the add-in.

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.

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.


Prerequisites

This sample requires the following:

• Node.js. Node is required to run the sample on a development server and to install dependencies.
• An Office 365 account. You can sign up for an Office 365 Developer subscription that includes the resources that you need to start building Office 365 apps.
• 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.

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 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 for more information.

Register and configure the app

1. Sign in to the Azure Management Portal using your Office 365 business account credentials.

2. Click the Active Directory node in the left column and select the directory linked to your Office 365 subscription.

3. Select the Applications tab and then Add at the bottom of the screen.

4. On the pop-up, select Add an application my organization is developing. Then click the arrow to continue.

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.

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.

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.

8. Once the application is successfully added, the Quick Start page for the application appears. From here, select the Configure tab.

9. Scroll down to the permissions to other applications section and click the Add application button.

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.

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.

12. Click Save to save the app's configuration.

Configure the app to allow the OAuth 2.0 implicit grant flow

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.

1. Select the Configure tab of the application's entry in the Azure Management Portal.

2. Using the Manage Manifest button in the drawer, download the manifest file for the application and save it to the computer.

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.

4. Using the Manage Manifest button, upload the updated manifest file.

Run the app

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).

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.

1. Install project dependencies by running npm install.
2. Now that all the project dependencies are installed, start the development server by running node server.js in the root folder.
3. Navigate to http://127.0.0.1:8080/ in your web browser.

Security notice

ADAL 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. Check out this blog post for more information.

Questions and comments

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 section of this repository.

Your feedback is important to us. Connect with us on Stack Overflow. Tag your questions with [MicrosoftGraph] and [office365].

Additional resources

• Office Dev Center
• Microsoft Graph API

Copyright

Copyright (c) 2015 Microsoft. All rights reserved.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.