[ARCHIVED] Microsoft Graph JavaScript SDK Connect Sample for AngularJS

IMPORTANT

This project is being archived and replaced with the Build Angular single-page apps with Microsoft Graph. As part of the archival process, we're closing all open issues and pull requests.

You can continue to use this sample "as-is", but it won't be maintained moving forward. We apologize for any inconvenience.

Introduction
Prerequisites
Register the application
Build and run the sample
Code of note
Questions and comments
Contributing
Additional resources

Introduction

This sample shows how to connect an AngularJS app to a Microsoft work or school (Azure Active Directory) or personal (Microsoft) account using the Microsoft Graph API with the Microsoft Graph JavaScript SDK to send an email. In addition, the sample uses the Office Fabric UI for styling and formatting the user experience.

This sample uses the Microsoft Authentication Library Preview for JavaScript (msal.js) to get an access token.

Prerequisites

To use the Microsoft Graph Connect sample for AngularJS, you need the following:

Node.js. Node is required to run the sample on a development server and to install dependencies.
Bower. Bower is required to install front-end dependencies.
Either a Microsoft account or Office 365 for business account

Register the application

Sign in to the Azure Portal to register an application.
If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the desired Azure AD tenant.
In the left-hand navigation pane, select the Azure Active Directory service, and then select App registrations (Preview) > New registration.
When the Register an application page appears, enter a name for your application.
Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com).
Select the Web platform under the Redirect URI section and set the value to http://localhost:8080/.
When finished, select Register. On the app Overview page, note down the Application ID value.
This quickstart requires the Implicit grant flow to be enabled. In the left-hand navigation pane of the registered application, select Authentication.
In Advanced settings, under Implicit grant, enable both ID tokens and Access tokens checkboxes. ID tokens and Access tokens are required since this app needs to sign in users and call an API.
Select Save.

Build and run the sample

Download or clone the Microsoft Graph Connect Sample for AngularJS.
Using your favorite IDE, open config.js in public/scripts.
Replace the clientID placeholder value with the application ID of your registered Azure application.
In a command prompt, run the following command in the root directory. This installs the Microsoft Graph JavaScript SDK and other dependencies.

npm install
bower install

Run npm start to start the development server.
Navigate to http://localhost:8080 in your web browser.
Choose the Connect button.
Sign in with your personal or work or school account and grant the requested permissions. If a textbox with your signed-in email address does not replace the Connect button, please allow pop-ups for the url http://localhost:8080 in the browser.
Optionally edit the recipient's email address, and then choose the Send mail button. When the mail is sent, a Success message is displayed below the button.

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

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.

Questions and comments

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

Questions about Microsoft Graph development in general should be posted to Stack Overflow. Make sure that your questions or comments are tagged with [microsoftgraph].

microsoftgraph/angular-connect-sample