microsoftgraph / angular-connect-rest-sample

[ARCHIVED] Use Microsoft Graph to access a user’s Microsoft account data from within an AngularJS web application. This sample uses REST calls directly to the Microsoft Graph endpoint and authenticates users with Microsoft Accounts or work or school Office 365 accounts.

[ARCHIVED] Microsoft Graph Connect Sample for AngularJS (REST)

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.

Table of contents

• Introduction
• Prerequisites
• Register the application
• Build and run the sample
• 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 to send an email. In addition, the sample uses the Office Fabric UI for styling and formatting the user experience. We also have an Angular connect sample that uses that Microsoft Graph JavaScript SDK.

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.

• Either a Microsoft account or Office 365 for business account

Register the application

1. Sign in to the Azure Portal to register an application.

2. 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.

3. In the left-hand navigation pane, select the Azure Active Directory service, and then select App registrations (Preview) > New registration.

4. When the Register an application page appears, enter a name for your application.

5. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com).

6. Select the Web platform under the Redirect URI section and set the value to http://localhost:8080/.

7. When finished, select Register. On the app Overview page, note down the Application ID value.

8. This quickstart requires the Implicit grant flow to be enabled. In the left-hand navigation pane of the registered application, select Authentication.

9. 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.

10. Select Save.

Build and run the sample

1. Download or clone the Microsoft Graph Connect Sample for AngularJS.

2. Using your favorite IDE, open config.js in public/scripts.

3. Replace the clientID placeholder value with the application ID of your registered Azure application.

4. In a command prompt, run the following command in the root directory. This installs project dependencies.

npm install

5. Run npm start to start the development server.

6. Navigate to http://localhost:8080 in your web browser.

7. Choose the Connect button.

8. Sign in with your personal or work or school account and grant the requested permissions.

9. 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 [email protected] 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].

Additional resources

• Other Microsoft Graph Connect samples
• Microsoft Graph

Copyright

Copyright (c) 2016 Microsoft. All rights reserved.

angular-connect-rest-sample's Issues

getting a 401 Unauthorized on https://graph.microsoft.com/v1.0/me

angular.js:10514 GET https://graph.microsoft.com/v1.0/me 401 (Unauthorized)

Passing token to own API

Hi,

Thanks for the sample, it's a really helpful piece of code.

As far as I understand, the ADAL angular library intercepts all requests to graph.microsoft.com and adds the appropriate tokens to those requests. Is there any way to get the actual tokens that the ADAL library fetches? I'd like to have my API perform the requests on behalf of the user (something like: client -> my api -> graph.microsoft.com) so that I can filter / perform some operations on the data coming back from the graph api, and then return that 'updated' data to the client.

I guess I could just provide all the required fields to my api, and have my api request tokens and then use those for graph.microsoft.com, but just wondering if there's a better way to do it.

Thanks!

p.s. This is not really an issue, more of a stackoverflow question, but I thought my chances of getting an answer were a bit higher here :)

401 Unauthorized

Downloaded the sample and changed the client_id with respect to my app and enabled permissions for the app in azure portal. It throws 401 Unauthorized error when trying to send mail.
Note : Enabled permissions for send.mail and user.read as mentioned

Update README to reflect code changes for converged auth (preview)

Bower would not install graph-sdk until i changed the address

When running bower install off a cloned version, on Mac incase it makes a difference, bower hangs up on installing graph-sdk. Exact error included below
Failed to execute "git ls-remote --tags --heads [email protected]:microsoftgraph/msgraph-sdk-javascript.git", exit code of #128 Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

Additional error details:
Permission denied (publickey).
fatal: Could not read from remote repository.

Once i changed the address to
https://github.com/microsoftgraph/msgraph-sdk-javascrip.git
it worked properly.

loginRedirect way to login in Angular service

@jamescro If we tried to call loginRedirect method in angular-connect-rest-sample/public/scripts/graphHelper.js, it looks like the https://github.com/microsoftgraph/angular-connect-rest-sample/blob/master/public/scripts/graphHelper.js#L17 callback won't be called anymore. Do you have any suggestions? Thanks

sendMail results with BadRequest

Each sendMail call results with following error: message: "Unsupported segment type."
Azure AD is configured properly.

MICROSOFT GRAPH API...403 FORBIDDEN....https://graph.microsoft.com/v1.0/me

HI... i am getting the error...403 Forbidden error for some of the mail id's when i try https://graph.microsoft.com/v1.0/me api....but for some of the mail id's i am able to get the basic profile details...any suggestions appreciated...

Issue with Permissions

The application works but there is a catch. Please update the documentation based on what I found.

The problem is described in this article: http://stackoverflow.com/questions/42013466/microsoftgraph-oauth2-scope
The SendMail app requires Mail.SendMail but the default setup for a Graph application uses User.Read only.

It was a pretty lame authorization approach in this over-simplified application as it would prompt for the initial permission on the first sign-in of the application so even if I changed the permission after the first sign-in, the new permission won't be used. So the magic touch is that I recreated with a new application Id and then set up the new permission properly before the first sign-in.

The other way is to update the application to prompt for the permission granting process each time.

The documentation should provide that hint or the Quick Start process be changed based on the nature of the sample application actions.

Update sample to support converged auth (preview)