简体繁体 English

AWS Cognito JS如何允许访问s3对象（特定的html页面）

[英]AWS Cognito JS how to allow access to s3 object (a specific html page)

原文 2017-12-03 14:10:38 7 1 javascript/ amazon-cognito

I have 3 html files in an s3 hosted website, a register.html, login.html and a dashboard.html 我在s3托管网站中有3个html文件，一个register.html，login.html和dashboard.html

The registration and logging in work and I end up with an an access token. 注册和登录工作最终得到一个访问令牌。

How do I restrict access to the dashboard.html then somehow use the access token to allow access to it? 如何限制对dashboard.html的访问，然后以某种方式使用访问令牌来允许对其进行访问？

1 个解决方案

Using JavaScript without Restricting Access 使用JavaScript而不限制访问

For this kind of a problem, a straight forward approach is to load the dashboard.html and have a JavaScript in dashboard.html body to toggle the display of content by verifying if the user is already logged in or not (eg, Checking a Cognito JWT token in LocalStorage) and redirect to login.html for unauthenticated users. 对于此类问题，直接的方法是加载dashboard.html，并在dashboard.html主体中具有JavaScript，以通过验证用户是否已经登录（例如，检查Cognito）来切换内容的显示。本地存储中的JWT令牌），并重定向到未经身份验证的用户登录到login.html。

Note: This approach will be also useful if you plan to use AWS Cognito UserPools Hosted UI. 注意：如果您计划使用AWS Cognito UserPools托管UI，此方法也将很有用。

Restricting Access 限制访问

If you plan to go ahead with restricting access to dashboard.html you can use CloudFront Signed Cookies to achieve it as follows. 如果您打算继续限制对dashboard.html的访问，则可以使用CloudFront Signed Cookies来实现它，如下所示。

Setup S3 access through AWS CloudFront (Creating an Origin Access Identity - OAI) and make the S3 buckets private (For all three pages). 通过AWS CloudFront设置S3访问（创建原始访问身份-OAI），并将S3存储桶设为私有（对于所有三个页面）。 While you register the S3 origins, you OAI with the wizard. 在注册S3来源时，将使用向导进行OAI。
Create three different behaviors for each html file. 为每个html文件创建三种不同的行为。
For the login.html and register.html behaviors, set Restrict Viewer Access(Use Signed URLs or Signed Cookies) to No 对于login.html和register.html行为，将“ 限制查看器访问权限（使用签名的URL或签名的Cookie）”设置为“否”。
For dashboard.html only, set Restrict Viewer Access(Use Signed URLs or Signed Cookies) to Yes 仅限于dashboard.html，将“ 限制查看者访问权限（使用签名的URL或签名的Cookie）”设置为“是”
When the user tries to access dashboard.html directly (Without Login), CloudFront will return an error. 当用户尝试直接访问dashboard.html（无登录）时，CloudFront将返回错误。 Therefore configure AWS CloudFront error response to Login.html. 因此，将AWS CloudFront错误响应配置为Login.html。
Create an API Gateway and Lambda endpoint to validate the Cognito JWT Token from Login Page and create a Signed Cookie in Lambda and return it in setCookie header. 创建一个API网关和Lambda端点以从登录页面验证Cognito JWT令牌，并在Lambda中创建一个签名Cookie，并在setCookie标头中将其返回。
The browser will send the Cookie header and CloudFront will allow loading dashboard.html when the Cookie is present. 当存在Cookie时，浏览器将发送Cookie标头，CloudFront将允许加载dashboard.html。