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/[email protected]/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:
https://www.youtube.com/watch?v=vvB6A1wBecQ
Last modified 1yr ago