やりたいこと

S3上にHTMLとJSファイルをおいて静的webページとして公開
webページに入力した内容をcsvにまとめてS3に出力
認証はgoogleのOpenID Connectを使用（roleをつけておく）
バケットポリシーでIP制限をかけておく

S3でwebページ公開に関して

以下のサイトを参考にして公開
S3で静的ウェブサイトをホスティングしてみる
バケットポリシーも作っておく

googleのOpen Connect周り

以下のサイトを参考にクライアントID＋認証周り作成
Googleの「OpenID Connect」を利用する為の「クライアントID」の取得方法

＊承認済みのJavaScript生成元を設定せずにしばらくはまっていました...

Googleと連携するroleの作成

AWSのコンソール画面で
IAM　>　role　>　roleの作成
と進み、ウェブIDのタブを選択してプロバイダーにGoogleを選択
AudienceにはクライアントIDを入力してpolicyのattachなどを行う

例で用いたpolicyはS3の特定のフォルダにのみアクセス可能なものにしました

policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME/output/*"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME"
            ],
            "Effect": "Allow",
            "Condition": {
                "StringEquals": {
                    "s3:prefix": "output"
                }
            }
        }
    ]
}

いよいよJavascript作成

フォルダ構成

BUCKET
- output
- HTML
  - index.html
  - favicon.ico
  - logic.js

ログイン周り

以下のURLを参考にJavascriptを作成（ログイン箇所に関しては例をそのまま使用）
ブラウザの JavaScript
Web Federated Identity Examples

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <title>AWS SDK for JavaScript - Sample Application</title>
    <meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>

<body>
<div id="results" role="alert"></div>
<nav class="navbar navbar-default">
    <div class="container">
        <!-- 2.ヘッダ情報 -->
        <div class="navbar-header">
            <a class="navbar-brand">S3アップローダー</a>
        </div>
    </div>
</nav>


<div class="container" id="form">
    <form>
        <div class="form-group" id="name">
            <label>名前</label>
            <input type="text" name="name" class="form-control" placeholder="申請　太郎" required>
        </div>
        <div class="form-group" id="account_flg">
            <label>アカウント</label>
            <select name="account_flg" class="form-control">
                <option value="不要">不要</option>
                <option value="必要">必要</option>
            </select>
        </div>
        ...
        <button type="button" onclick="upload_csv();" class="btn btn-primary">申請登録</button>
    </form>
</div>
<span
        id="login"
        class="g-signin"
        data-height="short"
        data-callback="loginToGoogle"
        data-cookiepolicy="single_host_origin"
        data-requestvisibleactions="http://schemas.google.com/AddActivity"
        data-scope="https://www.googleapis.com/auth/plus.login">
</span>
<script>
    //以下ほぼサンプルのコピペ
    //s3 = null;  s3をアップローダーでも使いたいので後々グローバル変数で指定しています
    var clientID = '************.apps.googleusercontent.com'; // Google client ID
    var roleArn = 'arn:aws:iam::************:role/ROLE_NAME';
    document.getElementById('login').setAttribute('data-clientid', clientID);
    function loginToGoogle(response) {
        if (!response.error) {
            AWS.config.credentials = new AWS.WebIdentityCredentials({
                RoleArn: roleArn,
                WebIdentityToken: response.id_token
            });
            s3 = new AWS.S3();
            console.log('You are now logged in.');
        } else {
            console.log('There was a problem logging you in.');
        }
    }
    (function () {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/client:plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
    })();
</script>
<script src="logic.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

アップローダー周り

logic.js

//ここに必要な項目のIDを書いておく
csv_array = [
    'name',
    'account_flg'
]

//メインのところ（どのcsvを作成するか）
function upload_csv() {
　　 //連続で投稿する場合に結果画面を一度空欄にする
    document.getElementById('results').innerHTML = "";
    //inputタグを指定してvalidation確認
    var validity_list = document.getElementById("form").getElementsByTagName("div");
    for (var i = 0, l = validity_list.length; i < l; i++) {
        var validity_zone = validity_list[i].getElementsByTagName("input")[0];
        if (!validity_zone) {
            continue;
        }
        if (!validity_zone.checkValidity()) {
            alert('【'+validity_list[i].getElementsByTagName("label")[0].innerHTML + '】 '+ validity_zone.validationMessage);
            return;
        }
    }
    //成功・失敗検知用
    success_flg = true;
    upload('account', make_csv(csv_array));
    //終わった後上部に移動して結果をalertで通知
　　 $("html,body").animate({scrollTop: 0}, 'fast');
    if (success_flg) {
        alert('Success upload');
    } else {
        alert("Fail upload ...");
    }
    //画面更新を防ぐ
    return false;
}

//配列情報から変数(csv)にヘッダー情報と内容を入れる関数
function make_csv(array) {
    var csv = '';
    for (i in array) {
        var block = document.getElementById(array[i]);
        csv += block.getElementsByTagName("label")[0].innerHTML + ',';
    }
    csv = csv.slice(0,-1);
    csv += '\n';
    for (i in array) {
        var block = document.getElementById(array[i]);
        if (block.getElementsByTagName("select")[0]){
            var num = block.getElementsByTagName("select")[0].selectedIndex;
            csv += block.getElementsByTagName("select")[0].options[num].value + ',';
        } else {
            csv += block.getElementsByTagName("input")[0].value + ',';
        }
    }
    csv = csv.slice(0,-1);
    return csv;
}

//出来上がったcsvファイルをアップロードする関数
function upload(service_name, body) {
    var results = document.getElementById('results');
    var params = {
        Bucket: 'BUCKET_NAME',
        Key: 'output/' + service_name + '_' + timestamp() + '.csv', //名前が被らないようにtimestam付
        ContentType: 'csv',
        Body: body
    };
    s3.putObject(params, function (err, data) {
        if (err) {
            success_flg = false;
        }
        //実行結果を画面上部に表示
        results.setAttribute("class", !err ? 'alert alert-success':'alert alert-danger' );
        if (!err){
            results.innerHTML = results.innerHTML + "<strong>【"+service_name+"】</strong>";
        }else{
            results.innerHTML = results.innerHTML + "<strong>ERROR【"+service_name+"】</strong>";
        }
    });
}

//タイムスタンプ作成用関数
function timestamp() {
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours();
    var min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
    return '' + year + month + day + hour + min;
}

終わりに

IP制限をかけておけば簡単に社内サービスを作成できます
単にローカルファイルを上げるだけであれば、htnl上でファイル取得をしてuploadの関数を使えばできます
サーバーレス素晴らしい