β«Widget API
Introducing the Sesame Labs Widget and Widget API! In this section weβll cover off on how to deploy Widget and configure it via Widget API.
Letβs get right to it!
Sign-up for Community Hub today
Widget deployment
Our no-code & low-code approaches to development is embodied in Widget. Deployment onto any web property is as simple as adding a script to the <head> tag of your index.html
file:
<script
async
src="https://sesamelabs.xyz/api/static/scripts/sesameWidget.js"
data-sesame-id="YOUR_APP_ID"
></script>
Widget configuration
Once deployed, you can configure Widget via the API. Youβll find the configuration parameters via the window.Sesame
object on the client side
Required widget keys
PUBLIC_KEY - stored on client server (you)
PRIVATE_KEY - stored on vendor server (Sesame Labs)
How to get the keys?
Get in touch with us to obtain your keys
The client must path secure data in encrypted form. Every payload with sensitive data should be encrypted with PUBLIC_KEY
Methods available via window.Sesame
Widget API uses asymmetric cryptography to pass secure data from client to vendor.
One aspect to note when calling a window.Sesame
method. It may take some time to load, so add null safety to avoid errors.
Hereβs an example of calling a window.Sesame
method:
const isWidgetReady = () => typeof window !== 'undefined' && 'Sesame' in window
if (isWidgetReady()) {
// call API methods
}
1) Open/close
Property name - open/close
Action - open/close widget
Returns - void
Usage
window.Sesame.open()
window.Sesame.close()
2**) Hide/show**
Property name - hide
Action - hide the widget from page
<aside> π‘ Note: If the widget is hidden open/close
will not open the widget. need to call show()
firstly
</aside>
Returns - void
Usage
window.Sesame.hide()
window.Sesame.show()
3) Login
(π 0 - secure payload. This should be encrypted.)
Property name - login
Action - authenticated user into widget based on data from client web app
Returns - void
Usage
const authData = {
payload: 'VU7CJfh7jivtbeP7dlbPe5QkCRo3kRzuUJWiAu/vtmhF+kl9+s6d7p4XMx3wlLCPHMWMGEtQgs+oz1ePVehYgd6m+MXuKiGeBGjk7pPjlh/iQrjT7y/uhftuccZNG6H0LepW8kF2coQPu6QDtmA7qDOPkD02m2bI0LtShaCZ8M6xydM=',
publicKey: 'yGsboXRCQ/I1W9hLWP1cM1mRWxA5wyX0ShowXcj+V0k=',
nonce: 'PwZPaFup7uhgmq8HOoX+IZtDSpL66iau'
} - comes from client BE side
window.Sesame.login(authData)
How to get authData
Simply call receiverPublicKey
(PUBLIC_KEY is only available by contacting Sesame Labs)
import nacl from 'tweetnacl'
import naclUtil from 'tweetnacl-util'
const msgParams = {
walletAddress: '0x1234', // wallet address of the user to log in
nonce: 'any string', //signed nonce
}
// function call should be next
const aData = encrypt('PUBLIC_KEY', JSON.stringify(msgParams))
export function encrypt(receiverPublicKey: string, msgParams: string) {
const ephemeralKeyPair = nacl.box.keyPair()
const pubKeyUInt8Array = naclUtil.decodeBase64(receiverPublicKey)
const msgParamsUInt8Array = naclUtil.decodeUTF8(msgParams)
const nonce = nacl.randomBytes(nacl.box.nonceLength)
const encryptedMessage = nacl.box(
msgParamsUInt8Array,
nonce,
pubKeyUInt8Array,
ephemeralKeyPair.secretKey,
)
return {
payload: naclUtil.encodeBase64(encryptedMessage),
publicKey: naclUtil.encodeBase64(ephemeralKeyPair.publicKey),
nonce: naclUtil.encodeBase64(nonce),
}
}
4) trustLogin
Property name - trustLogin
Action - login user with current selected Ethereum wallet address
Returns - boolean
Usage
window.Sesame.trustLogin()
5) isLoggedIn
Property name - isLoggedIn
Action - check cookies validity. if not valid it will logout user from the widget automatically
Returns - boolean
window.Sesame.isLoggedIn()
Last updated