Giter Club home page Giter Club logo

access-control-tutorial's Introduction

Access Control

This project demonstrates a simple example of how to implement access control in a web application using Motoko and JS. The application tracks the number of times different users have clicked a button. We demonstrate two different strategies for authentication: using a secret key and authenticating with Internet Identity using the @dfinity/ii-login-button web component.

Demo

You can try out the demo here.

How to run locally

Prerequisites

Steps

  1. Clone this repo and install dependencies:
git clone [email protected]:krpeacock/access-control-tutorial.git
cd access-control-tutorial
npm install
  1. Start the local internet computer emulator:
dfx start --background --clean --host "127.0.0.1:4943"
  1. Deploy the canisters:
dfx deploy

You can open the app there in your browser, or you can run the vite dev server:

npm run dev

How it works

In the backend, the canister stores a map of counts with the principal as the key. The canister has three methods:

  • increment
  • getCount
  • getCounts

The increment method increments the count for the principal that calls it. The getCount method returns the count for the principal that calls it. The getCounts method returns the counts for all principals.

The frontend has a single page. It includes an input that converts the string into an Ed25519KeyIdentity. It displays the principal that you will be calling with, and then anytime you click the button, it will update the count for that principal and display the new count.

There is also a button to log in with Internet Identity. This will open a popup that will prompt you to log in with Internet Identity. Once you log in, it will display your principal and you can click the button to increment your count.

Finally, there is a table of all the identities that have been used with the site.

access-control-tutorial's People

Contributors

krpeacock avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

josephgranata

access-control-tutorial's Issues

Error on deploying after cloning the repository

Hello!
I would like to use this project to start learning how to integrate a motoko canister with a frontend app using the Internet Identity. But I am having problems on building this version of the project.
I am using a MacBook Pro with M1 and dfx version 0.14.

Steps I've done:

  • cloned this project,
  • ran npm install
  • ran dfx start --background --clean --host "127.0.0.1:4943"
  • ran dfx deploy

During the deploy I am encountering the following error, do you how it is possible to fix it? many thanks!


Building frontend...
Error: Failed while trying to deploy canisters.
Caused by: Failed while trying to deploy canisters.
  Failed to build call canisters.
    Failed while trying to build all canisters.
      The post-build step failed for canister 'bd3sg-teaaa-aaaaa-qaaba-cai' (frontend) with an embedded error: Failed to build frontend for network 'local'.: The command '"npm" "run" "build"' failed with exit status 'exit status: 1'.
Stdout:

> [email protected] build
> vite build src/frontend --config vite.config.js


Stderr:
failed to load config from /Users/jacopo/motoko_bootcamp/access-control-tutorial/vite.config.js
error during build:
Error: 
You installed esbuild for another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "@esbuild/darwin-arm64" package is present but this platform
needs the "@esbuild/darwin-x64" package instead. People often get into this
situation by installing esbuild with npm running inside of Rosetta 2 and then
trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta
2 is Apple's on-the-fly x86_64-to-arm64 translation service).

If you are installing with npm, you can try ensuring that both npm and node are
not running under Rosetta 2 and then reinstalling esbuild. This likely involves
changing how you installed npm and/or node. For example, installing node with
the universal installer here should work: https://nodejs.org/en/download/. Or
you could consider using yarn instead of npm which has built-in support for
installing a package on multiple platforms simultaneously.

If you are installing with yarn, you can try listing both "arm64" and "x64"
in your ".yarnrc.yml" file using the "supportedArchitectures" feature:
https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the "esbuild-wasm" package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the "esbuild" package, so you may also not
want to do that.



Proxy error with vite

UPDATE: I had to edit the vite.config.js file and it worked. The change I made was:
FROM:

server: {
    proxy: {
      "/api": {
        target: "http://localhost:4943",
        changeOrigin: true,
      },
    },
  },

TO:

server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:4943",
        changeOrigin: true,
      },
    },
  },

Hi, I am getting an error that I don't know how to fix. Was wondering what you thought. The dapp runs but something is happening with vite I think. Thanks!

From the terminal:
14:05:34 [vite] http proxy error at /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/query:
Error: connect ECONNREFUSED ::1:4943

From the browser terminal:
dex.js:28 Unable to fetch root key. Check to ensure that your local replica is running
//
server returned an error:
Code: 500 (Internal Server Error)
Body:
Retrying request.
_

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.