Obyte developer resources
GitHubObyte.jsObyte.org
  • Quick Start
  • Configuration
  • Tutorials for newcomers
    • Setting up headless wallet
    • Ping-pong paymets
    • Logging into website
    • Weather oracle
    • Bet on weather bot
  • Payments and transactions
    • Textcoins
    • Sending data to DAG
  • Contracts
    • Smart contracts
    • Smart contract language reference
    • Prosaic contracts
    • Contracts with arbitration
  • Autonomous Agents
    • Getting started guide
    • Oscript language reference
  • Issuing assets on Obyte
  • Attestation profiles / KYC
  • Address signing/verification
  • URI protocol
  • Events list
  • Websocket API
    • Request
    • JustSaying
  • Obyte for merchants
    • Payments gateway
    • Cashback API
  • JSON-RPC
    • Exposing RPC interface
    • Running RPC service
  • Libraries and Scripts
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Tutorials for newcomers

Logging into website

PreviousPing-pong paymetsNextWeather oracle

Last updated 3 years ago

Was this helpful?

Hey guys! Today we will learn how to log in using a Obyte wallet, and also make paid access to the article. To do this, we need project that i have prepared for you . Install it.

git clone https://github.com/xJeneKx/Tutorial-2-source
cd Tutorial-2-source
npm install

If you run project you will see a blog with articles. After opening any article you will see a request to log in. Let’s create an authorization. First we need a pairing code, you could see it on startup

Copy it and change our code a bit

pairingCode = 'Aly99HdWoCFaxJiIHs1ldREAN/sMDhGsRHNQ2RYU9gCj@byteball.org/bb#' + code;
eventBus.on('paired', (from_address, pairing_secret) => {
  console.error('paired', from_address, pairing_secret);
});

Run and see the link. Сlick on it and bot will be added. Now let’s look at the console.

Add the link

b = '<br>Please login using this pairing code: <a href="obyte:' + pairingCode + '">' + pairingCode + '</a>';

And QR

let dataURL = await QRCode.toDataURL("obyte:" + pairingCode);
b = '<br>Please login using this pairing code: <a href="obyte:' + pairingCode + '">' + pairingCode + '</a><br><img src="' + dataURL + '">';

Save our device address, we will need it later.

eventBus.on('paired', (from_address, pairing_secret) => {
  let device = require('ocore/device');
  assocCodeToDeviceAddress[pairing_secret] = from_address;
  device.sendMessageToDevice(from_address, 'text', 'ok');
});

Now we need to tell the browser that we are logged in To implement this, we add function in start.js

async function amILogged(ctx) {
  let url = ctx.request.url;
  let match = url.match(/code=([0-9]+)/);
  if (match && assocCodeToDeviceAddress[match[1]]) {
     ctx.cookies.set('ac', match[1]);
     ctx.body = 'true';
  } else {
     ctx.body = 'false';
  }
}

And also one more routing

app.use(mount('/amilogged', amILogged));

In article.html we will add a request to check

var step = '<%= step %>';
var code = '<%= code %>';
if (step === 'login') {
  setInterval(() => {
     fetch('/amilogged?code=' + code)
        .then((response) => {
           return response.text();
        }).then(result => {
        if (result === 'true') {
           location.reload(true);
        }
     })
        .catch(alert);
  }, 5000);
}

What’s going on here? The user scans the QR code, adds our bot. Bot associates code with his device_address. In the browser, we knock and ask: did we logged in? and adding cookies.

Now we need to create an address and associate it with the user and the article. Add a variable

let assocCodeAndNumberToAddress = {};

Add the address and display it

step = 'paid';
let address = await getAssocAddress(assocCode, 1);
let dataURL = await QRCode.toDataURL("obyte:" + address + '?amount=100');
b = '<br>Please pay for the article. <br>Address: ' + address + '<br>Amount: 100<br><img src="' + dataURL + '"><br>' +
  '<a href="obyte:' + address + '?amount=100">Pay</a>';

And finally the function getAssocAddress

function getAssocAddress(assocCode, number) {
  return new Promise(resolve => {
     let name = assocCode + '_' + number;
     if (assocCodeAndNumberToAddress[name]) {
        return resolve(assocCodeAndNumberToAddress[name]);
     } else {
        headlessWallet.issueNextMainAddress(address => {
           assocCodeAndNumberToAddress[name] = address;
           return resolve(address);
        });
     }
  });
}

This time we will not wait for the stabilization of the unit and immediately open access. Add a variable

let assocCodeToPaid = {};

Add a check that the user has paid for

async function amIPaid(ctx) {
  let code = ctx.cookies.get('ac');
  ctx.body = (code && itPaid(code)) ? 'true' : 'false';
}

function itPaid(code) {
  return !!assocCodeToPaid[code];
}

Add a routing

app.use(mount('/amipaid', amIPaid));

And payment processing

eventBus.on('new_my_transactions', (arrUnits) => {
  const device = require('ocore/device.js');
  db.query("SELECT address, amount, asset FROM outputs WHERE unit IN (?)", [arrUnits], rows => {
     rows.forEach(row => {
        if (row.amount === 100 && row.asset === null) {
           for (let key in assocCodeAndNumberToAddress) {
              if (assocCodeAndNumberToAddress[key] === row.address) {
                 let assocCode = key.split('_')[0];
                 assocCodeToPaid[assocCode] = true;
                 device.sendMessageToDevice(assocCodeToDeviceAddress[assocCode], 'text', 'I received your payment');
                 return;
              }
           }
        }
     })
  });
});

That’s all, make a working second article - will be your homework:) You should get this:

All the code you can find on . Did you like the lesson? Any questions? What topics have caused you difficulties and it is worth talking about them? Write in the comments and I will help you. Also join my telegram chat - .

https://www.youtube.com/watch?v=vvB6A1wBecQ
github
@obytedev
Tutorial-2-source