Amplify의 Javascript SDK로 Cognito 인증에서 데이터로 가져오기
31179 단어 AWSJavaScriptAmplifyCognitotech
개시하다
금번에서 코그니토, API Gateway, 람바다, 다이나모DB 등이 움직였고금번 앰플리파이로 호스팅까지 만들었는데 이번에는 앰플리파이 자바스크립트 SDK로 프런트를 그려봤어요.
Cognito認証→JWTトークン取る→해봐トークンもってAPIでデータを取得캡처
화면은 간단하게 이런 느낌을 만들어 보았다.왼쪽은 로그인 형식이고 오른쪽은 백엔드 응답입니다.
코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="main.bundle.js"></script>
<script>
function getName() { return document.getElementById('Username').value }
function getPass() { return document.getElementById('Password').value }
function putRes(res) {
document.getElementById('Result').innerHTML = JSON.stringify(res, null, 2);
}
</script>
<style>
pre {
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
background: dimgray;
color: white;
border-radius: 5px;
padding: 10px;
margin-top: 0px;
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="one-third column">
<form>
<label for="Username">Username</label>
<input class="u-full-width" type="text" placeholder="Username" id="Username">
<label for="Username">Password</label>
<input class="u-full-width" type="password" placeholder="Password" id="Password">
<div class="row">
<input class="one-half column button-primary" type="button" value="login" onclick="signIn(getName(), getPass()).then(r => putRes(r)).catch(e => putRes(e))">
<input class="one-half column" type="button" value="logout" onclick="console.log(signOut())">
</div>
<div class="row">
<input class="u-full-width" type="button" value="getData" onclick="getData().then(r => putRes(r)).catch(e => putRes(e))">
</div>
</form>
</div>
<div class="two-thirds column">
<label>Output</label>
<pre id="Result"></pre>
</div>
</div>
</div>
</div>
</body>
</html>
onclick()에서 Promise에서 수치를 꺼냈기 때문에 길어진 건 좀 아닌 것 같은데 어떻게 하면 보통일까요?app.js
import Amplify, { API } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
const signIn = async (username, password) => {
try {
return await Amplify.Auth.signIn(username, password)
} catch (error) {
return error
}
}
const signOut = () => {
try {
return Amplify.Auth.signOut();
} catch (error) {
return error
}
}
Amplify.configure({
API: {
endpoints: [
{
name: "your-api-name",
endpoint: "https://your-api-id.execute-api.us-east-2.amazonaws.com/dev_1",
}
]
}
});
const getData = async () => {
const apiName = 'your-api-name';
const path = '/projects';
const myInit = {
headers: {
Authorization: `Bearer ${(await Amplify.Auth.currentSession()).getIdToken().getJwtToken()}`,
},
};
return await API.get(apiName, path, myInit);
}
window.getData = getData;
window.signIn = signIn;
window.signOut = signOut;
app.js 공식 샘플에 파라미터만 넣었을 뿐이지만 어쨌든 이렇게 하면 된다.상당히 알기 쉬운 느낌입니다.사용법을 대강 알게 되었다.
인증 정보 가져오기
보시다시피 위 코드에는 Cognito 주위의 매개 변수가 없습니다.그렇다면 Amplify SDK는 어떻게 코그니토의 수영장 정보를 얻었을까.
amplify import auth
Cognito User Pool only.잊지 마세요amplify push이로써 프로젝트 폴더src/aws-exports.js에 인증 주위의 정보를 기록해야 한다.잡담
이번에는 암플리파이 SDK 자체보다는 자바스크립트 인근의 지식 부족으로 인한 경우가 많았다.
webpack에서 bunlde 함수가 사유라면 "에서 호출할 수 없습니다.아니면Promise...아니면async/await...이런 녀석.배우다시리즈
Reference
이 문제에 관하여(Amplify의 Javascript SDK로 Cognito 인증에서 데이터로 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/masaino/articles/9c4586fe1fc179텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
