Skip to content

Commit

Permalink
Merge pull request #44 from AzureAD/rohitn/sampleupdate
Browse files Browse the repository at this point in the history 
updated code for sample
  • Loading branch information
@rohitnarula7176
rohitnarula7176 authored May 6, 2017
2 parents e5e2669 + b24ea1a commit 9f7eaad
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 60 deletions.
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>
52 changes: 22 additions & 30 deletions devApps/VanillaJSTestApp/index_LoginRedirect.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,33 @@ <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",
clientID: '0813e1d1-ad72-46a9-8665-399bba48c201',
graphEndpoint: "https://graph.microsoft.com/v1.0/me/sendMail",
graphScopes: ["user.read", "mail.send"]
};
</script>

<script>
function authCallback(errorDesc, idToken) {
return userAgentApplication.acquireTokenSilent(applicationConfig.graphScopes)
.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 " + userAgentApplication.user.name + "! Please send an email with Microsoft Graph";
var userAgentApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback);
function authCallback(errorDesc, token, error, tokenType) {
//This function is called after loginRedirect. msal object is bound to the window object after the constructor is called.
if (token) {
this.msal.acquireTokenSilent(applicationConfig.graphScopes)
.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 " + userAgentApplication.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 = userAgentApplication.user.name;
}.bind(this));
// Show the email address part
var sendEmailSpan = document.getElementById('sendEmail');
sendEmailSpan.className = "visible";
var emailAddress = document.getElementById('emailToSendTo');
emailAddress.value = userAgentApplication.getUser().displayableId;
});
}
}

function loginRedirect() {
Expand Down Expand Up @@ -99,7 +101,7 @@ <h1>Sending an email with msal.js and Microsoft Graph</h1>
ToRecipients: [
{
EmailAddress: {
Address: userAgentApplication.user.name
Address: userAgentApplication.getUser().displayableId
}
}
]
Expand All @@ -109,19 +111,9 @@ <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 " + userAgentApplication.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 " + userAgentApplication.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>";
};

var config = applicationConfig;
var userAgentApplication = new Msal.UserAgentApplication(config.clientID, config.authority, authCallback.bind(this));
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);
}
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion devApps/VanillaJSTestApp/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ app.use("/bower_components", express.static(path.join(__dirname, 'bower_componen

// Set up our one route to the index.html file.
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
res.sendFile(path.join(__dirname + '/index_LoginRedirect.html'));
});

// Start the server.
Expand Down

0 comments on commit 9f7eaad

Please sign in to comment.