topic	products	languages	extensions
sample	Word Office 365	JavaScript	contentType technologies createdDate samples Add-ins OAuth 2.0 5/20/2016 2:24:52 PM

[ARCHIVED] Office Add-in Office 365 Client Authentication for AngularJS

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 goal of Office Add-ins is to improve user productivity. You can achieve 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.

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.

Set up your environment

1. Clone the GitHub repository.
2. Ensure that you have the the gulp and bower tools installed. Open a command prompt and run npm install -g bower gulp.
3. Open a command prompt to the sample directory and run npm install.
4. Have a location to publish you add-in manifest. See Publish your Office Add-in.
5. An Office 365 developer account. If you don't have one, join the Office 365 Developer Program and get a free 1 year subscription to Office 365.

Register your app in Microsoft Azure

Register a web application in Azure Management portal with the following configuration: Use this guide to register an application.

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
Microsoft Azure Active Directory	Sign in and read user profile

Save the application and make 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.

1. Return to your application Configure page in Azure AD.
2. Choose Manage Manifest > Download Manifest.
3. Save the manifest to your computer.
4. Open the manifest in a text editor.
5. Set the oauth2AllowImplicitFlow value to true.
6. Save the manifest file changes.
7. Return to Azure management portal, choose Manage Manifest > Upload Manifest. Select your manifest and upload.

Update the client id

• Open scripts/azureADConfig.js.
• Update clientId: '[Insert client ID here]' with the value from your Azure AD application.

Run the add-in

1. At the command prompt, run gulp serve-static.
2. Open Word, and start a new document.
3. On the Insert ribbon, choose My Add-ins, then select SHARED FOLDER.
4. Select Client-Side Auth Sample, then choose OK. A new group called Client Auth will appear on the Home ribbon, with a button named Open.
5. Click the Open button. The task pane will open.
6. Press the Login to Office 365 button and you will be able to authenticate with Office 365 credentials in the pop up window. Your calendar events will appear in the task pane.

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

• Office Add-in samples
• Office Add-ins platform overview
• Get started with Office Add-ins

Copyright

Copyright (c) 2016 Microsoft Corporation. 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 opencode@microsoft.com with any additional questions or comments.