Quickstart - Static HTML

Using Static HTML (UMD Package)

If you are writing an app that doesn't build with npm packages, you may alternatively use our CDN hosted UMD packages:

The oreid-js library provides all the help you need to add ORE ID to your Javascript app

The oreid-webpopup adds a pop-up user experience to handle common flows like login and sign transaction.

Step 1 - Include via <script> tags

<script src="https://service.oreid.io/dist/oreid-js/v4/index.js"></script>
<script src="https://service.oreid.io/dist/oreid-webpopup/v2/index.js"></script>

Note: You can see the latest version here

Step 2 - Initialize

<script>
  const oreId = new oreidJs.OreId({
    appId: "your_app_id",
    plugins: { popup: oreidJsWebPopup.WebPopup() }
  });

  oreId.init()
    .then(() => { console.log("oreid ready"); })
    .catch((err) => { console.error(err); });

</script>

Step 3 - Launch Login

<script>
  const onClick = () => {
    oreId.popup.auth({ provider: "google" })
      .then((data) => { console.log(data); })
      .catch((error) => { console.log(error.message); }
    );
  }
</script>

<button onClick="onClick()">Auth</button>

Step 4 - Launch Sign Transaction Flow

<script>
  const onClick = () => {
    const userChainAccounts = oreId.auth.user.data.chainAccounts;
    // get first Ethereum account in user’s OREID account
    const ethAccount = userChainAccounts.find(ca => ca.chainNetwork === 'eth_main')

    // transactionBody is blockchain transaction (differs by chainNetwork)
    const transactionBody = {
      from: "0xF478d…",
      to: "0xA200c…",
      value: "1"
    };

    // compose a blockchain transaction
    oreId.createTransaction({
      transaction: transactionBody,
      chainAccount: ethAccount.chainAccount,
      chainNetwork: ethAccount.chainNetwork,
    }).then(transaction => {
      // have the user approve signature
      oreId.popup.sign({ transaction })
        .then({ transactionId } => { ... })
        .catch( onError );
    })
  }
</script>

<button onClick="onClick()">Sign Transaction</button>