main

分支 (3)

管理

管理

main

derisen

gh-pages

ms-identity-b2c-javascript-spa
/
App
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Vanilla JavaScript SPA</title>
    <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">

    <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
    <script src="https://alcdn.msauth.net/browser/2.13.1/js/msal-browser.js" integrity="sha384-7hwr87O1w6buPsX92CwuRaz/wQzachgOEq+iLHv0ESavynv6rbYwKImSl7wUW3wV" crossorigin="anonymous"></script>

    <!-- To help ensure reliability, Microsoft provides a second CDN -->
    <script type="text/javascript">
      if(typeof Msal === 'undefined')document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/browser/2.13.1/js/msal-browser.js' type='text/javascript' crossorigin='anonymous' %3E%3C/script%3E"));
    </script>

    <!-- adding Bootstrap 4 for UI components  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="/">Azure AD B2C</a>
      <div class="btn-group ml-auto dropleft">
        <button type="button" id="editProfileButton" class="btn btn-secondary d-none" onclick="editProfile()">Edit Profile</button>
        <button type="button" id="signIn" class="btn btn-secondary" onclick="signIn()">Sign-in</button>
        <button type="button" id="signOut" class="btn btn-success d-none" onclick="signOut()">Sign-out</button>
      </div>
    </nav>
    <br>
    <h5 id="title-div" class="card-header text-center">Vanilla JavaScript single-page application built with MSAL.js</h5>
    <h5 id="welcome-div" class="card-header text-center d-none"></h5>
    <br>
    <!-- Content -->
    <div class="card">
      <h5 class="card-header text-center">Getting an access token with Azure AD B2C and calling a web API</h5>
      <div class="card-body text-center">
        <h5 id="label" class="card-title">Sign-in with Microsoft Azure AD B2C</h5>
        <pre id="response" class="card-text"></pre>
        <button type="button" id="callApiButton" class="btn btn-primary d-none" onclick="passTokenToApi()">Call API</button>
      </div>
    </div>

    <!-- importing bootstrap.js and supporting js libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <!-- importing app scripts (load order is important) -->
    <script type="text/javascript" src="./apiConfig.js"></script>
    <script type="text/javascript" src="./policies.js"></script>
    <script type="text/javascript" src="./authConfig.js"></script>
    <script type="text/javascript" src="./ui.js"></script>

    <!-- <script type="text/javascript" src="./authRedirect.js"></script>   -->
    <!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
    <script type="text/javascript" src="./authPopup.js"></script>
    <script type="text/javascript" src="./api.js"></script>
  </body>
</html>