Hello guys!
I am one of the core BOOM developers; canister backend and interacting with it through Unity game builds has always been my strength, but my knowledge about user interaction with the backend canister from some front end other than Unity is vague.
I know how to build my own frontend with javascript/typescript/react, but my issue comes when I want to implement II Auth to allow users to log in and execute calls to a backend canister’s endpoints.
So far I managed to build the workflow to allow the user to login and logout from my frontend. But when I attempt to make a canister call from the front end, I get the following errors:
Refused to connect to ‘https://ic0.app/api/v2/canister/ryjl3-tyaaa-aaaaa-aaaba-cai/read_state’ because it violates the following Content Security Policy directive: “connect-src ‘self’ http://localhost:* https://icp0.io https://*.icp0.io https://icp-api.io”.
Refused to connect to ‘https://ic0.app/api/v2/canister/ryjl3-tyaaa-aaaaa-aaaba-cai/read_state’ because it violates the document’s Content Security Policy.
Uncaught (in promise) TypeError: ot.query is not a function
at d (index-214ff23f.js:93:4301)
at d.h [as greet] (index-214ff23f.js:93:7089)
at onClick (index-214ff23f.js:94:20992)
at Object.Nb (index-214ff23f.js:37:9853)
at Tb (index-214ff23f.js:37:10010)
at Ub (index-214ff23f.js:37:10067)
at nf (index-214ff23f.js:37:31448)
at se (index-214ff23f.js:37:31868)
at index-214ff23f.js:37:37065
at Qk (index-214ff23f.js:40:36952)
Here you have an image about the code I implemented to execute the query canister call
Thanks for your time!
A few things I see going wrong in the code:
- HttpAgent.create() is async, you need to use await
- The host option is supposed to define the api gateway to the IC, the Internet Identity url is not a api gateway. I’d recommend to leave the host option undefined unless there’s a reason to define it.
- The CSP error is caused by the above, but in case you get other CSP errors, see this documentation for configuring it.
Hello!
Thanks for the reply!
I did the implementations you mentioned.
These are the logs I get after pressing the “Test” button.
I did some research and it looks like this might be due to some issue with the DFX version. My dfx version is 0.24.2
Looks like mainId is not a valid principal, console.log it and check if it’s either a valid Principal class instance or a valid principal string.
The first log of the image is the canister id.
The principal so far looks right.
Canister ID: “azhcw-2qaaa-aaaap-qh7wa-cai”
Is the canister deployed on mainnet or locally?
If it’s deployed locally, you need to also pass shouldFetchRootKey: true in the HttpAgent.create() options.
Also on what url is your frontend running? Depending on the url, you might have to explicitly define a host.
Both, my frontend and backend, are deployed to the mainnet.
This is my frontend url: https://qdst4-qyaaa-aaaai-q3kea-cai.icp0.io/
Took me a moment to find it, seems like (some) of your dependencies are out of date in comparison to @dfinity/agent, particularly @dfinity/principal is out of date.
As you can see in your frontend source, the static from method in the @dfinity/principal library doesn’t handle Uint8Array input yet in the version you’ve bundled right now compared to the current version.
Make sure to update following packages to the latest version (2.1.3) in case you’re using them, they’re all part of the same mono repo so they should all have the same version:
@dfinity/agent@dfinity/principal@dfinity/identity@dfinity/auth-client@dfinity/candid
You are the best!
Thanks so much!
That solved my issue!
1 Like
