S3で作成した静的ホスティングサイトで会員専用ページを作成したい

Question

前提・実現したいこと

S3で作成した静的ホスティングサイトで会員専用ページを作成したいのですが、どのようにすればよいでしょうか。
Cognitoで作成したユーザーで以下のようなコードを書いてみたのですが、アクセスすることは叶いませんでした。

cognitoUser.getSession(function(err, result) {
  if (result) {
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
      IdentityPoolId: "us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      Logins: {
        "cognito-idp.us-east-1.amazonaws.com/us-east-1_xxxxxxxxx": result.getIdToken().getJwtToken()
      }
    });

    window.location.href = "https://xxxxxxxxxxxxxxxxxxxxxx.s3.amazonaws.com/private/index.html";
  }
});

S3のバケットポリシーは以下のように書いています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::xxxxxxxxxxxxxxxxx/*"
        },
        {
            "Effect": "Deny",
            "NotPrincipal": {
              "AWS": "arn:aws:iam::xxxxxxxxxxxx:user/xxxxxxxxxxxxxx"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::xxxxxxxxxxxxxxx/private/index.html"
        }
    ]
}

そもそもアプローチが違うのでしょうか。ご教授いただけるとありがたいです。

Comments

[yu_1985]

> アクセスすることは叶いませんでした
ということですが、そもそも配置したファイル（index.html？）を表示することができていないということでしょうか？

[退会済みユーザー]

そうです。配置したhtmlやcss、jsファイルなどを読み込むことができないです。
コードの補足になりますが、以下のようにCognitoの認証は通っています。
あとはIAMのロールやS3のバケットポリシーの設定次第だと思うのですが。。。
```
const email = document.getElementById("emailText").value;
const password = document.getElementById("passwordText").value;

const poolData = {
UserPoolId: "us-east-1_xxxxxx",
ClientId: "xxxxxxxxxxxxx"
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
const authenticationData = {
Username: email,
Password: password
};

const authenticationDetails =
new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

const userData = {
Username: email,
Pool: userPool,
};

const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function(result) {
const idToken = result.getIdToken().getJwtToken(); // IDトークン
const accessToken = result.getAccessToken().getJwtToken(); // アクセストークン
const refreshToken = result.getRefreshToken().getToken(); // 更新トークン
},
onFailure: function(err) {
console.error(err);
},
});
}
```

Answer 1

もしかしたらCognito側の設定が済んでいないのかもしれないのと、バケットポリシーも見直したほうが良さそうですね。
公式ドキュメントではAmplifyを使った例が今は多数出てきますが、参考になりそうなサイトを共有します。

Comments

[退会済みユーザー]

ご返信ありがとうございます。

そのサイトみたんですよね...。
確かに認証後にS3から取得していますが、S3バケットからURLを指定して取得しているのではなく、JS上でS3オブジェクトから取得しいるのです。
私は認証後にS3バケットの構造を保ちつつURLで取得したいので。
そうしないと参照するCSSやJSが読み込めないからです。

私なりにググってみても認証処理までの解説とか、S3にPUTするとか、DBにアクセスするとかばかりで。

不可能ということは無いと信じたいので色々やってみますが、Amplifyについても調べてみます。

あと、絶賛情報受付中です。よろしくお願います。

[退会済みユーザー]

'参考になりそうなサイト'の方法ですが、勘違いしていました。
あの方法を行えば指定したS3ファイルにアクセスすることは可能です。
ですが、URLが署名付きURLになるので、HTMLに紐付いているcssやjsを利用することができないのです。