In the previous section, we demonstrated how to create a session which returns a Session ID.
This Session ID is then used to build a client-side URL that launches the Yoti web client. The generated URL can be used in several ways:
- As a hyperlink on your website
- As a link shared securely with a user
- Embedded within an iFrame on your webpage
- Integrated using a WebView in your mobile app
- Displayed as an encoded QR code
https://age.yoti.com?sessionId=<sessionId>&sdkId=<sdkId>| URL Parameter | Description |
|---|---|
| sessionId | The ID returned in the response when you create a Yoti AVS session. |
| sdkId | The SDK ID for your application, provided by Yoti Hub. |
Once the Yoti web client has launched, it will take the user through the age verification flow. The user will be redirected to the specified callback URL on completion of one of the age verification methods.
User View
Iframe Implementation
The example below demonstrates the use of an iframe:
<iframe src="https://age.yoti.com?sessionId=<sessionId>&sdkId=<sdkId>" width="800" height="700" allow="camera" allow="publickey-credentials-get; publickey-credentials-create;" rel="noreferrer"></iframe>Please note: allow="camera" is required when the age estimation or document scan methods are used.
While it is possible to use this solution in an iFrame, using a new browser window will guarantee an optimal user experience.
WebView Implementation
The examples below show how to use the session within a WebView for mobile apps:
<View style={{ flex: 1 }}> <WebView source={{ uri: "https://age.yoti.com?sessionId=<sessionId>&sdkId=<sdkId>" }} style={{ flex: 1 }} allowsInlineMediaPlayback={true} mediaPlaybackRequiresUserAction={false} /></View>Specific permissions must also be enabled to allow camera access and provide an optimal experience.
<key>NSCameraUsageDescription</key><string>We need access to your camera to let you take photos and record video.</string>QR Display
A QR code provides an alternative method for launching the Yoti AVS session. You can encode the session URL as a QR code and display it on a screen for users to scan with their mobile devices, which opens the web client in their browser. This allows customers to complete age verification securely on their own devices.
Before displaying the QR code, you should implement authentication to ensure the user is logged in or otherwise uniquely identified. In addition, you can also use the reference_id field in the Session payload to associate the AVS session with your unique user ID. This helps you track the session and tie results back to the correct user.
Alternatively, you can proxy the Yoti AVS Session URL behind your own service, allowing you to attach an auth cookie or token. This approach reduces the risk of the Session URL being forwarded or reused by someone else.
Below are some example code snippets. You may also use other libraries to generate the QR code.
const QRCode = require('qrcode');const url = 'https://age.yoti.com?sessionId=<sessionId>&sdkId=<sdkId>';QRCode.toDataURL(url, (err, url) => { console.log(url); // Outputs: data:image/png;base64...});