cognito를 사용하여 로그인 화면을 만들어 보았습니다! ~사용자 만들기~(작업 메모)

11693 단어 cognitoAWS

사용자 인증 작성 작업 노트



참고: AWS SDK for JavaScript에서 Cognito User Pools를 사용하여 로그인 화면을 만들려고했습니다. | Developers.IO 를 참고로 인증 화면을 만들어 보았습니다. 기본은 뒤쫓습니다만, 적당히 빠졌습니다.
다음에 같은 것을 만들 때 또 빠진다고 생각하기 때문에 작업 메모입니다.
사용자 작성 화면까지

cognito를 만져보세요



이번에 처음으로 cognito를 터치합니다.
이마이치 거동을 이해할 수 없지만 천천히 기억하고 싶습니다.

환경



로컬로 작성된 HTML 파일을 브라우저에서 열고 테스트합니다.
서버를 준비하거나 등은 하지 않습니다. 로컬 환경에서 Cognito와의 소통 확인이 목적입니다.

Cognito:UserPool 만들기





오른쪽 상단의 파란색 Create를 누르십시오.

UserPool 이름
Pool name:user-identity

기본값으로 만들고 필요한 곳을 수정합니다.

결국 이렇게



작성시 번거롭기 때문에 패스워드 정책을 느슨하게합니다 _



앱 등록(2종류)

app_1
App name:create-user

app_2
App name:cognito-identity

둘 다 "Generate client secret"이 꺼집니다.
켜져 있다고 소개 된 JavaScript를 작성할 때 오류가 발생합니다.



Cognito:identity pool 만들기





IdentityPool
Identity pool name: loginApp
Enable access to unauthenticated identities: チェックON

여기에서 방금 만든 UserPool 정보를 입력합니다.
App client id와 Pool Id 사용

Pool Id 확인



App client id 확인



cognito-identity에서 App client id를 가져옵니다.



확정 후에는 자동으로 IAM을 작성해 주므로 "허가"를 누르십시오.

나중에 사용하기 위해 Identity pool ID와 Identity Pool ARN을 사용하지 마십시오.





HTML 파일 준비(사용자 작성 양식)



참고 기사내에서 AWS SDK for JavaScript를 사용하여 브라우저에서 Cognito User Pools에 가입해 보았습니다. 에 날아간 곳에 있는 샘플을 사용했습니다

이번에는 Email 주소를 사용하므로 일부 재기록하고 있습니다

디렉토리 구성

CSS 나눠라든지 츳코미없이 오나샤스
빨리 했던 것입니다 ...

디렉토리 구성
.
└── www
    ├── js
    │   ├── amazon-cognito-identity.min.js
    │   ├── aws-cognito-sdk.min.js
    │   ├── jsbn.js
    │   ├── jsbn2.js
    │   ├── mypage.js
    │   └── sjcl.js
    ├── login.css
    ├── login.html
    ├── mypage.css
    ├── mypage.html
    └── signup.html

필요한 js 파일 얻기

./www/js 부하의 mypage.js 이외의 5 파일이 필요하므로 준비합니다

htps : // 기주 b. 코 m / 아 ws / 아마 젠 - 코 g와 토이 덴치 ty-js
여기에서 모두 얻습니다.
  • aws-cognito-sdk.min.js
  • amazon-cognito-identity.min.js
  • jsbn.js
  • jsbn2.js
  • sjcl.js

    • signup.html(사용자 작성 양식)

    <생성한 IdentityPoolId의 값>과 <생성한 App-create-user-의 값> 각자의 환경의 것을 사용해 주세요.

    signup.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Create User</title>
    <!-- aws sdk //-->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.8.min.js"></script>
    <!-- aws cognito sdk (public beta!!) //-->
    <script src="./js/jsbn.js"></script>
    <script src="./js/jsbn2.js"></script>
    <script src="./js/sjcl.js"></script>
    <script src="./js/moment.js"></script>
    <script src="./js/aws-cognito-sdk.min.js"></script>
    <script src="./js/amazon-cognito-identity.min.js"></script>
    <!-- jquery //-->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"
            integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <!-- 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="inputEmail" class="sr-only">メールアドレス</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="Email" 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>
    AWS.config.region = 'ap-northeast-1'; // Region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: '＜loginAppの Identity pool IDの値＞'
    });
    // Initialize the Amazon Cognito credentials provider
    AWSCognito.config.region = 'ap-northeast-1'; // Region
    AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: '＜loginAppの Identity pool IDの値＞'
    });
    var data = {
        UserPoolId: '＜user-identityの Pool Idの値＞',
        ClientId: '＜create-userの App client idの値＞'
    };
    var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(data);
    var cognitoUser;
</script>
<script>
    $('#user_add_btn').click(function () {
        username = $("#inputUsername").val();
        email    = $("#inputEmail").val();
        password = $("#inputPassword").val();
        if (!username || !password || !email) {
            return false;
        }
        var attributeList = [
            {
                Name: 'email',
                Value: email
            }
        ];

        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(function () {
                $('#message').fadeOut();
                $("#message").removeClass(message_class);
            }, 5000);
        });
    });
</script>
</body>
</html>

    작성한 HTML 파일을 브라우저에서 열면 다음과 같이 됩니다.



    cognito 화면에서 확인





    사용자가 추가되었습니다.
    입력한 메일 주소에 확인 코드도 도착하고 있다고 생각합니다. 확인해 보세요.

    번거롭기 때문에 수동으로 활성화합니다.

    test1을 클릭하고 Confirm user를 누릅니다.


    이상으로 사용자를 만들 수있었습니다.
    AWS Cognito UserPool 및 Identity를 사용한 iOS 앱 인증
    서버리스 시스템에서 사용자 정보를 액세스 토큰을 사용하여 검색

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage