I trying to create a simple captcha system, the pictures used as data are stored in firebase storage, the issue is, it’s not allowing me to view them, and they are not displaying as expected. This is how the pictures display when i call the getcaptcha:

When i inspect the page, i see that the images urls were retreived :

<div id="captcha-container">
   <p>Select images containing birds</p>
   <img src="https://storage.googleapis.com/captcha-7f66e.appspot.com/images/stairs/stairs06.jpg" class="captcha-image"><img src="https://storage.googleapis.com/captcha-7f66e.appspot.com/images/birds/bird3.jpg" class="captcha-image"><img src="https://storage.googleapis.com/captcha-7f66e.appspot.com/images/cars/car4.jpg" class="captcha-image">
</div>

But when i try to view the images by visiting the url it shows me this error:

<Error> <Code>AccessDenied</Code> <Message>Access denied.</Message> <Details>Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).</Details> </Error>

I looked online and found out that i have to add “Storage Object Viewer” role, i tried that but still not working :

i’m not sure if this is the right place to add the “Storage Object Viewer” role.

I also tried to modify the rules, here teh default rules :

rules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if false;
    }
  }
}

and here is the new rules i defined :

rules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {
    allow read: if request.auth.uid != null;
  }
}