O365Token GitHub project – Authenticating Office Add-Ins to Azure AD using only JavaScript (No C#)

In this article I will discuss the first iteration of the new GitHub project I created for the O365Token generation. The project is a generic code sample which can be added to your Azure AD websites and ultimately used to create a secure sample Add-In. We will look at how to take the sample code in the GitHub repository and deploy it to your environment.

Introduction

In the previous article I showed an alternate method for creating an authorization token from within the Outlook client. After receiving encouragement from Simon Jaeger I decided to continue and make this into something to hopefully collaborate on with others.

Github O365Token

The repository is hosted here – https://github.com/markyroden/o365Token – clone it to wherever you want (I use Webstorm IDE) and follow these steps:

  1. Using the instructions posted here, create your Azure AD site and make the redirect URL match the sample/index.html path.
    e.g. https://yoursite.azurewebsites.net/sample/index.html
  2. Modify the following token parameters in app.js to match your application
    • clientid
    • resource
  3. Run

 

How it works

In this version of the token generation I combined a number of aspects of the code and streamlined them to work as one file. There only 3 files (not including CSS) involved in this O365Token sample.

o1

  • Index.html
    • The place holder for the Add-In
  • Home.js
    • Determines if the code has been opened in an Add-In or as a popup token generator
  • App.js
    • If the page opens as an Add-In it causes the pop-up token generation window
    • If the page has been opened in the add-in it acts as the recipient of the token generated in the popup

Combining code

To simplify deployment and maintenance over time I decided it was easier to write the token generation code into the add-in itself. This also helps to reduce the number of changes necessary

Index.html

Index.html is really just the placeholder for the sample code – all that happens is that it ends up displaying the token once it is generated.

Home.js

We are using the same /index.html as the Add-In and the popup token generation window as well. The Home.js file determines if index.html has been opened as an Add-In and if so, calls the app.getToken code. If index.html has been opened in the browser the app.returnToken is called.

o2

App.js

App.js has three functions:

  • app.getToken
    • Called when index.html as been opened in the Add-in
  • app.returnToken
    • Called when index.html has been opened in the popup
  • app.tokenCallback
    • Called from the app.return once a Token has been generated. This is where your actual Add-In code would live in the future.

o3

For the Future

I have a feeling that this ought to be an Angular module. I can see a lot of Add-In code being written as an Angular app and as such it would make sense to include the app.requestToken and app.getToken as something which can be hooked easily into any other angular app.

 

 

 

 

Advertisements

Setting up an Azure HTML 5 web app with source control integration

In this article I will show to create an HTML 5 Web App in Azurefrom a template repository. We will then modify the repo and push out first files back into Azure.

Introduction

In previous articles 1, 2, 3, 4 I have been showing how to use napa development tools to create. In this article I will demonstrate how to create a basic Azure app which will host our files for us.

Azure Web App

From your Azure portal you can create a new web app

z1

In this case we will create xomino.azurewebsites.net. As we are doing nothing more than hosting files right now, we will create it as an empty HTML5 container.

Select to cfreate a web app from existing gallery

a1

Find HTML5 Empty Web App

b1

Moving to stage two give it a name and create

b2

Once the app is created you can then add your files to it a number of ways – my personal preference is to deploy from a git repo.

Web App Dashboard

When you click on the new link you will see the web app dashboard

e1 e2

From there we can set up Integration with Source Control

Hooking Azure up to the local repo

When you select connect to local repo the first time you will be prompted to create a username and password. This is so that you can FTP your files up to azure.

z8

Once that is created you will be presented with a screen to integrate your Git solution (manual or otherwise) with Azure.

b1

I use Webstorm for my development, so used the git tools in there to clone the repo down from Azure

There is nothing more than and HTML file and a favicon…

e3

I then:

  • messed a little with index.html
  • added my Files from the add-in
  • committed them all
  • pushed them back up to azure.

e8

Immediately the azure dashboard updates with a deployment message – once the deployment is complete (which is seconds fast) you will see an arrow top right. Clicking on it shows you the deployment process (3 seconds)

e4

The website is now available. Clicking back on the dashboard we now see activity. Over on the right we can click to open the Azure portal Dashboard for this web appe5

Opening up the website (http://xomino.azurewebsites.net/) we can see the index.html page I messed with

e6

 

And if we navigate to the Add in file folder it exists, but doesn’t do anything (yet)

e7

Conclusion

In this article we have seen how to:

  • Create our first Azure HTML Web App
  • Attach the app to source control locally
  • Add our Outlook Add-in files,
  • Commit and push back to Azure
  • Open the files directly in Azure

The hosting of the Outlook files is crucial for them to be made available to a wider Exchange audience in the future.

NOTE

There is no security associated with this site – it is wide open to Anonymous users. That is probably good in the long term for an Add-in