v2jsapp/index.html at msalJsImplementation · jmprieur/v2jsapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
    <script src="public/msal.js" class="pre"></script>
    <title>authentication with Msal.js app</title>
    <style>
        .hidden {
            visibility: hidden
        }

        .visible {
            visibility: visible
        }
    </style>
</head>
<body>
    <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>
    <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>

    <script class="pre">
        var applicationConfig = {
            clientID: '2730fe41-5ed4-446e-86cd-e58871ca001e', // '[ClientId of the Converged application as copied from https://identity.microsoft.com]',
            redirectUri: 'http://localhost:1530/',
            interactionMode: "popUp",
            graphEndpoint: "https://graph.microsoft.com/v1.0/me/sendMail",
            graphScopes: ["user.read", "mail.send"]

        };
    </script>

    <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, null, 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>
        function loginCallback(idToken) {
            // 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";

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

        clientApplication = createApplication(applicationConfig);

        function login() {
            clientApplication.loginPopup(applicationConfig.graphScopes).then(loginCallback);
        }

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

        function sendEmail() {
            clientApplication.acquireTokenSilent(applicationConfig.graphScopes)
                .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.");
                        },
                        statusCode: {
                            200: function () {
                                log("Mail sucessfully sent.");
                            },
                            202: function () {
                                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>