Logging into website

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 Tutorial-2-source. 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="byteball:' + pairingCode + '">' + pairingCode + '</a>';
And QR
let dataURL = await QRCode.toDataURL("byteball:" + pairingCode);
b = '<br>Please login using this pairing code: <a href="byteball:' + 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("byteball:" + address + '?amount=100');
b = '<br>Please pay for the article. <br>Address: ' + address + '<br>Amount: 100<br><img src="' + dataURL + '"><br>' +
  '<a href="byteball:' + 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:
https://www.youtube.com/watch?v=vvB6A1wBecQ​
All the code you can find on github. 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 - @obytedev.
Ping-pong paymets
Weather oracle
Last updated 4 months ago