One Touch Identification

1. Add our Token SDK to the html header of your webpage.

<script src="https://sdk.citizen.is/sdk/sdk-token.js">

2. Create your Identity Token.

Required: 'access' - what personal attribute you want from the recipient.
[see dev docs here]

Optional: 'webIdentifyTokenCallback' - A callback to get the token object that the user has responded to.

Optional: 'showIdCardResponse' - Show the Citizen token as an id card in the ctznContainerTokenResponse container.

<script>

function createToken() {

let token = {
// how long will you store this token for? (GDPR)
'duration': 1,
'durationType': 'YEAR',
'tokenStatus': 'REQUESTED',
// access types include name, location and digital signature
'access': 20625,
// any additional meta data
'metaData': {
REQUESTER_LAT: '51.522651',
REQUESTER_LNG: '-0.085686'
},
// the token purpose
'purpose': 'Demo of Citizen one touch identification'
}
}

return (JSON.stringify(token))

</script>

3. Configure your identification control form.

Required: 'authorizationCitizen' - your entity public API key.

Optional: 'webIdentifyTokenCallback' - A callback to get the token object that the user has responded to.

Optional: 'showIdCardResponse' - Show the Citizen token as an id card in the ctznContainerTokenResponse container.

<script>

window.ctznIdentifyInit = function () {

let jsonToken = createToken()

CITIZENTOKEN.init({
authorizationCitizen: '2a56c3c7-2802-4666-a925-df65130efcea',
token: jsonToken,
showIdCardResponse: true, webIdentifyTokenCallback: (token) => {console.log('Token that was responded to: ', token}),
})
};

</script>

4. Tag the email elements with the Citizen class.

Add css classnames to each form element using the 'ctzn' tag notation.

Citizen needs an email adddress to identify an individual.

<div id="ctznContainerIdentify" > // email container

<input type="text" class="ctznInputEmail" id="yourFormId" > // form inputs

</div > // email container

5. Tag the container elements with the Citizen class.

Add css classnames to the three containers using the 'ctzn' tag notation.

a. email container - to hide on successful submission (required)

<div id="ctznContainerIdentify" >... // email container

b. success container - shown on successful submission (optional)

<div id="ctznContainerIdentifySubmitted" >... // success message container

c. Citizen token response - shown on customer approval (optional)

Note: to turn off the idcard response, set 'showIdCardResponse' to false in the ctznIdentifyInit function

<div id="ctznContainerTokenResponse" /> // customer id token container

6. Tag your submit button with 'ctznButtonWebIdentifySubmit'.

Citizen handles the form pre-submit action (Citizen account creation) seamlessly.

<input type="submit" class="ctznSigninButton ctznButtonWebIdentifySubmit"/>

Once clicked, your customer will be sent an email to onboard to the Citizen app.

7. Initialise the identify form.

<script>

// initialise it once page loaded
window.ctznIdentifyInit();

</script>