> For the complete documentation index, see [llms.txt](https://andia.gitbook.io/api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://andia.gitbook.io/api/web-sdk-javascript.md).

# 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 %}