Vulos Documentation
  • Identity
    • Welcome to the Vulos Identity Documentation!
    • Quick Start
    • Organizations
    • Scopes and Claims
  • Reference
    • Identity JavaScript SDK
      • The Base Package
        • KYC
          • KycStatus
          • KycInstance
          • KycDetails
          • KycApi
        • Profile
          • UserReference
          • ProfileApi
        • Cache
        • Authentication
          • Application
          • BaseAuth
          • User
          • UserInfo
          • BaseApi
        • Organizations
          • Organization
          • OrganizationMembership
            • OrganizationMembershipWithMetadata
          • OrganizationRole
          • OrganizationApi
      • The Backend Auth Package
        • CodeVerifier
        • BackendAuth
      • The Frontend Auth Package
        • IFrameRefresh
        • StateVerifier
        • FrontendAuth
    • Organization API
      • Organizations
      • Memberships
        • Roles
    • Profile API
    • KYC API
Powered by GitBook
On this page
  • Creating the Application
  • Install the library
  • Setting up the OpenID flow
  • Further reading
  1. Identity

Quick Start

PreviousWelcome to the Vulos Identity Documentation!NextOrganizations

Last updated 3 years ago

Creating the Application

The API requests and the JavaScript SDK require a client ID and for some features a client secret, to obtain those you need to create an application using the .

You can do that by clicking on the "New Application" link in the left navigation bar and by filling in some details.

In the "Redirect URLs" field you need to specify the link of the callback URL that we will define later on, for now set it to http://localhost:8080/callback or http://localhost:8080/index.html if you want to implement the browser application flow.

And you need to add the scope, for more detailed information about the scopes, take a look at the Scopes and Claims.

Install the library

If you are familiar with the OpenID Connect protocol, you can also use any other OpenID library in any language that you want.

The issuer URL is: https://identity.vulos.io

The best way to interact with our API is to use one of our official libraries:

npm install @vulos/identity-node-sdk --save
npm install @vulos/identity-browser-sdk --save  

Add the following script tag to the HTML where you'll integrate Vulos Identity:

index.html
<script src="https://cdn.vulos.io/latest/identity.min.js"></script>

The Frontend Auth Package is exposed as VulosIdentity.Auth and The Base Package is exposed as VulosIdentity.Base in the global scope.

Setting up the OpenID flow

You need to create an application object that matches the application you just created in the dashboard.

index.js
import { Application, User } from "@vulos/identity-base" 
const application = new Application({
    id: "<paste your_client id here>",
    
    // if you made a browser application remove this property
    secret: "<paste your client secret here>",
    
    scope: "openid",
    redirectUrls: ["<your website's callback URL>"]
})
index.js
const { Application, User } = VulosIdentity.Base
const application = new Application({
    id: "<paste your_client id here>",
    
    // if you made a browser application remove this property
    secret: "<paste your client secret here>",
    
    scope: "openid",
    redirectUrls: ["<your website's callback URL>"]
})
index.js
import { BackendAuth } from "@vulos/identity-node-sdk"

const auth = application.createAuth(BackendAuth)
await auth.connect()

Then you need to create a route for the callback URL (in this example we are going to assume that you use express) and a route that redirects the user to the login / consent screen:

index.js
import express from "express"
const app = express()

// it is recommended that you generate a verifier per auth
// request and that you store this in a database or cache
// instead of storing it in a global variable
const verifier = auth.createVerifier()

app.get("/callback", async (req, res) => {
    const user = await auth.processCallback(verifier, req.)
    // you probably want to store this in a database instead
    return res.redirect("/action?tokens=" + JSON.stringify(user.save()))
})

app.get("/login", async (req, res) => {
    // you can also render this is a button instead of a redirect
    return res.redirect(await auth.createAuthUrl(verifier))
})

// this is an example endpoint that uses the api
// it will return a JSON response with the id of the user
app.get("/action", async (req, res) => {
    const user = new User(auth, JSON.parse(req.query['tokens']))
    const userInfo = await user.info()
    return res.json(userInfo.id())
})
index.js
import { FrontendAuth } from "@vulos/identity-browser-sdk"

const auth = application.createAuth(FrontendAuth)

Then you can create some code that uses local storage for state that authenticates the user and processes the callback parameters:

index.js
// a function that creates and stores the verifier in local storage
function createAndStoreVerifier() {
    const verifier = auth.createVerifier()
    localStorage.setItem('verifier', JSON.stringify(verifier))
    return verifier
}

// a function that loads and removes the verifier from local storage
function loadAndRemoveVerifier() {
    const json = localStorage.getItem('verifier')
    localStorage.removeItem('verifier')
    return JSON.parse(json) 
        // this part is here to obtain the
        // silent token refresh verifier
        || auth.createVerifier()
} 

// save the user to local storage
function saveUser(user) {
    localStorage.setItem('tokens', JSON.stringify(user.save()))
}

// a function that creates a user object from the saved tokens
function getUser() {
    const tokens = localStorage.getItem('tokens')
    return tokens && new User(auth, JSON.parse(tokens))
}

(async() => {
    await auth.connect()
    let user
    
    if (window.location.hash) {
        // there are parameters in the hash,
        // it's probably a callback request
        try {
            user = await auth.processCallback(
                loadAndRemoveVerifier(),
                 window.location.hash)
            saveUser(user)
        } catch {
            // we don't need to proceed, it's probably
            // a silent token refresh request if this fails
            return
        }
    }
    
    
    user = getUser()

     // the user isn't authenticated
    if (!user) {
        // redirect the user to the login / consent screen
        // you can also render this as a button
        document.location = await auth.createAuthUrl(createAndStoreVerifier())
    }
    
    // find an element with an id of: 'user-id'
    const userIdEl = document.getElementById('user-id')

    // get the id and set the 'user-id' element's text to the id
    const userInfo = await user.info()
    userIdEl.innerText = userInfo.id().toString()
})()

The index.html file for this example should contain the code:

index.html
<p>The user id is: <strong id="user-id"></strong></p>
<script src="index.js"></script>
index.js
const { FrontendAuth } = VulosIdentity.Auth

const auth = application.createAuth(FrontendAuth)

Then you can create some code that uses local storage for state that authenticates the user and processes the callback parameters:

index.js
// a function that creates and stores the verifier in local storage
function createAndStoreVerifier() {
    const verifier = auth.createVerifier()
    localStorage.setItem('verifier', JSON.stringify(verifier))
    return verifier
}

// a function that loads and removes the verifier from local storage
function loadAndRemoveVerifier() {
    const json = localStorage.getItem('verifier')
    localStorage.removeItem('verifier')
    return JSON.parse(json) 
        // this part is here to obtain the
        // silent token refresh verifier
        || auth.createVerifier()
} 

// save the user to local storage
function saveUser(user) {
    localStorage.setItem('tokens', JSON.stringify(user.save()))
}

// a function that creates a user object from the saved tokens
function getUser() {
    const tokens = localStorage.getItem('tokens')
    return tokens && new User(auth, JSON.parse(tokens))
}

(async() => {
    await auth.connect()
    let user
    
    if (window.location.hash) {
        // there are parameters in the hash,
        // it's probably a callback request
        try {
            user = await auth.processCallback(
                loadAndRemoveVerifier(),
                 window.location.hash)
            saveUser(user)
        } catch {
            // we don't need to proceed, it's probably
            // a silent token refresh request if this fails
            return
        }
    }
    
    
    user = getUser()

     // the user isn't authenticated
    if (!user) {
        // redirect the user to the login / consent screen
        // you can also render this as a button
        document.location = await auth.createAuthUrl(createAndStoreVerifier())
    }
    
    // find an element with an id of: 'user-id'
    const userIdEl = document.getElementById('user-id')

    // get the id and set the 'user-id' element's text to the id
    const userInfo = await user.info()
    userIdEl.innerText = userInfo.id().toString()
})()

Then you can add the following code to index.html:

index.html
<p>The user id is: <strong id="user-id"></strong></p>
<script src="index.js"></script>

Further reading

After you have a basic app up and running, you can add functionality based on your requirements by adding more scopes and accessing more of the API.

For information about some concepts used in Vulos Identity we suggest reading:

For documentation about the JavaScript SDK we suggest reading:

Organizations
Scopes and Claims
Identity JavaScript SDK
Vulos Identity dashboard
The Backend Auth Package
The Frontend Auth Package
openid