page_type: sample products:

• office-outlook
• office-365 languages:
• javascript extensions: contentType: samples technologies:
  • Add-ins createdDate: 6/26/2015 3:02:27 PM

Art Curator for Angular

This sample demonstrates how to use the Outlook Mail API to get emails and attachments from Office 365. It's built for iOS, Android, Web (Angular web app), and Windows Phone. Check out our article on Medium and this walkthrough video on YouTube.

Art Curator is a different way to view your inbox. Imagine you own a company that sells artistic t-shirts. As the owner of the company, you receive lots of emails from artists with designs they want you to buy. Instead of using Outlook and opening every individual email, downloading the attached picture, and then opening it to view, you can use Art Curator to give you an attachment-first (limited to .jpg and .png files) view of your inbox to pick and choose designs you like in a more efficient way.


This sample demonstrates the following operations from the Outlook Mail API:

• Get folders
• Get messages (including filtering and using select)
• Get attachments
• Update messages
• Create and send messages (with and without an attachment)

This sample also demonstrates authentication with Azure Active Directory using Active Directory Authentication Library (ADAL) for JavaScript.

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.

Register the app

1. To get this sample up and running quickly, go to the Outlook Dev Portal App Registration Tool.
2. In Step 1, sign in with your existing Office 365 account or click the button to get a free trial. After you sign in, proceed to the next step.
3. In Step 2, fill out the form with the following values.
   • App Name: Art Curator
   • App Type: Single-Page app (SPA)
   • Redirect URI: http://127.0.0.1:8080/
   • Home Page URL: http://artcurator.{your_subdomain}.com (the subdomain of .onmicrosoft of your Office 365 tenant)
4. In Step 3, select the following permissions underneath Mail API.
   • Read and write mail
   • Send mail
5. In Step 4, click Register App to register your application with Azure Active Directory.
6. Finally, copy the Client ID from the form to use in the next section.

Run the app

Open app/scripts/app.js and replace {your_tenant} with the subdomain of .onmicrosoft you specified for your Office 365 tenant and the client ID of your registered Azure application that you received from the Outlook Dev Portal App Registration Tool in the last step on lines 46 and 47, respectively.

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.

Understand the code

Connect to Office 365

This project uses Azure Active Directory using Azure Active Directory Library (ADAL) for JavaScript to authenticate with Azure Active Directory in order to request and receive tokens for using the Office 365 APIs.

The service is configured in app/app.js in the module's config function. In app/controllers/navBarController.js, there are two functions that handle logging in and out of Azure Active Directory which handles acquiring tokens as well.

Mail API

This project uses standard REST calls to interact with the Mail API. Refer to the Outlook Mail REST API reference for details on the available endpoints.

All of the Mail API functionality lives in app/controllers/mainController.js. First, it gets all of the folders available on the user's tenant and uses the stored value in localStorage to find the target folder. After that, it gets the 50 most recent emails that are unread and have attachments. Then, calls are made to get the content of each of those attachments. At this point, it has all of the emails and contents of the attachments and they are stored in an array that is made available to the view for display.

Other functionality included in mainController.js includes marking emails as read and creating and sending responses.

Limitations

The following features are not included in the current version.

• File support beyond .png and .jpg
• Handling a single email with multiple attachments
• Paging (getting more than 50 emails)
• Handling folder name uniqueness
• Submission folder must be a top-level folder

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

• If you have any trouble running this sample, please log an issue.
• For general questions about the Office 365 APIs, post to Stack Overflow. Make sure that your questions or comments are tagged with [office365].

Additional resources

• Create an Angular app with Office 365 APIs
• Office 365 APIs platform overview
• Office Dev Center
• Art Curator for iOS
• Art Curator for Android
• Art Curator for Windows Phone

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.