Skip to content

Commit

Permalink
Merge pull request #51 from AzureAD/dev
Browse files Browse the repository at this point in the history 
Release 0.1.1
  • Loading branch information
@rohitnarula7176
rohitnarula7176 authored May 9, 2017
2 parents 0f206ca + e924132 commit 058dec8
Show file tree
Hide file tree
Showing 14 changed files with 459 additions and 217 deletions.
53 changes: 36 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@

Microsoft Authentication Library for JavaScript (MSAL.js)
Microsoft Authentication Library Preview for JavaScript (MSAL.js)
=========================================================

| [Getting Started](https://aka.ms/aaddevv2)| [Docs](https://aka.ms/aaddevv2) | [API Reference](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/docs/classes/_useragentapplication_.msal.useragentapplication.html) | [Support](README.md#community-help-and-support) | [Sample](./devApps/VanillaJSTestApp )
| [Getting Started](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi-v2 )| [Docs](https://aka.ms/aaddevv2) | [API Reference](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/docs/classes/_useragentapplication_.msal.useragentapplication.html) | [Support](README.md#community-help-and-support) | [Samples](./devApps/VanillaJSTestApp )
| --- | --- | --- | --- | --- |


The MSAL library for JavaScript enables your app to authorize enterprise users using Microsoft Azure Active Directory (AAD), Microsoft account users (MSA), users using social identity providers like Facebook, Google, LinkedIn etc. and get access to [Microsoft Cloud](https://cloud.microsoft.com) OR [Microsoft Graph](https://graph.microsoft.io).
The MSAL library preview for JavaScript enables your app to authorize enterprise users using Microsoft Azure Active Directory (AAD), Microsoft account users (MSA), users using social identity providers like Facebook, Google, LinkedIn etc. and get access to [Microsoft Cloud](https://cloud.microsoft.com) OR [Microsoft Graph](https://graph.microsoft.io).

The identity management services that the library interacts with are [Microsoft Azure Active Directory](https://azure.microsoft.com/en-us/services/active-directory/), [Microsoft Azure B2C](https://azure.microsoft.com/services/active-directory-b2c/) and [Microsoft Accounts](https://account.microsoft.com).

[![Build Status](https://travis-ci.org/AzureAD/microsoft-authentication-library-for-js.png?branch=dev)](https://travis-ci.org/AzureAD/microsoft-authentication-library-for-js)

MSAL for Javascript is in active development, but not yet ready. We encourage you to look at our work in progress and provide feedback!
**It should not be used in production environments.**
[![Build Status](https://travis-ci.org/AzureAD/microsoft-authentication-library-for-js.png?branch=dev)](https://travis-ci.org/AzureAD/microsoft-authentication-library-for-js)[![npm version](https://img.shields.io/npm/v/msal.svg?style=flat)](https://www.npmjs.com/package/msal)[![npm version](https://img.shields.io/npm/dm/msal.svg)](https://nodei.co/npm/msal/)

## Example
## Important Note about the MSAL Preview
This library is suitable for use in a production environment. We provide the same production level support for this library as we do our current production libraries. During the preview we may make changes to the API, internal cache format, and other mechanisms of this library, which you will be required to take along with bug fixes or feature improvements. This may impact your application. For instance, a change to the cache format may impact your users, such as requiring them to sign in again. An API change may require you to update your code. When we provide the General Availability release we will require you to update to the General Availability version within six months, as applications written using a preview version of library may no longer work.

```JavaScript

<script class="pre">
## Example
This example shows how to acquire a token to read user information from Microsoft Graph.
1. Register an application in Azure AD v2.0 (using the [application registration portal](https://identity.microsoft.com/)) to get your client_id.
2. Instantiate a UserAgentApplication and login the user:
```JavaScript
<script class="pre">
var userAgentApplication = new Msal.UserAgentApplication("your_client_id", null, function (errorDes, token, error, tokenType) {
// this callback is called after loginRedirect OR acquireTokenRedirect
// this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
})
userAgentApplication.loginPopup("user.read").then( function(token) {
userAgentApplication.loginPopup(["user.read"]).then( function(token) {
var user = userAgentApplication.getUser();
if (user) {
// signin successful
Expand All @@ -33,13 +36,19 @@ MSAL for Javascript is in active development, but not yet ready. We encourage yo
}, function (error) {
// handle error
});
</script>
```
3. Then, once the user is logged-in, get an access token

```JavaScript
<script>
// get an access token
userAgentApplication.acquireTokenSilent("user.read").then(function (token) {
userAgentApplication.acquireTokenSilent(["user.read"]).then(function (token) {
console.log("ATS promise resolved");
}, function (error) {
// interaction required
if(error.indexOf("interaction_required" != -1) {
userAgentApplication.acquireTokenPopup("mail.send").then(function (token) {
if(error.indexOf("interaction_required" != -1)) {
userAgentApplication.acquireTokenPopup(["user.read"]).then(function (token) {
// success
}, function (error) {
// error
Expand All @@ -49,17 +58,27 @@ MSAL for Javascript is in active development, but not yet ready. We encourage yo
</script>
```

4. use the token in an [HTTP bearer request](https://github.com/Azure-Samples/active-directory-javascript-singlepageapp-dotnet-webapi-v2/blob/master/TodoSPA/App/Scripts/Ctrls/todoListCtrl.js#L30), to call the Microsoft Graph or a Web API

## Installation

Via NPM:

npm install msal

Via CDN:
```JavaScript
<!-- Latest compiled and minified JavaScript -->
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.0/js/msal.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
```

Note that msal.js is built for ES5, therefore enabling support of Internet Explorer 11. If you want to target Internet Explorer, you'll need to add a reference to promises polyfill. You might want to read more in the [FAQ](../../wiki)
```JavaScript
<!-- IE support: add promises polyfill before msal.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
```

## Community Help and Support

- [FAQ](../../wiki) for access to our frequently asked questions
Expand Down
93 changes: 24 additions & 69 deletions devApps/VanillaJSTestApp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,16 @@
</style>
</head>
<body>
<!-- bluebird only needed if this page needs to run on Internet Explorer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
<script src="out/msal.js" class="pre"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>

<h1>Sending an email with msal.js and Microsoft Graph</h1>
<h1>Getting token for B2C</h1>
<div>
<div id="label">Sign-in with Microsoft</div>
<button id="auth" onclick="login();">Login</button>
</div>
<div id="sendEmail" class="hidden">
<input id="emailToSendTo" type="text" />
<button id="auth" onclick="sendEmail();">Send email</button>
</div>

<pre class="response"></pre>

Expand All @@ -43,80 +41,37 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
// Initialize Msal libraries by setting the Client Id, authority and a callback
var clientApplication= new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, function(errorDesc,token,error,tokenType){
// Called after loginRedirect or acquireTokenPopup
});
});

function login() {
clientApplication.loginPopup(applicationConfig.b2cScopes)
.then(function (idToken) {
return clientApplication.acquireTokenSilent(applicationConfig.b2cScopes);
clientApplication.loginPopup(applicationConfig.b2cScopes).then(function (idToken) {
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
updateUI();
}, function (error) {
clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
updateUI();
}, function (error) {
console.log(error);
});
})
.then(function (accessToken) {
// Change button to Sign Out
var authButton = document.getElementById('auth');
authButton.innerHTML = 'logout';
authButton.setAttribute('onclick', 'logout();');
var label = document.getElementById('label');
label.innerText = "Hello " + clientApplication.getUser().name + "! Please send an email with Microsoft Graph";
}, function (error) {
console.log(error);
});
}

// Show the email address part
var sendEmailSpan = document.getElementById('sendEmail');
sendEmailSpan.className = "visible";
var emailAddress = document.getElementById('emailToSendTo');
emailAddress.value = clientApplication.getUser().displayableId;
});
function updateUI() {
var authButton = document.getElementById('auth');
authButton.innerHTML = 'logout';
authButton.setAttribute('onclick', 'logout();');
var label = document.getElementById('label');
label.innerText = "Hello " + clientApplication.getUser().name;
}

function logout() {
// Removes all sessions, need to call AAD endpoint to do full logout
clientApplication.logout();
}

function sendEmail() {
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes)
.then(function (token, error) {
$.ajax({
type: "POST",
contentType: "application/json",
dataType: 'json',
beforeSend: function (request) {
request.setRequestHeader('Authorization', 'bearer ' + token);
},
url: applicationConfig.graphEndpoint,
data: JSON.stringify({ 'message': getEmail(), 'saveToSentItems': true }),
processData: false,
success: function (msg) {
log("Mail sucessfully sent.");
}
});
});
}
</script>

<script>
function log(s) {
document.body.querySelector('.response').appendChild(document.createTextNode("\n\n" + JSON.stringify(s, true, 2)));
}

function getEmail() {
var email = {
Subject: 'Welcome to Microsoft Graph development with Msal and the Microsoft Graph sample',
Body: {
ContentType: 'HTML',
Content: getEmailContent()
},
ToRecipients: [
{
EmailAddress: {
Address: clientApplication.getUser().displayableId
}
}
]
};
return email;
}
// Get the HTMl for the email to send.
function getEmailContent() {
return "<html><head> <meta http-equiv=\'Content-Type\' content=\'text/html; charset=us-ascii\'> <title></title> </head><body style=\'font-family:calibri\'> <p>Congratulations " + clientApplication.getUser().name + ",</p> <p>This is a message from the Microsoft Graph Connect sample. You are well on your way to incorporating Microsoft Graph endpoints in your apps. </p> <h3>What&#8217;s next?</h3><ul><li>Check out <a href='https://graph.microsoft.io' target='_blank'>graph.microsoft.io</a> to start building Microsoft Graph apps today with all the latest tools, templates, and guidance to get started quickly.</li><li>Use the <a href='https://graph.microsoft.io/graph-explorer' target='_blank'>Graph explorer</a> to explore the rest of the APIs and start your testing.</li><li>Browse other <a href='https://github.com/microsoftgraph/' target='_blank'>samples on GitHub</a> to see more of the APIs in action.</li></ul> <h3>Give us feedback</h3> <ul><li>If you have any trouble running this sample, please <a href='https://github.com/microsoftgraph/angular-connect-rest-sample/issues' target='_blank'>log an issue</a>.</li><li>For general questions about the Microsoft Graph API, post to <a href='https://stackoverflow.com/questions/tagged/microsoftgraph?sort=newest' target='blank'>Stack Overflow</a>. Make sure that your questions or comments are tagged with [microsoftgraph].</li></ul><p>Thanks and happy coding!<br>Your Microsoft Graph samples development team</p> <div style=\'text-align:center; font-family:calibri\'> <table style=\'width:100%; font-family:calibri\'> <tbody> <tr> <td><a href=\'https://github.com/microsoftgraph/angular-connect-rest-sample\'>See on GitHub</a> </td> <td><a href=\'https://officespdev.uservoice.com/\'>Suggest on UserVoice</a> </td> <td><a href=\'https://twitter.com/share?text=I%20just%20started%20developing%20%23Angular%20apps%20using%20the%20%23MicrosoftGraph%20Connect%20sample!%20&url=https://github.com/microsoftgraph/angular-connect-rest-sample\'>Share on Twitter</a> </td> </tr> </tbody> </table> </div> </body> </html>";
};
</script>
</body>
</html>
Loading

0 comments on commit 058dec8

Please sign in to comment.