AWS Cognito를 사용하여 화면 가입을 시도했습니다.
19484 단어 자바스크립트Bootstrap3S3cognitoAWS
전제
AWS에서 시스템 구축을 목표로 하는 첫 단계입니다.
이번 게재 범위는 Cogninito상에 존재하고 있는 사용자 풀에의 사용자 등록을 화면상에서 실시하는 것.
그 때문에 필요한 라이브러리 취득, 화면 작성까지를 게재합니다.
AWS에는 인증 및 허가를 제공하는 Cognito라는 서비스가 있으며 Cognito를 사용하여
앱에 가입하고 싶습니다.
↓Cognito의 사용자 설정 방법은 이쪽↓
(공사 중)
기본적으로 AWS의 튜토리얼을 참고로 하고 있습니다만, 별도 같은 것을 하고 있는 분들도 필요했으므로, 꽤 참고로 하고 있습니다.
(선구자 분들께 감사드립니다!)
이 기사가 낡아져도 신규 튜토리얼과의 차이를 확인하면서 같은 것이 재현할 수 있는 것을 목표로 합니다.
Cognito 자바 스크립트 SDK 자습서
htps : // / cs. 아 ws. 아마존. 코 m / 그럼 _ jp / 코 g와 / / st / ゔ ぇ ぺ ぺ r gue / ushin g-Amason-ko g- ouse r-idenchi ty-po ls - ゔ ぁsc pt-에-mpぇs. HTML
별도 참고 페이지
htps : //에서 v.ぁsss d. jp / c ぉ d / 아 ws / 쎄구 p와 - 코 g에 - 우세 r 포오 ls - 우신 g - 그럼 sc pt /
https://hawksnowlog.blogspot.com/2016/09/try-signup-with-aws-cognito.html#%E5%90%84%E7%A8%AE%E5%BF%85%E8%A6%81 %E3%81%AA%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%83%80%E3 %82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89
사용한 라이브러리 목록
Cognito SDK
htps : // 등 w. Giteubuse r 콘텐트 t. 코 m / 아 ws / 아마 젠 - 코 g에 - 이젠 치 ty - js / 뭐 r / st / 아 ws - 코 g에 - sdk. 모두. js
htps : // 등 w. Giteubuse r 콘텐트 t. 코 m / 아 ws / 아마 존 - 코 g에 - 이젠 치 ty js / 뭐 r / ぢ st / 아마 존 - 코 g에 - 덴 치 ty. 모두. js
ht tp //w wcs-s t-den ts. s 단후 rd. 에즈 / ~ tjw / jsb / jsb. js
ht tp //w wcs-s t-den ts. s 단후 rd. 에즈 / ~ tjw / jsb / jsb / 2. js
htps : // 등 w. Giteubuse r 콘텐트 t. 이 m / 비토 ぃせ ft ft ft / sjcl / 마s r / sjcl. js
htp // 모멘 tjs. 코 m/두 w응아 ds/모멘 t. js
AWS SDK
htps : // 기주 b. 이 m/아ws/아ws-sdkjs/레아아세 s/도 w응아 d/v2.6. 지 p
JQuery
htps : // 여기. j 쿠에 ry. 이 m/j 쿠에 ry-3.1.1. 모두. js
위의 라이브러리를 S3 버킷에 동일한 이름으로 저장합니다.
왜 S3에 라이브러리를 저장하고 사용했는지 (http에서 직접 호출하지 않았습니까?)
""""""""""""""""""""""""""""""""""""""""""""""""""""
S3의 기능인 웹 정적 호스팅을 시도하고 싶었다.
+
모두 http로 붙여 넣으면 참조 권한이 없어서 오류가 있습니다.
어떤 소스가 원인인지 찾아내는 것이 귀찮았기 때문.
""""""""""""""""""""""""""""""""""""""""""""""""""""
↓S3의 설정 방법은 이쪽↓
(공사 중)
모든 소스 코드
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Cognitoサインアップ</title>
<!--上記で記載していたライブラリを読み込む（S3にアップした名前をsrc=""に入れる）//-->
<!-- aws sdk //-->
<script src="aws-sdk.min.js"></script>
<!-- aws cognito sdk//-->
<script src="jsbn.js"></script>
<script src="jsbn2.js"></script>
<script src="sjcl.js"></script>
<script src="moment.js"></script>
<script src="aws-cognito-sdk.min.js"></script>
<script src="amazon-cognito-identity.min.js"></script>
<!-- jquery //-->
<script src="jquery-3.1.1.min.js"></script>
<!--上記で記載していたライブラリを読み込む（S3にアップした名前をsrc=""に入れた） //-->
<!-- bootstrap3 //--><!-- bootstrap3（以下3行）は画面の装飾なので使わなくてもサインアップ出来ます //-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">サインアップ</h2>
<div id="message" class="alert" style="display:none;"></div>
<label for="inputUsername" class="sr-only">ユーザー名</label>
<input type="text" id="inputUsername" class="form-control" placeholder="User name" required autofocus></input>
<label for="inputPassword" class="sr-only">パスワード</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required></input>
<br/>
<input type="button" class="btn btn-lg btn-primary btn-bloc" id="user_add_btn" value="ユーザーを作成する"></input>
</form>
</div>
<script>
<!--
// 1 Amazon Cognito 認証情報プロバイダーを初期化します
AWS.config.region = 'ap-northeast-1'; // リージョン(デフォルトだとこのまま)
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'ap-northeast-1:aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee', // ID プールのID
});
// 2 Amazon Cognito Userpoolの指定＋クライアントアプリの指定
var poolData = {
UserPoolId: 'ap-northeast-1_xxxxxxxxx', //ユーザープールのID
ClientId: 'zzzzzzzzzzzzzzzzzzzzzzzzzz' //クライアントアプリの設定上のID
};
//ユーザープール＋クライアントアプリの情報を格納
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var attributeList = []; //本来であればattributelistに電話番号や住所など入れることも可能（今回はしない）
var cognitoUser;
//-->
</script>
<script>
<!--
$('#user_add_btn').click(function() {
//画面上の入力値であるメールアドレス＋パスワードを代入する
username = $("#inputUsername").val();
password = $("#inputPassword").val();
if(!username || !password) { return false; }
userPool.signUp(username, password, attributeList, null, function(err, result){
if (err) {
console.log(err);
message_text = err;
message_class = "alert-danger";
} else {
cognitoUser = result.user;
console.log('user name is ' + cognitoUser.getUsername());
message_text = cognitoUser.getUsername() + "が作成されました";
message_class = "alert-success";
}
$("#message").text(message_text);
$("#message").addClass(message_class);
$('#message').show();
//setTimeoutはmessage表記後フェードアウトする関数なのでmustではない
setTimeout(function() {
$('#message').fadeOut();
$("#message").removeClass(message_class);
}, 5000);
});
});
//-->
</script>
</body>
</html>
AWS 자격 증명을 얻기 위한 최신 코드는 Cognito의 샘플 코드에 있습니다(이번 플랫폼은 javascript)
2 튜토리얼이 attribute가 많지만,하고있는 것은 함께!
이번에는 이름과 패스워드만으로 등록할 수 있도록 Cognito의 설정을 실시했다
감상
가입 할 수있었습니다!
이것만으로는 Cognito의 장점은 없을지도 모르지만 서서히 확장해 나가고 싶습니다.
Reference
이 문제에 관하여(AWS Cognito를 사용하여 화면 가입을 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takaahi/items/0de865a9716fab7d0d55텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
