我试图创建一个简单的静态网站,使用awscognito对用户进行身份验证。这意味着我没有使用任何高级库,而是基于AWS示例编写代码
here
.
here
我想使用'code grant'流,作为上面示例中的状态,我只是取消对第221行的注释:
auth.useCodeGrantFlow();
然而,这并没有引起
onFailure
函数调用,但奇怪的是,我确实看到了包含
code=xxxxx
. 似乎还有更多的步骤我需要做,但所有的例子我发现证明不太有利的'令牌流'。
这是我的专长
index.html
基于上述示例:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Cognito Auth JS SDK Sample</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheets/styleSheetStart.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/amazon-cognito-auth.min.js"></script>
<!-- To enable the advanced security feature -->
<!-- <script src="https://amazon-cognito-assets.<region>.amazoncognito.com/amazon-cognito-advanced-security-data.min.js">
</script> -->
<!-- E.g. -->
<!-- <script src="https://amazon-cognito-assets.us-east-1.amazoncognito.com/amazon-cognito-advanced-security-data.min.js">
</script> -->
</head>
<body onload="onLoad()">
<ul>
<li><a href="https://aws.amazon.com/cognito/" target="_blank"
title="Go to AWS Cognito Console">Cognito Console</a></li>
<li><a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html"
target="_blank" title="See Cognito developer docs">Docs</a>
</li>
</ul>
<h1>
<a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html" target="_blank">
<img src="img/MobileServices_AmazonCognito.png" alt="Amazon Cognito" title="Amazon Cognito"
style="width:144px;height:144px;"></a><br>
Amazon Cognito Auth Demo
</h1>
<!--removed for brevity -->
<div><br></div>
<div>
<p id="statusNotAuth" title="Status">
Sign-In to Continue
</p>
<p id="statusAuth" title="Status">
You have Signed-In
</p>
</div>
<div class="tabsWell">
<div id="startButtons">
<div class="button">
<a class="nav-tabs" id="signInButton" href="javascript:void(0)" title="Sign in">Sign In</a>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="userdetails">
<p class="text-icon" title="Minimize" id="tabIcon" onclick="toggleTab('usertab');">_</p>
<br>
<h2 id="usertabtitle">Tokens</h2>
<div class="user-form" id="usertab">
<pre id="idtoken"> ... </pre>
<pre id="acctoken"> ... </pre>
<pre id="reftoken"> ... </pre>
</div>
</div>
</div>
</div>
<script>
// Operations when the web page is loaded.
function onLoad() {
var i, items, tabs;
items = document.getElementsByClassName("tab-pane");
for (i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
document.getElementById("statusNotAuth").style.display = 'block';
document.getElementById("statusAuth").style.display = 'none';
// Initiatlize CognitoAuth object
var auth = initCognitoSDK();
document.getElementById("signInButton").addEventListener("click",
function() {
userButton(auth);
});
var curUrl = window.location.href;
auth.parseCognitoWebResponse(curUrl);
}
// Operation when tab is closed.
function closeTab(tabName) {
document.getElementById(tabName).style.display = 'none';
}
// Operation when tab is opened.
function openTab(tabName) {
document.getElementById(tabName).style.display = 'block';
}
// Operations about toggle tab.
function toggleTab(tabName) {
if (document.getElementById("usertab").style.display == 'none') {
document.getElementById("usertab").style.display = 'block';
document.getElementById("tabIcon").innerHTML = '_';
} else {
document.getElementById("usertab").style.display = 'none';
document.getElementById("tabIcon").innerHTML = '+';
}
}
// Operations when showing message.
function showMessage(msgTitle, msgText, msgDetail) {
var msgTab = document.getElementById('message');
document.getElementById('messageTitle').innerHTML = msgTitle;
document.getElementById('messageText').innerHTML = msgText;
document.getElementById('messageDetail').innerHTML = msgDetail;
msgTab.style.display = "block";
}
// Perform user operations.
function userButton(auth) {
var state = document.getElementById('signInButton').innerHTML;
if (state === "Sign Out") {
document.getElementById("signInButton").innerHTML = "Sign In";
auth.signOut();
showSignedOut();
} else {
auth.getSession();
}
}
// Operations when signed in.
function showSignedIn(session) {
document.getElementById("statusNotAuth").style.display = 'none';
document.getElementById("statusAuth").style.display = 'block';
document.getElementById("signInButton").innerHTML = "Sign Out";
/* Removed for brevity */
openTab("userdetails");
}
// Operations when signed out.
function showSignedOut() {
document.getElementById("statusNotAuth").style.display = 'block';
document.getElementById("statusAuth").style.display = 'none';
document.getElementById('idtoken').innerHTML = " ... ";
document.getElementById('acctoken').innerHTML = " ... ";
document.getElementById('reftoken').innerHTML = " ... ";
closeTab("userdetails");
}
// Initialize a cognito auth object.
function initCognitoSDK() {
var authData = {
ClientId : '<Removed>', // Your client id here
AppWebDomain : '<Removed>', // Exclude the "https://" part.
TokenScopesArray : [<removed>], // like ['openid','email','phone']...
RedirectUriSignIn : '<domain removed>/index.html',
RedirectUriSignOut : '<domain removed>/index.html'
};
var auth = new AmazonCognitoIdentity.CognitoAuth(authData);
// You can also set state parameter - do I need to set this?
auth.setState('ABCDXYZ');
auth.userhandler = {
onSuccess: function(result) {
alert("Sign in success");
showSignedIn(result);
},
onFailure: function(err) {
alert("Error!" + err);
}
};
// The default response_type is "token", uncomment the next line will make it be "code".
auth.useCodeGrantFlow();
return auth;
}
</script>
</body>
</html>
在dev工具中,我确实看到了对
https://<domain-name-removed>/oauth2/token
"error":"invalid_client"
.
是否有一些额外的配置,我需要做,或在AWS文件中建议的授权代码授予流,我需要实施额外的BE代码?我觉得示例代码缺少对代码授予流的完整描述。
根据
