Manual integration

​
Latest library version:  3.2.2
We are using Node.js to demonstrate how to integrate One account if no library is available.
You can follow the same instructions for other languages using the rest API Node.js is used for demonstration purposes.
Backend:
server.js
const axios = require('axios')
const express = require('express')
const Redis = require('ioredis');
const app = express();
const redis = new Redis();
app.use(express.json());
​
// One account related part
// ------------------------------------------
// the callback URL we specified earlier when we were creating 
// the app on oneaccount
// https://mywebsite.com/oneaccountauth
app.post('/oneaccountauth', (req, res) => {
  // in addition to requested data `userId` and `uuid` are sent 
  // (uuid can be used to compare with the one onAuthManual function gets)
  // all send using camelCase representation of the title. e.g.:
  // First Name can be accessed with firstName key, 
  // Email with email etc...
  let { uuid, userId, email, firstName } = req.body;
  if (!uuid) return res.json({"success": false});
  redis.set(uuid, {uuid, userId, firstName}, "EX", 60);
  // userId can be used to check if this is an exsisting user 
  // in your system or new
  return res.json({"success": true});
})
​
app.post('/authenticate', async (req, res) => {
  let { accessToken, uuid } = req.body;
  if (!uuid || !accessToken) return res.json({"success": false});
​
  let user = redis.get(uuid); 
  if (!user) return res.json({"success": false});
  redis.del(uuid);
  
  // this request is highly recommended to ensure the token is valid 
  // and data is not comming from malicious source
  try {
    let res = await axios
    .post('https://api.oneaccount.app/widget/verify', {uuid}, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `BEARER ${accessToken}`
      }
    })
    if (res.status !== 200 || !res.data || !res.data.success) {
      return res.json({"success": false})
    }
  } catch (err) {
    return res.json({"success": false})
  }
  
  // you should also set cookies or return a token to sign in the user
  return res.json({success: true, firstName: user.firstName})
​
})
// ------------------------------------------
​
app.use(express.static('public'))
​
app.get('/', function(request, response) {
  response.sendFile(__dirname + '/views/index.html');
})
​
const port = 3000
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
Front end:
Include the library SDK:
var el = document.createElement("script");
el.async = true;
el.defer = true;
el.src = "https://cdn.jsdelivr.net/npm/[email protected]${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/[email protected]<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) {
  var data = event.detail;
  const rawResponse = await fetch('authenticate', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  const result = await rawResponse.json()
  if (result.success) {
    window.location.href = "/user"
  }
});
Please reach out to our support team if there are any issues: [email protected] 
Tutorials - Previous
WordPress
Next - Tutorials
iOS (coming soon)
Last modified 1yr ago
Copy link
On this page
Backend:
Front end: