Skip to content

Commit

Permalink
Merge pull request #45 from AzureAD/dev
Browse files Browse the repository at this point in the history 
Updating sample code
  • Loading branch information
@rohitnarula7176
rohitnarula7176 authored May 6, 2017
2 parents 2582232 + 9f7eaad commit 0f206ca
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 73 deletions.
26 changes: 13 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

Microsoft Authentication Library
=====================================
Microsoft Authentication Library 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/dev/doc/index.html) | [Support](README.md#community-help-and-support) | [Sample](./devApps/VanillaJSTestApp )
| [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 )
| --- | --- | --- | --- | --- |


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 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 Directoryy](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).
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)

Expand All @@ -21,28 +21,28 @@ MSAL for Javascript is in active development, but not yet ready. We encourage yo

<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
})
userAgentApplication.loginPopup("user.read").then( function(token) {
var user = userAgentApplication.getUser();
if (user) {
//signin successful
// signin successful
} else {
//signin failure
// signin failure
}
}, function (error) {
//handle error
// handle error
});
//get an access token
// get an access token
userAgentApplication.acquireTokenSilent("user.read").then(function (token) {
console.log("ATS promise resolved");
}, function (error) {
//interaction required
// interaction required
if(error.indexOf("interaction_required" != -1) {
userAgentApplication.acquireTokenPopup("mail.send").then(function (token) {
//success
// success
}, function (error) {
//error
// error
});
}
});
Expand Down
38 changes: 9 additions & 29 deletions devApps/VanillaJSTestApp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
<script class="pre">
var applicationConfig = {
clientID: 'cd1fdffa-0c1e-4490-a070-812701100306',
redirectUri: 'http://localhost:1530/',
interactionMode: "popUp",
graphEndpoint: "https://graph.microsoft.com/v1.0/me/sendMail",
graphScopes: ["user.read", "mail.send"],
b2cScopes: ["https://B2CSriniDev1.onmicrosoft.com/cd1fdffa-0c1e-4490-a070-812701100306/running"],
Expand All @@ -42,28 +40,10 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
<script>
// Msal helpers
// ------------
// Initialize Msal libraries by setting the Client Id and a callback
// @config - variable containing basic configuration, such as Client Id, interaction mode, and Redirect Url
// @authCallback - callback function to be called after sign-in completes.
function createApplication(config, authCallback) {
var userAgentApplication = new Msal.UserAgentApplication(config.clientID, config.authority, authCallback);
userAgentApplication.redirectUri = config.redirectUri;
userAgentApplication.interactionMode = config.interactionMode;

// On page load, check if the token is present in the location hash and handle it
var isCallback = userAgentApplication.isCallback(window.location.hash);
if (isCallback) {
userAgentApplication.handleAuthenticationResponse(window.location.hash);
}
return userAgentApplication;
}

var clientApplication;
</script>

<script>
clientApplication = createApplication(applicationConfig);

// 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) {
Expand All @@ -75,13 +55,13 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
authButton.innerHTML = 'logout';
authButton.setAttribute('onclick', 'logout();');
var label = document.getElementById('label');
label.innerText = "Hello " + clientApplication.user.name + "! Please send an email with Microsoft Graph";
label.innerText = "Hello " + clientApplication.getUser().name + "! Please send an email with Microsoft Graph";

// Show the email address part
var sendEmailSpan = document.getElementById('sendEmail');
sendEmailSpan.className = "visible";
var emailAddress = document.getElementById('emailToSendTo');
emailAddress.value = clientApplication.user.username;
emailAddress.value = clientApplication.getUser().displayableId;
});
}

Expand Down Expand Up @@ -126,7 +106,7 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
ToRecipients: [
{
EmailAddress: {
Address: clientApplication.user.username
Address: clientApplication.getUser().displayableId
}
}
]
Expand All @@ -135,8 +115,8 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
}
// 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.user.profile.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>";
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>
</html>
Loading

0 comments on commit 0f206ca

Please sign in to comment.