Office Add-in Office 365 Client Authentication for AngularJS

A goal of many Microsoft Office add-ins is to improve user productivity. You can get closer to achieving this goal with the help of third-party services. This sample is a Word add-in demonstrating client-side OAuth using AngularJS and ADAL for Angular.

In contrast to other samples, this add-in does not require any server-side techniques or web sockets. In Office 2016 we now have the ability to use the dialog framework from the Office UI Namespace to pop up a window and communicate back and forth between the pop up window and an Office add-in task pane window.

##Run the add-in

Setup your environment

Clone the GitHub repository
Ensure you have the the gulp and bower tools installed. Open a command prompt and run npm install -g bower gulp.
Open a command prompt to the sample directory and run npm install.
Have a location to publish you add-in manifest. I prefer using a network shared folder technique.

Register your app in Azure

Register a web application in Azure Management portal with the following configuration:

Parameter	Value
Name	add-in-word-client-oauthweb
Type	Web application and/or web API
Sign-on URL	https://localhost:8443/Auth.html
App ID URI	https://[your azure ad tenant name].onmicrosoft.com/Add-In-Word-Client-OAuthWeb
Reply URL	https://localhost:8443/index.html, https://localhost:8443/Auth.html

Add the following permissions:

Application	Delegated Permissions
Microsoft Graph	Read User Calendars
Windows Azure Active Directory	Sign in and read user profile

Save the application, take note of the client ID

Set up OAuth implicit flow

For this application written in AngularJS, Azure AD supports the OAuth 2.0 Implicit Grant flow. The implicit flow is described in the OAuth 2.0 Specification. Its primary benefit is that it allows the app to get tokens from Azure AD without performing a backend server credential exchange. This allows the app to sign in the user, maintain session, and get tokens to other web APIs all within the client JavaScript code. More details can be found on the Azure AD site.

Return to your application Configure page in Azure AD.
Click Manage Manifest, then Download Manifest
Save the manifest to your computer.
Open the manifest in a text editor.
Set the oauth2AllowImplicitFlow value to true.
Save the manifest file changes.
Return to Azure management portal, click Manage Manifest, then Upload Manifest. Select your manifest and upload.

Update the client id.

* Open scripts/azureADConfig.js
* Update `clientId: '[Enter your clientId here]'` with the value from your Azure AD application

Run the add-in

At the command prompt run gulp serve-static
Open Word, click My Add-ins, then select SHARED FOLDER.
Select Client-Side Auth Sample, then click OK
The task pane will open and you will be able to authenticate with Office 365 credentials in the pop up window.

Questions and comments

We'd love to get your feedback about this sample. You can send your questions and suggestions to us in the Issues section of this repository.

Questions about Office 365 development in general should be posted to Stack Overflow. Make sure that your questions or comments are tagged with [office-addins].

Additional resources

Copyright

Copyright (c) 2016 Microsoft Corporation. All rights reserved.

License

worldox/Word-Add-in-AngularJS-Client-OAuth

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages