Angular 4 app on S3 denied access after redirect

问题

I've built a simple angular 4 app that uses firebase as my authentication. And I use loginWithRedirect because loginWithPopup didn't work really on my cell phone.

But the problem I'm running into is the redirect leaves the page, obviously, to authenticate, and then comes back to mysite.com/login but because its a SPA /login doesn't exist to the bucket I'm guessing.

I've added this redirection rule, but it doesn't seem to be doing anything

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>mysite.cloudfront.net</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>mysite.cloudfront.net</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

I'm redirecting on 403 also because thats the error I keep getting. Then I've added <script> history.pushState({}, "entry page", location.hash.substring(1)); </script> to the top of my index.html file (solution from another stackoverflow question).

But still getting the 403. I don't have the app set up to use hashbangs to begin with and would like to not have to.

The error message I recieve:

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>0D98B2536B28C06D</RequestId>
    <HostId>8nhnAtzaLxPvWcV3f8zqc=</HostId>
</Error>

Edit: A dirty fix I have is to just right before sending the user to google to authenticate, navigate to '/' so thats where google redirects back to. It'd be nice if there was a way to tell google where to redirect back to. Is there?

回答1:

We need add the read access policy in the permissions > bucket policy as mentioned in this documentation. Give it a try

http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

{ "Version":"2012-10-17", "Statement":[{ "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::YOUR-BUCKET-NAME/*" ] } ] }

来源：https://stackoverflow.com/questions/48118958/angular-4-app-on-s3-denied-access-after-redirect

标签

angular

amazon-s3

firebase-authentication

angularfire2