血と汗となみだを流す

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

Javascriptがわからないのを克服していく⑤(API Gatewayとcognitoとの連携)

概要

対象

  • 実際に公開するページ(ride.html)で動く以下Javascript
    • js/ride.js
  • インラインでコメントしながら理解する

js/ride.js

メソッド一覧

  • function rideScopeWrapper($)
  • function requestUnicorn(pickupLocation)
  • function completeRequest(result)
  • function handlePickupChanged()
  • function handleRequestClick(event)
  • function animateArrival(callback)
  • function displayUpdate(text)

function rideScopeWrapper($)

/*global WildRydes _config*/

// グローバル変数「WildRydes」を定義。定義済みだったら定義済みの変数を使う
var WildRydes = window.WildRydes || {};

// 「WildRydes」のmapオブジェクトを定義。こちらも同じく定義済みだったら定義済みの変数を使う
WildRydes.map = WildRydes.map || {};

// ()でくくってあるので、読み込みと同時に実行される即時関数
(function rideScopeWrapper($) {

    // 認証トークン
    var authToken;

    // 認証トークンを取得する。取得できたらsetAuthToken()を実行する
    WildRydes.authToken.then(function setAuthToken(token) {
        if (token) {

            // トークンがあったら認証トークンにセット
            authToken = token;

        } else {

            // なかったらサインインページに遷移
            window.location.href = '/signin.html';
        }
    }).catch(function handleTokenError(error) {

        // exception発生したら画面にエラー表示して、サインインページに遷移
        alert(error);
        window.location.href = '/signin.html';
    });
    ...

    // Register click handler for #request button
    $(function onDocReady() {
        // requestボタンをクリックしたらhandleRequestClick()(後述)を実行するように定義
        $('#request').click(handleRequestClick);

        // signOutボタンをクリックしたら無名関数を実行
        $('#signOut').click(function() {
            // サインアウト処理
            WildRydes.signOut();

            // サインアウトしたメッセージを表示
            alert("You have been signed out.");

            // サインインページに遷移
            window.location = "signin.html";
        });

        // 地図上で「pickupChange」eventが発生したらhandlePickupChanged()を実行
        $(WildRydes.map).on('pickupChange', handlePickupChanged);

        // 認証トークンを取得する。取得できたらupdateAuthMessage()(後述)を実行する
        WildRydes.authToken.then(function updateAuthMessage(token) {

            if (token) {
                // トークンがある場合、メッセージを画面表示
                displayUpdate('You are authenticated. Click to see your <a href="#authTokenModal" data-toggle="modal">auth token</a>.');
                // 認証トークンにトークンをセット
                $('.authToken').text(token);
            }
        });

        // Lambdaのendpointが無かったら「#noApiMessage」のメッセージを表示
        if (!_config.api.invokeUrl) {
            $('#noApiMessage').show();
        }
    });
    ...
}(jQuery));

function handlePickupChanged()

  • 地図がクリックされた時にボタンの属性を変える
    function handlePickupChanged() {
        // requestボタンのjQueryオブジェクト
        var requestButton = $('#request');

        // requestButtonオブジェクトのテキストに文字列をセット
        requestButton.text('Request Unicorn');

        // requestButtonオブジェクトの「disabled」にfalseをセット。(requestボタンの非表示を解除)
        requestButton.prop('disabled', false);
    }

function requestUnicorn(pickupLocation)

    function requestUnicorn(pickupLocation) {

        // ajax通信を行う
        $.ajax({

            // POSTで通信
            method: 'POST',

            // 通信先はAPI Gateway
            url: _config.api.invokeUrl + '/ride',

            // ヘッダをセット
            // API Gatewayのオーサライザをセットしたときの「トークンのソース」にセットしたキー
            headers: {
                Authorization: authToken
            },

            // 地図上でクリックした地点の緯度経度情報をJSONにしたものをBodyにセット
            data: JSON.stringify({
                PickupLocation: {
                    Latitude: pickupLocation.latitude,
                    Longitude: pickupLocation.longitude
                }
            }),

            // コンテンツタイプセット
            contentType: 'application/json',

            // 成功時の処理。completeRequest()を実行
            success: completeRequest,

            // エラー時の処理
            error: function ajaxError(jqXHR, textStatus, errorThrown) {

                // エラーログを出力して、エラー画面を表示
                console.error('Error requesting ride: ', textStatus, ', Details: ', errorThrown);
                console.error('Response: ', jqXHR.responseText);
                alert('An error occured when requesting your unicorn:\n' + jqXHR.responseText);
            }
        });
    }

function completeRequest(result)

  • requestUnicorn()でAPI Gatewayへの通信が成功した時に呼び出される
  • 画面右上のメッセージ表示やボタン制御などを行う
    function completeRequest(result) {
        var unicorn;    // Unicornオブジェクト格納変数
        var pronoun;    // 代名詞?

        // API Gatewayから受信した結果をログ出力
        console.log('Response received from API: ', result);

        // 結果からUnicornオブジェクトをセット
        unicorn = result.Unicorn;

        // Unicornの性別によって、メッセージに表示する代名詞をセット
        pronoun = unicorn.Gender === 'Male' ? 'his' : 'her';

        // Unicornの名前、色などをメッセージに表示
        displayUpdate(unicorn.Name + ', your ' + unicorn.Color + ' unicorn, is on ' + pronoun + ' way.');

        // animateArrival()(後述)を実行
        animateArrival(function animateCallback() {

            // Unicornが来たというメッセージを表示
            displayUpdate(unicorn.Name + ' has arrived. Giddy up!');

            // 地図上の緯度経度を外す
            WildRydes.map.unsetLocation();

            // requestボタンを非表示
            $('#request').prop('disabled', 'disabled');

            // requestボタンの表示を「Set Pickup」に変更
            $('#request').text('Set Pickup');
        });
    }

function handleRequestClick(event)

  • requestボタンがクリックされたときの挙動
    function handleRequestClick(event) {
        // 地図の選択された地点の緯度経度を取得
        var pickupLocation = WildRydes.map.selectedPoint;

        // eventの処理を停止
        event.preventDefault();

        // requestUnicorn()を実行
        requestUnicorn(pickupLocation);
    }

function animateArrival(callback)

  • 選択した地点に現在地をセット
    function animateArrival(callback) {
        // 地図の選択された地点の緯度経度を取得
        var dest = WildRydes.map.selectedPoint;

        // 現在地をリセット
        var origin = {};

        // 選択された地点に現在地をセット
        if (dest.latitude > WildRydes.map.center.latitude) {
            // 
            origin.latitude = WildRydes.map.extent.minLat;
        } else {
            origin.latitude = WildRydes.map.extent.maxLat;
        }

        if (dest.longitude > WildRydes.map.center.longitude) {
            origin.longitude = WildRydes.map.extent.minLng;
        } else {
            origin.longitude = WildRydes.map.extent.maxLng;
        }

        // 地図の描画
        WildRydes.map.animate(origin, dest, callback);
    }

function displayUpdate(text)

    function displayUpdate(text) {
        // メッセージフィールドにテキストを表示
        $('#updates').append($('<li>' + text + '</li>'));
    }

わかったこと

わからなかったこと

  • 認証・認可って何?(裏で全部やってくれてるっぽい)