# Web SDK

{% hint style="danger" %}

## IMPORTANT NOTE

For the security of your application, you must make sure to send the IP address of the end user in all requests. To do this, you need to add X-Vfk-Forwarded-For header parameter in all requests.

You should send **"/access-token"** request to API domain only from your backend.

The **ServerKey** value for **"X-Vfk-Server-Key"** header is unique to your application in VerifyKit and used as both an identifier and a security measure. For this reason, you have to use your **ServerKey** token in backend integration. You can not use **ServerKey** on your client side.
{% endhint %}

## Trusted Domain <a href="#trusted-domain" id="trusted-domain"></a>

Web SDK works with an iframe structure that handles user authentication and returns session identification number on successful verification. Before using the Web-SDK, customers should whitelist their site's domain by creating a web app and registering their domain as a **"trusted domain"** on [VerifyKit Dashboard](https://dashboard.verifykit.com/).

### Token <a href="#token" id="token"></a>

Before each authentication, developers should get a unique and one-time authentication token in order to initialize sdk script. By sending the request in example to the "/access-token" endpoint of API domain, you can get the token value that you will use to integrate necessary iframe for Web-SDK.

#### Step 1: Fetch Token

{% tabs %}
{% tab title="cURL Request" %}

```
curl --request GET 'https://api.verifykit.com/v1.0/access-token'  --header 'X-Vfk-Server-Key: YOUR-SERVER-KEY'  --header 'X-Vfk-Forwarded-For: END-USER-IP-ADDRESS'  --header 'Content-Type: application/json'
```

{% endtab %}

{% tab title="cURL Response" %}

```
{
  "meta": {
        "requestId": "172-31-36-21314",      
        "httpStatusCode": 200  
  },  
  "result": {
        "accessToken": "1239421d9123f7794eba5f67c31231f8c52example982b8d6e6d16354a02ef",      
        "timeout": "2021-01-12 00:00:00"  
  }
 }
```

{% endtab %}

{% tab title="PHP" %}

```php
$vfk = new VerifyKitVerifyKit($serverKey, $clientIp);
/** @var VerifyKitEntityAccessToken 
$result */$result = $vfk->getWebAccessToken();
if ($result->isSuccess()) {
    echo "Access Token : " . $result->getAccessToken() .
            ", Timeout : " . $result->getTimeout()->format('Y-m-d H:i:s') . PHP_EOL;
} else {
    echo "Error message : " . $result->getErrorMessage() . ", error code : " . $result->getErrorCode() . PHP_EOL;
}
```

{% endtab %}
{% endtabs %}

## Iframe Integration <a href="#iframe-integration" id="iframe-integration"></a>

After successfully fetching the token string from "/access-token" response, it is needed to implement the VerifyKit iframe into your website in order to initialize Web-SDK.

There are two query parameters for the script source when requesting script.js from our widget domain.

`lang` Language of the website. Default value is 'en' (English). You can set the language of the Web-SDK screens. This parameter is not required.

`token` String that is received from "/access-token" request. This parameter is required.

#### Step 2: Iframe Integration

{% code title="HTML" %}

```html
<div id="verifykit_iframe"></div>
<script type="text/javascript" src="https://widget.verifykit.com/v3.0/script.js?lang={languageShortCode}&token={token}"></script>
```

{% endcode %}

## Initialize <a href="#initialize" id="initialize"></a>

After inserting the code block above, a callback method (cbMethod) should be created on the parent page which should use the sessionId parameter that the identification value will be assigned when the verification successfully completes. This parameter should be stored and will be used to fetch client detail from backend to backend api request.

After including the given code and creating the callback method, "initVerifyKit(cbMethod)" method can be assigned to any login mechanism website owner prefers. initVerifyKit method will initialize the iframe and set the callback method to the listener of the verification process.

When user successfully authenticates with VerifyKit, user defined cbMethod will be triggered within the sdk scripts, running the intended business flow after the successful verification.

#### Step 3: Initialize and fetch session id

{% code title="JavaScript" %}

```javascript
let cbMethod = function(){
 console.log('Session id : ' + sessionId);
}
initVerifyKit(cbMethod);
```

{% endcode %}

## Backend Integration <a href="#backend-integration" id="backend-integration"></a>

When the verification is complete, in order to get information of the verified user, you should integrate with VerifyKit Rest API. After receiving the sessionID variable from the Web SDK, you can fetch your client's data, such as phone numbers , from VerifyKit Rest API service.

This integration requires a **ServerKey** token that is unique to your application in VerifyKit and used as both an identifier and a security measure. For this reason, you have to use your **ServerKey** token in backend integration. You can not use **ServerKey** on your client-side.

For further info on how to integrate this part please click [here.](https://docs.verifykit.com/start-to-verify/rest-api#last-step-complete-validation)

{% hint style="info" %}
**Need some help?**

We all need a little help sometimes. If you have any question or request, feel free to [**create an issue**](https://github.com/verifykit/verifykit-sdk-php/issues).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verifykit.com/start-to-verify/web-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.