AWS Cognito를 사용하여 화면 로그인을 시도했습니다.
전제
AWS에서 시스템 구축을 목표로 하는 두 번째 단계입니다.
이번 게재 범위는 Cogninito상에 존재하고 있는 사용자 풀에의 사용자의 로그인을 화면상에서 실시하는 것.
그 때문에 필요한 라이브러리 취득, 화면 작성까지를 게재합니다.
지난 번에는 AWS Cognito를 사용하여 화면 가입을 시도했습니다.
AWS는 인증 및 허가를 해주는 Cognito라는 서비스를 이용해 앱케이션에 로그인을 하고 싶습니다.
↓Cognito의 사용자 설정 방법은 이쪽↓
(공사 중)
기본적으로 AWS의 튜토리얼을 참고로 하고 있습니다만, 별도 같은 것을 하고 있는 분들도 필요했으므로, 꽤 참고로 하고 있습니다.
(선구자 분들께 감사드립니다!)
이 기사가 낡아져도 신규 튜토리얼과의 차이를 확인하면서 같은 것이 재현할 수 있는 것을 목표로 합니다.
Cognito 자바 스크립트 SDK 자습서
htps : // / cs. 아 ws. 아마존. 코 m / 그럼 _ jp / 코 g와 / / st / ゔ ぇ ぺ ぺ r gue / ushin g-Amason-ko g-yu r-i-denchi ty-po ls - ゔ ぁsc pt-에-mpぇs. HTML
별도 참고 페이지
htps : //는 wks의 w㎉g. bgs포 t. 이 m / 2016 / 10 / try - ぉ ギン ぃ th - 아 ws - 헉 tps : //에서 v.ぁsss d. jp / c ぉ d / 아 ws / ぉ ギン ふぉ rm by う う ん g あ
이용한 라이브러리 일람(전회와 완전히 함께)
Cognito SDK
htps : // 등 w. 기테부세 r 콘텐트 t. 코 m / 아 ws / 아마 젠 - 코 g에 - 이젠 치 ty - js / 뭐 r / st / 아 ws - 코 g에 - sdk. 모두. js
htps : // 등 w. 기테부세 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. 기테부세 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 //-->
<!-- aws sdk //-->
<script src="aws-sdk.min.js"></script>
<!-- aws cognito sdk (public beta!!) //-->
<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 //-->
<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="submit" class="btn btn-lg btn-primary btn-bloc" id="login-button" 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
});
//よくわからないけど初期化します
AWSCognito.config.region = 'ap-northeast-1'; // リージョン(デフォルトだとこのまま)
AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'ap-northeast-1:aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee', // ID プールのID
});
//-->
</script>
<script>
<!--
$(function() {
$("#login-button").click(function(event){
//画面上の入力値であるメールアドレス＋パスワードを代入する
event.preventDefault();
var authenticationData = {
Username : $('#inputUsername').val(),
Password : $('#inputPassword').val(),
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
// 2 Amazon Cognito Userpoolの指定＋クライアントアプリの指定
var poolData = {
UserPoolId: 'ap-northeast-1_xxxxxxxxx', //ユーザープール用のID
ClientId: 'zzzzzzzzzzzzzzzzzzzzzzzzzz' //サインイン用アプリID フェデレーションIDのCognito認証に利用したクライアントアプリのID
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData = {
Username : $("#inputUsername").val(),
Pool : userPool
};
var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (authresult) {
alert("Well done!");
},
onFailure: function(err) {
alert(err.message);
alert("You are looser");
},
});
});
});
//-->
</script>
</body>
</html>
AWS 자격 증명을 얻기 위한 최신 코드는 Cognito의 샘플 코드에 있습니다(이번 플랫폼은 javascript로 기술)
2 튜토리얼의 사용자 인증 (튜토리얼의 ClientId가 무엇인지 모르기 쉽다)
페더레이션 ID의 Cognito 인증에 사용되는 클라이언트 앱의 ID를 설정합니다.
감상
로그인 할 수있었습니다!
well done!의 부분에 천이 후의 링크를 기술하는 것으로 천이 화면에 뛰어올 수 있습니다.
(이번에는 Cognito의 인증 확인이 목적이므로하지 않았습니다.)
주의
원인은 조사하지 않았지만,
var poolData = {
UserPoolId: 'ap-northeast-1_xxxxxxxxx', //ユーザープール用のID
ClientId: 'zzzzzzzzzzzzzzzzzzzzzzzzzz' //サインイン用アプリID フェデレーションIDのCognito認証に利用したクライアントアプリのID
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
을 function() 밖으로 가져가면 움직이지 않게 되었다. . 왜. . (그러므로 하지 마세요)
Reference
이 문제에 관하여(AWS Cognito를 사용하여 화면 로그인을 시도했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takaahi/items/734f8a07432b1397925f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
