0
我知道這聽起來像一個荒謬的簡單問題，但除了基本的函數調用之外，還有很多其他的東西。我正在使用Auth0 python示例在webapp上實現身份驗證，他們有一個完整的示例available here。如何將JavaScript從多文件示例遷移到簡單的單一頁面？
我完全理解python Auth0的東西，並且可以從會話中獲得所有我需要的細節，但我根本無法解決如何使用簡單的「登錄」和「註銷」將示例代碼移動到我的應用程序中「按鈕！從示例應用程序的HTML看起來像這樣：
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome from BootstrapCDN -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
<script src="/public/app.js"> </script>
<link href="/public/app.css" rel="stylesheet">
</head>
<body class="home">
<div class="container">
<div class="login-page clearfix">
<div class="login-box auth0-box before">
<img src="https://i.cloudup.com/StzWWrY34s.png" />
<h3>Auth0 Example</h3>
<p>Zero friction identity infrastructure, built for developers</p>
<a class="btn btn-primary btn-lg btn-login btn-block">SignIn</a>
</div>
</div>
</div>
</body>
</html>
的JavaScript運行包含在所讀取在文檔加載一個單獨的文件：
$(document).ready(function() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
$('.btn-login').click(function(e) {
e.preventDefault();
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
});
$('.btn-logout').click(function(e) {
e.preventDefault();
window.location.href = '/logout';
})
});
我不希望使用標準HTML提供的樣本，我想要的只是一個簡單的「登錄」按鈕，登錄用戶，但對於我的生活，我簡單不明白如何做到這一點。我希望這個儘可能簡單，所有的JavaScript嵌入在頁面中。我已經嘗試了以下內容，但是由於變量「e」未定義，所以失敗了，我不明白它來自哪個原始示例！
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<p><button onclick="loginfunc()">Click me</button></p>
<script>
$(document).ready(function() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
},
</script>
<script>
function loginfunc(e) {
e.preventDefault();
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome from BootstrapCDN -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
<script src="/public/app.js"> </script>
<link href="/public/app.css" rel="stylesheet">
</head>
<body class="home">
<div class="container">
<div class="login-page clearfix">
<div class="login-box auth0-box before">
<img src="https://i.cloudup.com/StzWWrY34s.png" />
<h3>Auth0 Example</h3>
<p>Zero friction identity infrastructure, built for developers</p>
<a class="btn btn-primary btn-lg btn-login btn-block">SignIn</a>
</div>
</div>
</div>
</body>
</html>
我猜線6和原始的HTML 7是所有的「神奇」正在發生的事情，我只是不知道如何「讀」是怎麼回事那裏。
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
我明白這是一個可怕的，可怕的問題，但我一直在尋找這幾個小時，我只是準備放棄，我不能看它了。對於我的生活，我不明白爲什麼Auth0不僅僅是一個超級簡單的，所有人都可以理解的頁面示例，並非所有這些花哨的bootstrap/css/html混亂！
如果有人能幫忙，我會永遠感激！
謝謝。