index.html

<doctype html>
<html>
    <head><title>WebClient1 - Sample Application</title>
        <script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.3.3/js/msal.min.js"></script>
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
        <script type="text/javascript" src="main.js"></script>

        <script type="text/javascript">
            function loadData() {
                if (accessToken) { 
                    console.log("Loading data...");
                    $.ajax({
                        url: "https://localhost:44355/weatherforecast",
                        headers: { 'Authorization': 'Bearer ' + accessToken },
                        success: function (result) {
                            //console.log(result);
                            var textresult = "Weather forecast:<br/>";
                            var date;
                            result.forEach(function (item, index) {
                                date = new Date(item.date);
                                textresult += date.toLocaleString() + ': <b>' + item.summary + '</b><br/>';
                            });
                            $("#datadisplay").html(textresult);
                        }
                    });
                }
                else
                    alert("No access token yet present. Please try again later!");
            }
        </script>
    </head>
    <body>
        <h1>WebClient1 - Sample Application</h1>
        <p>User: <span id="username">not logged in</span></p>
        <button onclick="loadData();">Load Data</button>
        <hr><br>
        <div id="datadisplay"></div>
    </body>
</html>