Comment on page
Node.js
Latest library version: 3.2.2
Include the library SDK:
var el = document.createElement("script");
el.async = true;
el.defer = true;
el.src = "https://cdn.jsdelivr.net/npm/oneaccount@${version}/dist/oneaccount.min.js";
document.body.appendChild(el);
Or just include the script in your HTML (at the end of your body tag):
<script defer async src="https://cdn.jsdelivr.net/npm/oneaccount@<version>/dist/oneaccount.min.js"></script>
Initialize the library:
if (window.oneaccount) {
initOneaccount();
} else {
document.addEventListener("oneaccount-loaded", initOneaccount);
}
// init the library
function initOneaccount() {
window.oneaccount.init("your external id", {
// NOTE: Please check the Library options page for more customisations
iOSRedirectURL: "/user", // required
callbackURL: "/oneaccountauth", // required
});
}
Add the button:
<!-- NOTE: the classes are important for the library to attach the click bindings -->
<button class="oneaccount-button oneaccount-show">Sign in/up using One account</button>
Listen to an authentication event:
document.addEventListener("oneaccount-authenticated", function(event) {
// data contains any data you have returned from the backend
var data = event.detail;
// your business logic here
});
Install the library:
npm install -S oneaccount-express
Setup the library:
const express = require('express');
const { OneAccount } = require('oneaccount-express');
const Redis = require('ioredis');
const app = express();
const redis = new Redis();
app.use(express.json());
let oneaccount = new OneAccount({
// If engine is not provided an in-memory engine will be used.
// For production it is recommended to provide an engine:
// for this example we will use redis but any other database could be used
engine: {
// for best results the timeout should match the timeout
// set in frontend (updateInterval option, default: 3 minutes)
set: (k,v) => redis.set(k, v, "EX", 3 * 60),
get: (k) => {
let v = redis.get(k); redis.del(k); return v;
}
},
})
// The route URL is the callback URL you have set when you created One account app.
app.post('/oneaccountauth', oneaccount.auth, (req, res, next) => {
// NOTE: req.oneaccount is set when a user is authenticated,
// so never return code 200 if this object is not present
if (!req.oneaccount) {
return res.status(401).json({ error: 'unauthorized' });
}
// a user is authenticated and you can implement any logic your application
// needs. req.oneaccount holds data sent by the user
// after successful authentication
// since One account doesn't differentiate between sign up and sign in,
// you can use userId to check if the user signed up already on your website or not.
// the same way you can access any other data you requested from the user:
const { userId, firstName } = req.oneaccount;
// the object contains all fields (camelCased) that are defined in the app (Requested data)
// any data returned here would be sent to oneaccount-authenticated event on front-end e.g.:
return res.json({ firstName });
})
// OPTIONAL: in addition you can read error messages if any occured
app.use((err, req, res, next) => {
console.error(err.devMessage);
if (!err.status) err.status = 500;
res.status(err.status).send(err.message);
})
app.listen(process.env.PORT || 3000);
Please find a simpler version of this tutorial (with minimum comments) and try it out live here:
https://glitch.com/edit/#!/oneaccount
For more options of authentication please check the library documentation: https://github.com/oilastudio/oneaccount-express
Last modified 2yr ago