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
1
const axios = require('axios')
2
const express = require('express')
3
const Redis = require('ioredis');
4
const app = express();
5
const redis = new Redis();
6
app.use(express.json());
7
8
// One account related part
9
// ------------------------------------------
10
// the callback URL we specified earlier when we were creating
11
// the app on oneaccount
12
// https://mywebsite.com/oneaccountauth
13
app.post('/oneaccountauth', (req, res) => {
14
// in addition to requested data `userId` and `uuid` are sent
15
// (uuid can be used to compare with the one onAuthManual function gets)
16
// all send using camelCase representation of the title. e.g.:
17
// First Name can be accessed with firstName key,
18
// Email with email etc...
19
let { uuid, userId, email, firstName } = req.body;
20
if (!uuid) return res.json({"success": false});
21
redis.set(uuid, {uuid, userId, firstName}, "EX", 60);
22
// userId can be used to check if this is an exsisting user
23
// in your system or new
24
return res.json({"success": true});
25
})
26
27
app.post('/authenticate', async (req, res) => {
28
let { accessToken, uuid } = req.body;
29
if (!uuid || !accessToken) return res.json({"success": false});
30
31
let user = redis.get(uuid);
32
if (!user) return res.json({"success": false});
33
redis.del(uuid);
34
35
// this request is highly recommended to ensure the token is valid
36
// and data is not comming from malicious source
37
try {
38
let res = await axios
39
.post('https://api.oneaccount.app/widget/verify', {uuid}, {
40
headers: {
41
'Content-Type': 'application/json',
42
'Authorization': `BEARER ${accessToken}`
43
}
44
})
45
if (res.status !== 200 || !res.data || !res.data.success) {
46
return res.json({"success": false})
47
}
48
} catch (err) {
49
return res.json({"success": false})
50
}
51
52
// you should also set cookies or return a token to sign in the user
53
return res.json({success: true, firstName: user.firstName})
54
55
})
56
// ------------------------------------------
57
58
app.use(express.static('public'))
59
60
app.get('/', function(request, response) {
61
response.sendFile(__dirname + '/views/index.html');
62
})
63
64
const port = 3000
65
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
Copied!
Front end:
Include the library SDK:
1
var el = document.createElement("script");
2
el.async = true;
3
el.defer = true;
4
el.src = "https://cdn.jsdelivr.net/npm/[email protected]${version}/dist/oneaccount.min.js";
5
document.body.appendChild(el);
Copied!
Or just include the script in your HTML (at the end of your body tag):
1
<script defer async src="https://cdn.jsdelivr.net/npm/[email protected]<version>/dist/oneaccount.min.js"></script>
Copied!
Initialize the library:
1
if (window.oneaccount) {
2
initOneaccount();
3
} else {
4
document.addEventListener("oneaccount-loaded", initOneaccount);
5
}
6
7
// init the library
8
function initOneaccount() {
9
window.oneaccount.init("your external id", {
10
// NOTE: Please check the Library options page for more customisations
11
iOSRedirectURL: "/user", // required
12
callbackURL: "/oneaccountauth", // required
13
});
14
}
Copied!
Add the button:
1
<!-- NOTE: the classes are important for the library to attach the click bindings -->
2
<button class="oneaccount-button oneaccount-show">Sign in/up using One account</button>
Copied!
Listen to an authentication event:
1
document.addEventListener("oneaccount-authenticated", function(event) {
2
var data = event.detail;
3
const rawResponse = await fetch('authenticate', {
4
method: 'POST',
5
headers: {
6
'Accept': 'application/json',
7
'Content-Type': 'application/json'
8
},
9
body: JSON.stringify(data)
10
})
11
const result = await rawResponse.json()
12
if (result.success) {
13
window.location.href = "/user"
14
}
15
});
Copied!
Last modified 2mo ago
Copy link