血と汗となみだを流す

クラウドエンジニアになるための修業の場

Javascriptがわからないのを克服していく②(cognitoと連携したユーザSignIn)

概要

今回

  • singinページのjavascriptを読む
  • 対象は同じ js/cognito-auth.js

前回と同じ様の読めるところすっ飛ばし

  • signin.htmlでjs/cognito-auth.js読み込み
  • signin.htmlのsigninFormがsubmitされるとhandleSignin()が実行される
  • signin()に、成功/失敗時のfunctionを渡して実行
    • 成功:「Successfully Logged In」と表示してride.htmlへ繊維
    • 失敗:エラーをalert()で表示

signin()

  • インラインでやってることを推測しながらコメントを追加
  • 参照しているソースコードはおそらくここのクラスだと推測して読む
    function signin(email, password, onSuccess, onFailure) {

        // メールアドレスとパスワードから、Cognitoの認証用データオブジェクトを生成する
        var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails({
            Username: email,
            Password: password
        });

        // createCognitoUser()(後述)でcognitoユーザオブジェクトを生成する
        var cognitoUser = createCognitoUser(email);

        // 上記の認証用データオブジェクトで認証処理を行う。詳細は以下(簡単に言うと認証してcallbackしている)
        // @see https://github.com/aws-amplify/amplify-js/blob/master/packages/amazon-cognito-identity-js/lib/CognitoUser.js#L253
        cognitoUser.authenticateUser(authenticationDetails, {
            onSuccess: onSuccess,
            onFailure: onFailure
        });
    }

createCognitoUser()

  • インラインでやってることを推測しながらコメントを追加
    function createCognitoUser(email) {

        // ユーザプールオブジェクトとメールアドレスから、Cognitoユーザオブジェクトを生成する
        return new AmazonCognitoIdentity.CognitoUser({
            Username: email,
            Pool: userPool
        });
    }

本日javascriptと和解できたところ

  • 基本フローは前回とほとんど一緒なのでスラスラ読めた!
  • 読めるようになると楽しさが増してくる

本日和解できなかったところ

  • CoginitoのJavascript SDKのマニュアルが見つからない・・・
  • おそらくAWS AMplifyのライブラリを使っているのだろうけど・・・どこだ?!