Skip to content

Web SDK PoC

In order to make a fast PoC you can copy and past the following code. We assume that the fast PoC will be a vanilla HTML/JavaScript page. You will need the trial token that you can find on the Credentials section of the Dashboard

1. Example CSS

The following code is not mandatory, it's just to align all the divs in this fast demo/PoC

Copy and paste the following code on the of your web page.

<style type="text/css">
  .info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Nunito", sans-serif;
    padding: 1rem;
  }
</style>

2. Web SDK PoC Demo

In the following code you can find an example of the all available documents on the Alice Onboarding process.

<body>
<!--Import the Alice SDK Web CSS styles -->
<link
    rel="stylesheet"
    href="https://unpkg.com/aliceonboarding@6.5.1/dist/aliceonboarding.css"
/> 
<!--Import the Alice SDK WEB library-->
<script src="https://unpkg.com/aliceonboarding@6.5.1/dist/aliceonboarding.min.js"/></script>
<script>

    //The following code will configure your Onboarding

    //Add your trial token -> you can find it in the Credentials section of your Dashboard
    let trialToken = "";

    //Is mandatory to use an email in order to identify your user in this fast POC (Trial Authentication requirement)
    let email = "yourexampleemail@example.com";

    //UserInfo will contain the email previously created.
    let userInfo = new aliceonboarding.UserInfo(email);


    //The user will be able to choose between the available documents.
    let issuing_country = "SELECT";
    //You can set a specific nationality for the required document.
    //let issuing_country = "ESP";

    //Define your capture configuration parameters:
    let documentStageConfig = new aliceonboarding.DocumentStageConfig(
    aliceonboarding.DocumentCapturerType.CAMERA,
    true
    );


    //This class is only available in Trial Environments
    //In production or dev environments you must implement the Authentication based on Tokens.
    let authenticator = new aliceonboarding.TrialAuthenticator(
    trialToken,
    userInfo
    );


    //Initialize the Onboarding configuration
    let config = "";


    //This authenticator class 
    authenticator
    .execute()
    .then((response) => {
        let userToken = response;

        config = new aliceonboarding.OnboardingConfig()

        //You must define each of the steps needed to complete the Onboarding.
        //The user will have to complete all them in order to complete the Onboarding.

        //Token obtained with TrialAuthenticator class only in trial environment.
        .withUserToken(userToken)

        //The following Step will require a Selfie to the User.
        .withAddSelfieStage()

        //The following Step configures the automatic capture for an IdCard
        .withAddDocumentStage(
            aliceonboarding.DocumentType.IDCARD,
            issuing_country,
            documentStageConfig
        )

        //The following Step configures the automatic capture for a Residence Permit
        .withAddDocumentStage(
            aliceonboarding.DocumentType.RESIDENCEPERMIT,
            issuing_country,
            documentStageConfig
        ) 

        //The following Step configures the automatic capture for a Driving License
        .withAddDocumentStage(
            aliceonboarding.DocumentType.DRIVERLICENSE,
            issuing_country,
            documentStageConfig
        )

        //The following Step configures the automatic capture for any supported Passport.
        .withAddDocumentStage(
            aliceonboarding.DocumentType.PASSPORT,
            issuing_country,
            documentStageConfig
        )


        //Define the id from the component where the onboarding will be displayed.
        //In this example the div has "alice-onboarding-mount" as id.
        let onboarding = new aliceonboarding.Onboarding(
            "alice-onboarding-mount",
            config
        );

        //Run the Onboarding with the previously configure parameters.
        //The Onboarding could retrieve one of the three callbacks onSucess, onFailure or onCancel.
        onboarding.run(onSuccess, onFailure, onCancel);

    })

    .catch((error) => {
        console.log(error);
    });


    //Callbacks that allows you to define your web page behaviour
    function onSuccess(userInfo) {
    console.log("onSuccess: " + userInfo);
    }
    function onFailure(error) {
    console.log("onFailure: " + error);
    }
    function onCancel() {
    console.log("onCancel");
    }

</script>

<div class="info-container">
    <h1>Alice Demo Trial Example</h1>

    <div>
    If you don't have your Trial Token, please
    <a
        href="https://dashboard.alicebiometrics.com/#/credentials"
        target="_blank"
        >access to your Dashboard</a
    >
    and get it
    </div>
    <div>Under this Div the Alice Web Sdk should be displayed</div>
</div>

<!-- 
    IS mandatory to have an "empty div" with an id where the onboarding will be displayed
-->
<div id="alice-onboarding-mount"/>
</body>

<body>
<!--Import the Alice SDK Web CSS styles -->
<link
    rel="stylesheet"
    href="https://unpkg.com/aliceonboarding@7.0.0/dist/aliceonboarding.css"
/> 
<!--Import the Alice SDK WEB library-->
<script src="https://unpkg.com/aliceonboarding@7.0.0/dist/aliceonboarding.min.js"/></script>
<script>

    //The following code will configure your Onboarding

    //Add your trial token -> you can find it in the Credentials section of your Dashboard
    let trialToken = "";

    //Is mandatory to use an email in order to identify your user in this fast POC (Trial Authentication requirement)
    let email = "yourexampleemail@example.com";

    //UserInfo will contain the email previously created.
    let userInfo = new aliceonboarding.UserInfo(email);


    //The user will be able to choose between the available documents.
    let issuing_country = "SELECT";
    //You can set a specific nationality for the required document.
    //let issuing_country = "ESP";

    //Define your capture configuration parameters:
    let documentStageConfig = new aliceonboarding.DocumentStageConfig({
        capturerType: aliceonboarding.DocumentCapturerType.CAMERA,
        automaticCapture: true
    });


    //This class is only available in Trial Environments
    //In production or dev environments you must implement the Authentication based on Tokens.
    let authenticator = new aliceonboarding.TrialAuthenticator({ 
        sandboxToken: trialToken,
        userInfo: userInfo
    });


    //Initialize the Onboarding configuration
    let config = "";


    //This authenticator class 
    authenticator
    .execute()
    .then((response) => {
        let userToken = response;

        config = new aliceonboarding.OnboardingConfig()

        //You must define each of the steps needed to complete the Onboarding.
        //The user will have to complete all them in order to complete the Onboarding.

        //Token obtained with TrialAuthenticator class only in trial environment.
        .withUserToken(userToken)

        //The following Step will require a Selfie to the User.
        .withAddSelfieStage({})

        //The following Step configures the automatic capture for an IdCard
        .withAddDocumentStage({
            documentType: aliceonboarding.DocumentType.IDCARD,
            issuingCountry: issuing_country,
            documentStageConfig: documentStageConfig
        })

        //The following Step configures the automatic capture for a Residence Permit
        .withAddDocumentStage({
            documentType: aliceonboarding.DocumentType.RESIDENCEPERMIT,
            issuingCountry: issuing_country,
            documentStageConfig: documentStageConfig
        }) 

        //The following Step configures the automatic capture for a Driving License
        .withAddDocumentStage({
            documentType: aliceonboarding.DocumentType.DRIVERLICENSE,
            issuingCountry: issuing_country,
            documentStageConfig: documentStageConfig
        })

        //The following Step configures the automatic capture for any supported Passport.
        .withAddDocumentStage({
            documentType: aliceonboarding.DocumentType.PASSPORT,
            issuingCountry: issuing_country,
            documentStageConfig: documentStageConfig
        })


        //Define the id from the component where the onboarding will be displayed.
        //In this example the div has "alice-onboarding-mount" as id.
        let onboarding = new aliceonboarding.Onboarding(
        "alice-onboarding-mount",
        config
        );

        //Run the Onboarding with the previously configure parameters.
        //The Onboarding could retrieve one of the three callbacks onSucess, onFailure or onCancel.
        onboarding.run(onSuccess, onFailure, onCancel);

    })

    .catch((error) => {
        console.log(error);
    });


    //Callbacks that allows you to define your web page behaviour
    function onSuccess(userInfo) {
    console.log("onSuccess: " + userInfo);
    }
    function onFailure(error) {
    console.log("onFailure: " + error);
    }
    function onCancel() {
    console.log("onCancel");
    }

</script>

<div class="info-container">
    <h1>Alice Demo Trial Example</h1>

    <div>
    If you don't have your Trial Token, please
    <a
        href="https://dashboard.alicebiometrics.com/#/credentials"
        target="_blank"
        >access to your Dashboard</a
    >
    and get it
    </div>
    <div>Under this Div the Alice Web Sdk should be displayed</div>
</div>

<!-- 
    IS mandatory to have an "empty div" with an id where the onboarding will be displayed
-->
<div id="alice-onboarding-mount"/>
</body>