Skip to content

S
SkyIdAngularWithoutJQuery
Commit 7c9f0e70 authored by redwane mahjoubi's avatar redwane mahjoubi
Browse files
Options

Update README.md

parent 8115fe9b
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 139 deletions
README.md
View file @ 7c9f0e70
## Installation ## Installation
### `1. Install dependencies :` ### `1. Install dependencies :`
** ~ For Windows run : **
npm i skyid-sdk-web-win
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
** ~ For Linux/Mac run : **
* ~ run :
npm i skyid-sdk-web-lx npm install skyid-sdk-web
npm install jquery // version 3.7.0
### `2.In your components import the Jquery and the SDK Web :` ### `2.In your components import the Jquery and the SDK Web :`
<script>
import $ from 'jquery'; //@ts-ignore
import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_v1.js' file import * as $ from 'jquery' ;
//@ts-ignore
import * as skyid_imp from '../assets/skyid_impl_v1.js'; //Location of 'skyid_impl_v1.js' file
... ...
</script>
### `3.copy the code bellow inside the useEffect(){...} lifecycle Hook:` ### `3.copy the code bellow inside the ngAfterView(){...} lifecycle Hook:`
useEffect(()=>{
skyid_imp.initViewComponent() ngAfterViewInit(): void {
// init SDK skyid_imp.initViewComponent()
skyid_imp.skyid_fa_remote_sdk_initialization() // init SDK
skyid_imp.skyid_fa_remote_sdk_initialization()
$( document ).ready(function() { $( document ).ready(function() {
$("#skyid_fa_document_container").show(500); $("#skyid_fa_document_container").show(500);
$( "#skyid_da_smart_ocr_button" ).click(function() { $( "#skyid_da_smart_ocr_button" ).click(function() {
skyid_imp.skyid_fa_auth_request_smart_ocr(); skyid_imp.skyid_fa_auth_request_smart_ocr();
$("#skyid_da_smart_ocr_button").prop('disabled', true); $("#skyid_da_smart_ocr_button").prop('disabled', true);
$("#skyid_da_smart_ocr_button").html("extraction d'information en cours ..."); $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
}); });
$( "#skyid_fa_next" ).click(function() { $( "#skyid_fa_next" ).click(function() {
$( "#skyid_fa_start_button" ).show() $( "#skyid_fa_start_button" ).show()
skyid_imp.show_matching_step(); skyid_imp.show_matching_step();
});
$( "#skyid_fa_start_button" ).click(function() {
// start SDK face analysis
skyid_imp.start_face_scan() ;
$( "#skyid_fa_start_button" ).hide();
$( "#msg" ).html("Scanne de visage en cours ....");
});
}); });
$( "#skyid_fa_start_button" ).click(function() {
// start SDK face analysis
skyid_imp.start_face_scan() ;
$( "#skyid_fa_start_button" ).hide();
$( "#msg" ).html("Scanne de visage en cours ....");
});
});
const fileSelector = document.getElementById('file-upload'); const fileSelector = document.getElementById('file-upload');
fileSelector.addEventListener('change', (event) => { fileSelector!.addEventListener('change', (event) => {
const myimage = event.target.files[0]; if(event.target instanceof HTMLInputElement) {
skyid_imp.readImage(myimage); const myimage: File | null = event.target.files ? event.target.files[0] : null;
}); if(myimage) {
skyid_imp.readImage(myimage);
}
}
});
// demo call // demo call
skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679") skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679")
},[]) }
### `4.Copy the HTML code :` ### `4.Copy the HTML code :`
...@@ -85,116 +96,117 @@ import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_ ...@@ -85,116 +96,117 @@ import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_
</div> </div>
</div> </div>
### `5.Add CSS style:` ### `5.Add CSS style:`
<style>
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
background-color: #f5f5f5; background-color: #f5f5f5;
display: table; display: table;
} }
footer { footer {
background-color: black; background-color: black;
font-size:12px; font-size:12px;
display: table-row; display: table-row;
padding: 20px; padding: 20px;
height: 0; height: 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.column { .column {
float: left; float: left;
padding: 20px; padding: 20px;
} }
/* Clear floats after the columns */ /* Clear floats after the columns */
.row:after { .row:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
.button-36 {
.button-36 { background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%); border-radius: 8px;
border-radius: 8px; border-style: none;
border-style: none; box-sizing: border-box;
box-sizing: border-box; color: #FFFFFF;
color: #FFFFFF; cursor: pointer;
cursor: pointer; flex-shrink: 0;
flex-shrink: 0; font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; font-size: 16px;
font-size: 16px; font-weight: 500;
font-weight: 500; height: 4rem;
height: 4rem; padding: 0 1.6rem;
padding: 0 1.6rem; text-align: center;
text-align: center; text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px; transition: all .5s;
transition: all .5s; user-select: none;
user-select: none; -webkit-user-select: none;
-webkit-user-select: none; touch-action: manipulation;
touch-action: manipulation; }
}
.button-36:hover {
.button-36:hover { box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px; transition-duration: .1s;
transition-duration: .1s; }
}
@media (min-width: 768px) {
@media (min-width: 768px) { .button-36 {
.button-36 { padding: 0 2.6rem;
padding: 0 2.6rem; }
} }
}
input[type="file"] {
input[type="file"] { display: none;
display: none; }
}
.custom-file-upload {
.custom-file-upload { border: 1px solid #ccc;
border: 1px solid #ccc; background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%); border-radius: 8px;
border-radius: 8px; color: #FFFFFF;
color: #FFFFFF; flex-shrink: 0;
flex-shrink: 0; font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; display: inline-block;
display: inline-block; padding: 6px 12px;
padding: 6px 12px; cursor: pointer;
cursor: pointer; }
}
.custom-file-upload:hover {
.custom-file-upload:hover { box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px; transition-duration: .1s;
transition-duration: .1s; }
}
#skyid_fa_document_container{
#skyid_fa_document_container{ margin: auto;
margin: auto; width: 90%;
width: 90%; text-align: center;
text-align: center; }
} #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
#skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{ display: none;
display: none; }
} #extracted_feilds{
#extracted_feilds{ display:none;
display:none; border: 2px solid #000;
border: 2px solid #000; overflow: scroll;
overflow: scroll; }
} #liveness_frame{
#liveness_frame{ display: none;
display: none; text-align: center;
text-align: center; }
} #skyid_liveness{
#skyid_liveness{ display: flex;
display: flex; justify-content: center;
justify-content: center; }
}
</style>
# SkyidAngularDemo # SkyidAngularDemo
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment