As you may have heard, I joined the Azure Developer marketing team this week and am focused on App Service. It couldn’t come at a more exciting time with the announcement of Azure Functions. As I start working on my role marketing all of this, I wanted to get a really good understanding of the power of all these PaaS bits!

In this post I’ll walk through building a very useful scenario of receiving a notification from Exchange when an e-mail arrives in a users inbox and then translating the e-mail subject and then updating the e-mail in the inbox.

A big thank you to Christopher Anderson (@Crandycodes) and Fabio Cavalcante (@codesapien) from the Azure App Service team for their help on stackoverflow. It is testament to how engaged the engineering folks behind all this are!

There are some great sessions from Build 2016 on Azure Functions. Chris did one on day 2 introducing it. And Matthew Henderson (@mattchenderson) did a under the hood look too. Yochay Kiriaty @yochayk) also did a great talk on hyper-scale web and mobile apps that leveraged Azure Functions too.

Prerequisites

Things you’ll need:

1. an Azure account – there is a free trial account you can sign up for
2. an Office 365 account – there is a free trial account you can sign up for too
   Important: You also need to make sure your Azure subscription is bound to your Office 365 tenant. To do this, see the Active Directory team’s blog post, Creating and Managing Multiple Windows Azure Active Directories. The section Adding a new directory will explain how to do this. You can also see Set up your Office 365 development environment and the section Associate your Office 365 account with Azure AD to create and manage apps for more information.
3. a Bing Translator API account using your Microsoft Account (not Office 365 account) – follow the first two simple steps on the Translator API web site

Tips

1. Follow all the steps
2. Do all this from one InPrivate browser session

Lets go!

A. Create an Azure AD application

For you Azure developers, we are about to go old school and go to the old Azure Portal. Why? Because we need to go create an Azure AD application using v1.0 auth so that we can call the Microsoft Graph with an app-only token.

1. Log into https://manage.windowsazure.com/
2. Go to your Azure Active Directory instance associated with your Office 365 tenant.
3. You will need to create an Azure AD application. There are detailed steps on MSDN.  Here are the values you’ll want to use:

Now you need to create permission to another application. Detailed steps are on MSDN but you’ll need to click on the App Application button and select Microsoft Graph. Then in the drop down select the 3 options: Read directory data, Read and write calendars in all mailboxes, Read and write mail in all mailboxes.

After doing this you should have a client ID and client secret. You’ll need these later. You will also need the OAuth 2.0 Token Endpoint URL which you can get by clicking View Endpoints.

B. Create an Azure Function

1. Go to Azure Functions web site https://functions.azure.com
2. Click Get Started
3. Select the subscription you want to use:
4. Where it says ‘New Function app’ enter a name and select a region
   
5. In the Function app blade, click on ‘New Function’
6. Select the ‘Generic WebHook – Node’ template and give your function a name
   
7. Click on the Integrate tab
8. And click on the WebHook type and select ‘Not a WebHook’ and click save button
   
9. Click back on Develop tab
10. In the Code window select all and delete and then add the contents of the index.js file
11. Click Save button in top right of blade.

C. Create Translator API

1. Follow these steps on Bing Translator web site and register for Azure data market place
   
2. Create a new Bing Translator API application
3. Enter the Client ID as  ‘AzureFunctionTranslator’
4. Enter the Redirect URI as your Azure Functions WebHook
5. Make a note of the client secret for Step [D]
   

D. Add dependent files

There are some dependent files that your Azure Functions needs, it’ll make your script a lot cleaner and handles the nested async function goodness that node.js brings to the table.

This is also critical if you wish to use anything from NPM. By having the package.json file in there and running NPM in the Kudu console you’ll have access to all the libraries out there!

1. Go to Function App Settings in top right of Azure Function editor
   
2. Then click on Go to App Service Settings
   
3. Click the Tools icon Tools
   
4. Click on Kudu then click Go
   
5. Click on ‘Debug Console’ then select ‘CMD’ in top menu
   
6. This is the backend of your App Service, dabble at your own peril. Click on ‘site’ then ‘wwwroot’
7. Then click on the name of your Azure Function
8. This is the files associated with your Azure Function and the index.js is the file that shows up in the Azure Function editor.
9. Clone down the github repo https://github.com/jthake/AzureFunctions-MicrosoftGraph/
10. From File Explorer window, drag and drop into the directory table in Kudu window the auth.js, graph.js, translate.js and package.json files from the MicrosoftGraphNode folder.
11. In the console window below, type in ‘npm install’ and hit <ENTER>. This will read the package.json file and download all your required files. You will notice a new ‘node_modules’ folder appear.
    

E. Create App settings

For this Azure Function, we have a bunch of environment variables. We can store these as part of the App Service App Settings (remember each Azure Function has access to these).

1. Go to Function App Settings in top right of Azure Function editor
   
2. Then click on Go to App Service Settings
   
3. Then click Application settings in Settings menu
   
4. Scroll the Application Settings blade to the App Settings section and create the following and click Save icon at top of blade.
   

F. Connect Microsoft Graph WebHook

You’ll need to set up the notification the Microsoft Graph will give your Azure Function via a WebHook.

1. Go to https://graph.microsoft.io/en-us/graph-explorer sign in
2. Change the ‘GET’ to a ‘POST’
3. In the URL use ‘https://graph.microsoft.com/beta/subscriptions’
4. In the body text area enter this:
   {
   “changeType”: “created”,
   “notificationUrl”: “https://<appservicename>.azurewebsites.net/api/<functionname>?code=<uniquecode>“,
   “resource”: “me/mailFolders(‘Inbox’)/messages”,
   “expirationDateTime”:”2016-04-06T18:23:45.9356913Z”,
   “clientState”: “subscription-identifier”
   }
5. Get your Azure Function Url from the Azure Portal and replace the highlighted yellow text above with it:
   
6. You’ll need need to make the expirationDateTime some time within the next 3 days.
7. Click the URL text box and hit <ENTER>. You should see something like this as a response:
   

For more information on Microsoft Graph WebHooks check the microsoft.graph.io web site.

G. Moment of truth…

1. Go to https://outlook.office.com
2. Create a new email and send it to the same email account and make the subject something fun
3. You should see that when you send it it will appear in the inbox and almost immediately be translated
   
4. In your Azure Functions blade in the Logs section you should see something like this
   

Credits

1. The NodeJS app-only auth came from a code sample written by the Office Developer content writing team.
2. Again a big thanks to Chris and Fabio for their help!