Gated Content
A gated content mechanism can be used to limit access to some content based on the membership users have. Here is a simple flow chart of the purchase process. You can click on the item to see the code.
const purchaseMembership = async (contractAddress,contractAbi,membershipId) => {const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();const contract = new ethers.Contract(contractAddress, contractAbi, provider);const signedContract = contract.connect(signer);const options = { value: ethers.utils.parseEther(price) };const tx = await signedContract.purchaseMembership(membershipId, options);await tx.wait();};
After the purchase when clicking on the content we need to decide if the user actually has the access to content. We need to test two things here
- The address user sends actually belongs to them
- User has bought that content with their address
You can check if that address has access to the content they request by checking the record on the smart contract. To verify the address belongs to them. We need to sign the message use sends to BE. In ethers.js signer.signMessage function can be used to do this. Here is the flow for user accessing the content.
const signMessage = async (message) => {const provider = new ethers.providers.Web3Provider(window.ethereum);const signer = provider.getSigner();const signedMessage = await signer.signMessage(message);return signedMessage};
The sign process only needs to happen once and you can keep it until the user changes account.
Try buying membership and switching account here. When you are using the same account you only need to sign once. After switching the account you will need to sign again
Purchase Membership
You can purchase a membership by clicking on Buy button
Red Membership
Blue Membership
Green Membership
After purchasing a membership releated content will be unlocked. (User can click on the link anyway. But the content will not be loaded if the user does not have that membership)