# Web SDK (Javascript)

## Requirements

A **desktop** browser with full **HTML5** support and access to a **webcam**.

**`** Due to the mobile web browsers restrictions, this SDK doesn't work on mobile devices **`**

* **Google Chrome  53+**
* **Microsoft Edge 12+**
* **Mozilla Firefox 42+**
* **Safari 11+ (Mac)**

![Example](/files/-Lp4PTWRVDfbvZ0tiP9z)

## Integration

The integration of this SDK is very straight forward.

1\) Inside any HTML page just import the Javascript library before the **\</body>** tag

```markup
<script src="https://api.andia.io/web/andiaSdk2.0.min.js"></script>
```

2\) Include the following HTML fragment, to add a button

```markup
<div id="containerAndia"></div>
<button id="andiaBtn" type="button"
            class="btnAndia"
            customerId="YOUR_CUSTOMER_API_KEY"
            face_id=""
            action="onboarding"
            callback="YOUR_CALLBACK_URL" >
     <div id="labelBtn">Onboard me</div>
</button>
```

{% hint style="info" %}
**`Parameters`**

**customerID** .    Your customer API\_KEY , **mandatory**  (we provide these credentials)

**face\_id**              **Mandatory** in the **Validation** process, this **face\_id** is returned in the **Onboarding** of a specific User. Then when a Selfie validation is required, this is the way to validate a user against her face\_id. This parameter is empty when we call an Onboarding a new user.

**callback           Mandatory:**    Your “callback URL”, with a unique ID to identify the user’s transaction in the respons&#x65;**.**

**action               Mandatory:**     **"onboarding"**     or      **"validate"**

```
onboarding   Perform a new user Selfie Onboarding and get the face_id of this new user.
validate     Perform a selfie validation, of an existing user (with an existing face_id), previuosly onboarded. Call this method on Password Recovery, validate transactions, or verify that the user is on front of the webcam.  
```

{% endhint %}

3\) Callback

To get the result of the Selfie **Validation** or the Selfie **Onboarding**, just implement a POST data endpoint.

> Response parameters&#x20;
>
> **success** .       Boolean, true if the Selfie was made successful
>
> **data**                A Form Data object with the following fields.
>
> Selfie OnBoarding Form Data Response

```javascript
 
    success: true,        //true if the Selfie is a real user 
    error_code: 0,        // 0 == no errors 
    error: "",            // error description in case of error
    user_id: "XXXXXXXX"   // face_id, store this ID on your DB an associate to 
                         // the user, to perform future selfie validations

```

{% tabs %}
{% tab title="Java" %}

```java
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestBody;

@RestController
public class AndiaController {

  @PostMapping("/onboarding")
  public void onboarding(@RequestBody MultiValueMap<String, String> values) {

    if(values.get("success").equals("true")){
        // Redirect to login page
    } else {
        // Redirect to signup page with error message
        // values.get("message")
    }
  }
}
```

{% endtab %}

{% tab title="ASP.NET (C#)" %}

```csharp
[Route("api/[controller]")]
public class AndiaController : Controller
{
    
    [HttpPost]
    public async Task<IActionResult> Onboarding([FromBody] Dictionary<string, string> values))
    {
        if (ModelState.IsValid)
            {
                try
                {
                    
                     if(values.GetValueOrDefault("success").Equals("true")){
                         // Redirect to login page
                     } else {
                         // Redirect to signup page with error message
                         // values.GetValueOrDefault("message")
                     }
                }
                catch (Exception e)
                {
                    return BadRequest(e);
                }
            }
            return BadRequest(ModelState);
    }
}
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
var express = require('express');
var app = express();
 
app.post('/onboarding', function (req, res) {
    if (req.body.success === "true") {
         // Redirect to login page
    } else {
         // Redirect to signup page with error message
         // req.body.message
    }
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   console.log("Example app listening at http://%s:%s", host, port)
})
```

{% endtab %}

{% tab title="Ruby" %}

```ruby
require 'rubygems'
require 'sinatra'

post '/onboarding' do
    if params.success == "true"
        #  Redirect to login page
    else 
        #  Redirect to signup page with error message
        #  params.message
    end
end
```

{% endtab %}

{% tab title="Python" %}

```python
from flask import Flask, redirect
 
app = Flask(__name__)
 
@app.route("/onboarding", methods = ['POST'])
def onboarding():
   if request.form['success'] == "true":
     #  Redirect to login page
   else:
     #  Redirect to signup page with error message
     #  request.form['message']
 
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8081)
```

{% endtab %}
{% endtabs %}

> Selfie Validation Form Data Response

```javascript
 
    success: true,  //true if the Selfie is a Match agains the given face_id
    error_code: 0,    // != 0 if there is an error
    error: "",        // error description if error_code != 0
    message: "It is a Match"       // description

```

{% tabs %}
{% tab title="Java" %}

```java
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestBody;

@RestController
public class AndiaController {

  @PostMapping("/validate")
  public void validate(@RequestBody MultiValueMap<String, String> values) {

    if(values.get("success").equals("true")){
        // Generate JWT and redirect to home page
    } else {
        // Redirect to login page with error message
        // values.get("message")
    }
  }
}
```

{% endtab %}

{% tab title="ASP.NET (C#)" %}

```csharp
[Route("api/[controller]")]
public class AndiaController : Controller
{
    
    [HttpPost]
    public ActionResult Validate([FromBody] Dictionary<string, string> values))
    {
        if (ModelState.IsValid)
            {
                try
                {
                    
                    if(values.GetValueOrDefault("success").Equals("true")){
                        // Generate JWT and redirect to home page
                    } else {
                        // Redirect to login page with error message
                        // values.GetValueOrDefault("message")
                    }
                }
                catch (Exception e)
                {
                    return BadRequest(e);
                }
            }
            return BadRequest(ModelState);
    }
}
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
var express = require('express');
var app = express();
 
app.post('/valiate', function (req, res) {
    if (req.body.success === "true") {
        // Generate JWT and redirect to home page
    } else {
        // Redirect to login page with error message
        // values.GetValueOrDefault("message")
    }
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   console.log("Example app listening at http://%s:%s", host, port)
})
```

{% endtab %}

{% tab title="Ruby" %}

```ruby
require 'rubygems'
require 'sinatra'

post '/validate' do
    if params.success == "true"
        #  Generate JWT and redirect to home page
    else 
        #  Redirect to login page with error message
        #  params.message
    end
end
```

{% endtab %}

{% tab title="Python" %}

```python
from flask import Flask, redirect
 
app = Flask(__name__)
 
@app.route("/onboarding", methods = ['POST'])
def onboarding():
   if request.form['success'] == "true":
     #  Generate JWT and redirect to home page
   else:
     #  Redirect to login page with error message
     #  request.form['message']
 
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8081)
```

{% endtab %}
{% endtabs %}


---

# 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://andia.gitbook.io/api/web-sdk-javascript.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.