Skip to content

V
vuejs-skyidentification
Commit e599aa7e authored by dtati's avatar dtati
Browse files
Options

first commit

parents
Pipeline #525 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 639 additions and 0 deletions
      .gitignore 0 → 100644
      View file @ e599aa7e
      .DS_Store
      node_modules
      /dist
      # local env files
      .env.local
      .env.*.local
      # Log files
      npm-debug.log*
      yarn-debug.log*
      yarn-error.log*
      pnpm-debug.log*
      # Editor directories and files
      .idea
      .vscode
      *.suo
      *.ntvs*
      *.njsproj
      *.sln
      *.sw?
      README.md 0 → 100644
      View file @ e599aa7e
      # skyintegrationvue3
      ## Project setup
      ```
      npm install
      ```
      ### Compiles and hot-reloads for development
      ```
      npm run serve
      ```
      ### Compiles and minifies for production
      ```
      npm run build
      ```
      ### Lints and fixes files
      ```
      npm run lint
      ```
      ## More Informations
      Please refere to our platform `https://platform.skyidentification.com/#/`
      babel.config.js 0 → 100644
      View file @ e599aa7e
      module.exports = {
      presets: [
      '@vue/cli-plugin-babel/preset'
      ]
      }
      jsconfig.json 0 → 100644
      View file @ e599aa7e
      {
      "compilerOptions": {
      "target": "es5",
      "module": "esnext",
      "baseUrl": "./",
      "moduleResolution": "node",
      "paths": {
      "@/*": [
      "src/*"
      ]
      },
      "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
      ]
      }
      }
      package-lock.json 0 → 100644
      View file @ e599aa7e
      This diff is collapsed.
      package.json 0 → 100644
      View file @ e599aa7e
      {
      "name": "skyintegrationvue3",
      "version": "0.1.0",
      "private": true,
      "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
      },
      "dependencies": {
      "axios": "^1.6.2",
      "core-js": "^3.8.3",
      "skyid-sdk-web": "^1.1.2",
      "vue": "^3.2.13",
      "vuex": "^4.1.0"
      },
      "devDependencies": {
      "@babel/core": "^7.12.16",
      "@babel/eslint-parser": "^7.12.16",
      "@vue/cli-plugin-babel": "~5.0.0",
      "@vue/cli-plugin-eslint": "~5.0.0",
      "@vue/cli-service": "~5.0.0",
      "eslint": "^7.32.0",
      "eslint-plugin-vue": "^8.0.3"
      },
      "eslintConfig": {
      "root": true,
      "env": {
      "node": true
      },
      "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
      ],
      "parserOptions": {
      "parser": "@babel/eslint-parser"
      },
      "rules": {}
      },
      "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead",
      "not ie 11"
      ]
      }
      public/index.html 0 → 100644
      View file @ e599aa7e
      <!DOCTYPE html>
      <html lang="">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
      <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript>
      <div id="app"></div>
      <!-- built files will be auto injected -->
      </body>
      </html>
      src/App.vue 0 → 100644
      View file @ e599aa7e
      <template>
      <img alt="Vue logo" src="./assets/IndatacoreIdentity.png" height="150px" style="margin-top: 1%;">
      <h1>It only takes one more click to discover Sky ID on the web channel.</h1>
      <br>
      <HelloWorld/>
      </template>
      <script>
      import HelloWorld from './components/HelloWorld.vue'
      export default {
      name: 'App',
      components: {
      HelloWorld
      }
      }
      </script>
      <style>
      #app {
      height: 100vh;
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      background-color: rgba(209, 209, 209, 0.799);
      }
      footer{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      }
      </style>
      src/components/HelloWorld.vue 0 → 100644
      View file @ e599aa7e
      <script>
      import Helper from "../config/helperConfig";
      import { mapGetters } from "vuex";
      import * as skyid from 'skyid-sdk-web';
      export default {
      name: 'HelloWorld',
      created () {
      this.$store.dispatch('login');
      },
      data() {
      return {
      imagePreview: null,
      binaryFile: null,
      isLoading: null,
      };
      },
      methods : {
      handleImageChange(event) {
      const selectedFile = event.target.files[0];
      if (selectedFile) {
      this.readImage(selectedFile);
      }
      },
      readImage(file) {
      this.isLoading = true;
      const reader = new FileReader();
      reader.onload = (e) => {
      this.imagePreview = e.target.result;
      };
      reader.readAsDataURL(file);
      this.binaryFile = file;
      this.$store.dispatch('skyid_extract_info_from_doc_request', {myImage : file, bearToken: this.bearToken}).then(() => {
      if(this.response_ocr){
      this.isLoading = false;
      this.init()
      }else {
      alert("Erreur");
      }
      });
      },
      startScanFace(){
      this.isLoading = true;
      skyid.skyid_fa_start_face_scan(this.skyidFaFaceScanEndCallback, this.processFaTimeOut);
      },
      skyidFaFaceScanEndCallback(frame){
      const face_image = Helper.setFileImage(frame);
      this.$store.dispatch('skyid_fa_check_liveness_request', {myImage : face_image, bearToken: this.bearToken}).then(() => {
      if(this.response_liveness.response_data.face_class == "Real" && this.response_liveness.status_code == "000"){
      skyid.skyid_fa_start_face_scan(this.skyid_fa_face_scan_end_callbackfacematching, this.processFaTimeOut);
      } else {
      alert("Erreur");
      this.isLoading = false;
      }
      });
      },
      skyid_fa_face_scan_end_callbackfacematching(skyid_fa_face_scan_end_callbackfacematching){
      const face_image = Helper.setFileImage(skyid_fa_face_scan_end_callbackfacematching);
      this.$store.dispatch('skyid_fa_face_scan_end_callbackfacematching', {docImage : this.binaryFile, face_image : face_image,guid : this.response_liveness.response_data.document_uniqueName, bearToken: this.bearToken}).then(() => {
      skyid.skyid_fa_stop_webcam();
      this.isLoading = false;
      if(this.response_facematching.sky_face_match_decision_label == "accepted"){
      alert("Face matching réussi");
      }else{
      alert("Face matching non réussi");
      }
      });
      },
      processFaTimeOut() {
      console.log("process_fa_timeOut ");
      this.isLoading = false;
      },
      init(){
      let skyid_liveness = document.getElementById('skyid_liveness');
      skyid_liveness.innerHTML = skyid.skyid_component;
      skyid.skyid_fa_setup_sdk();
      }
      },
      computed:{
      ...mapGetters(['bearToken', 'response_ocr', 'response_liveness', 'parameters_web_sdk', 'response_facematching']),
      },
      mounted (){
      skyid.message_variables.skyid_fa_sdk_access_error_message = "Votre token n'est pas valide";
      skyid.message_variables.skyid_fa_sdk_loading_error_message = "Error lors de chargement des modules";
      skyid.message_variables.skyid_fa_sdk_network_error_message = "Error de connexion au serveur, merci de verifier votre connexion internet";
      skyid.message_variables.skyid_fa_sdk_camera_error_message = "Impossible de demmarer votre camera, merci de verifier que votre camera et bien actif";
      skyid.message_variables.skyid_fa_face_start_message = "SVP positionner votre visage au centre sans rotation. puis clique sur start.";
      skyid.message_variables.skyid_fa_face_loading_message = "Chargement des modules, Patietez SVP.";
      skyid.message_variables.skyid_fa_mul_face_warning_msg = "SVP representer un seul visage devant le camera.";
      }
      }
      </script>
      <template>
      <div class="wrapper">
      <h2 class="font-normal" style="
      margin-bottom: 50px;
      margin-top: 0px;
      text-align: center;
      ">Download your national card (CIN - recto )</h2>
      <input style="margin-top: 1%;" type="file" @change="handleImageChange" name="file" accept="image/*">
      <div id="skyid_liveness" style="justify-content: center; display: flex; margin-top: 1%;" ></div>
      <button class="smart_ocr_get_info" @click="startScanFace" v-if="response_ocr">Start Scan Face</button>
      <span v-if="isLoading" id="loaddataocr" class="loader"></span>
      <div style="text-align: center;" v-if="response_ocr">
      <div class="code-json">
      <pre class=" bg-indatacoregray">
      {{ response_ocr }}
      </pre>
      </div>
      </div>
      </div>
      </template>
      <!-- Add "scoped" attribute to limit CSS to this component only -->
      <style scoped>
      .wrapper{
      height: 100vh;
      background-color: rgba(209, 209, 209, 0.799);
      }
      input[type="file"] {
      position: relative;
      }
      input[type="file"]::file-selector-button {
      width: 136px;
      color: transparent;
      }
      /* Faked label styles and icon */
      input[type="file"]::before {
      position: absolute;
      pointer-events: none;
      top: 10px;
      left: 16px;
      height: 20px;
      width: 20px;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E");
      }
      input[type="file"]::after {
      position: absolute;
      pointer-events: none;
      top: 11px;
      left: 40px;
      color: #0964b0;
      content: "Upload File";
      }
      /* ------- From Step 1 ------- */
      /* file upload button */
      input[type="file"]::file-selector-button {
      border-radius: 4px;
      padding: 0 16px;
      height: 40px;
      cursor: pointer;
      background-color: white;
      border: 1px solid rgba(0, 0, 0, 0.16);
      box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
      margin-right: 16px;
      transition: background-color 200ms;
      }
      /* file upload button hover state */
      input[type="file"]::file-selector-button:hover {
      background-color: #f3f4f6;
      }
      /* file upload button active state */
      input[type="file"]::file-selector-button:active {
      background-color: #e5e7eb;
      }
      .smart_ocr_get_info{
      width: 200px;
      background-color: #4361ee;
      border-radius: 30pc;
      color: white;
      /* text-align: center; */
      height: 40px;
      margin: auto;
      cursor: pointer;
      /* justify-content: center; */
      text-align: center;
      display: flex;
      justify-content: center;
      margin-top: 20px;
      align-items: center;
      }
      .code-json{
      border: 2px dashed #f0f2f5;
      padding: 1rem;
      height: 100%;
      pre{
      background-color: #f0f2f5;
      padding: 1rem;
      }
      }
      .loader {
      margin-top: 2%;
      margin-bottom: 2%;
      width: 48px;
      height: 48px;
      margin: auto;
      border: 5px solid #FFF;
      border-bottom-color: #4361ee;
      border-radius: 50%;
      display: block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(360deg);
      }
      }
      </style>
      \ No newline at end of file
      src/config/helperConfig.js 0 → 100644
      View file @ e599aa7e
      export default {
      // information sent after creation of applicationId by mail
      API_url : "***",
      OCR_url : "***",
      OCR_url_status : "***",
      LIVENESS_url : "***",
      FACE_MATCHING_url : "***",
      SKYID_FA_SDK_PARAMS_url : "***",
      Recover_Face_Matching_Result_URL: "***",
      institution_id : "***",
      skyid_fa_sdk_user : "***",
      skyid_fa_sdk_password : "***",
      skyid_fa_sdk_token : "***",
      skyid_fa_sdk_appId : "***",
      setFileImage(my_selfie_canvas) {
      console.log(my_selfie_canvas)
      const canvas_bin = this.skyid_fa_canvas2binary(my_selfie_canvas);
      return new File([canvas_bin], "skyid_fa_selected_frame.jpg", { type: "application/octet-stream" })
      },
      skyid_fa_canvas2binary(req_canvas) {
      let skyid_fa_canvas_data = req_canvas.toDataURL('image/jpeg', 1.0);
      skyid_fa_canvas_data = skyid_fa_canvas_data.replace('data:image/jpeg;base64,', '');
      return this.skyid_fa_base64ToArrayBuffer(skyid_fa_canvas_data)
      },
      skyid_fa_base64ToArrayBuffer(base64) {
      const binary_string = window.atob(base64);
      const len = binary_string.length;
      var bytes = new Uint8Array(len);
      for (var i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
      }
      return bytes.buffer;
      }
      }
      \ No newline at end of file
      src/main.js 0 → 100644
      View file @ e599aa7e
      import { createApp } from 'vue'
      import App from './App.vue'
      import store from './store';
      const app = createApp(App);
      app.use(store);
      app.mount('#app');
      src/store/index.js 0 → 100644
      View file @ e599aa7e
      import { createStore } from 'vuex';
      import axios from "axios";
      import Helper from "../config/helperConfig";
      import * as skyid from 'skyid-sdk-web';
      export default createStore({
      state() {
      return {
      response_data: null,
      bearToken: null,
      response_ocr: null,
      response_liveness: null,
      response_facematching: null,
      parameters_web_sdk: null,
      };
      },
      mutations: {
      SET_REPONSE_DATA(state, response_data) {
      state.response_data = response_data;
      },
      SET_BEARTOKEN(state, bearToken) {
      state.bearToken = bearToken;
      },
      SET_RESPONSE_OCR(state, response_ocr) {
      state.response_ocr = response_ocr;
      },
      SET_RESPONSE_LIVENESS(state, response_liveness) {
      state.response_liveness = response_liveness;
      },
      SET_PARAMETERS_WEBSDK(state, parameters_web_sdk) {
      state.parameters_web_sdk = parameters_web_sdk;
      },
      SET_FACEMATCHING(state, response_facematching) {
      state.response_facematching = response_facematching;
      }
      },
      actions: {
      login({ commit, dispatch}) {
      const formData = new FormData()
      formData.append("username", Helper.skyid_fa_sdk_user);
      formData.append("password", Helper.skyid_fa_sdk_password);
      return new Promise((resolve, reject) => {
      axios.post(Helper.API_url, formData, {
      headers: {
      'Content-Type': 'multipart/form-data',
      }
      })
      .then(response => {
      // traiter la réponse
      const response_data = response.data;
      commit('SET_REPONSE_DATA', response_data);
      commit('SET_BEARTOKEN', response_data.response_data.access_token);
      resolve(response);
      return dispatch('get_parameters_web_sdk', { bearToken: response_data.response_data.access_token });
      })
      .catch(error => {
      // traiter l'erreur
      reject(error);
      console.log(error)
      });
      });
      },
      get_parameters_web_sdk({ commit }, payload) {
      const { bearToken } = payload;
      const formData = new FormData()
      formData.append("token", Helper.skyid_fa_sdk_token);
      formData.append("application_id", Helper.skyid_fa_sdk_appId);
      return new Promise((resolve, reject) => {
      axios.post(Helper.SKYID_FA_SDK_PARAMS_url, formData, {
      headers: {
      Authorization: `Bearer ${bearToken}`,
      'Content-Type': 'multipart/form-data',
      }
      })
      .then(response => {
      // traiter la réponse
      const response_data = response.data;
      commit('SET_PARAMETERS_WEBSDK', response_data.response_data);
      skyid.skyid_fa_init_sdk(response_data.response_data);
      resolve(response);
      })
      .catch(error => {
      // traiter l'erreur
      reject(error);
      console.log(error)
      });
      });
      },
      skyid_extract_info_from_doc_request({ commit }, payload){
      const { myImage, bearToken } = payload;
      const formData = new FormData()
      formData.append("token", Helper.skyid_fa_sdk_token);
      formData.append("document", myImage);
      formData.append('institution_id',"**");
      formData.append('application_id', Helper.skyid_fa_sdk_appId);
      formData.append('channel_id',"**");
      formData.append('service_id',"**");
      formData.append('sub_service_id',"***");
      formData.append("request_data",'{"doc_type":"***"}');
      return new Promise((resolve, reject) => {
      axios.post(Helper.OCR_url, formData, {
      headers: {
      Authorization: `Bearer ${bearToken}`,
      'Content-Type': 'multipart/form-data',
      }
      })
      .then(response => {
      // traiter la réponse
      const response_ocr = response;
      commit('SET_RESPONSE_OCR', response_ocr.data);
      resolve(response);
      })
      .catch(error => {
      // traiter l'erreur
      reject(error);
      console.log(error)
      });
      });
      },
      skyid_fa_check_liveness_request({ commit }, payload){
      const { myImage, bearToken } = payload;
      const formData = new FormData()
      formData.append("selfie",myImage);
      return new Promise((resolve, reject) => {
      axios.post(Helper.LIVENESS_url, formData, {
      headers: {
      Authorization: `Bearer ${bearToken}`,
      'Content-Type': 'multipart/form-data',
      }
      })
      .then(response => {
      // traiter la réponse
      const response_ocr = response;
      commit('SET_RESPONSE_LIVENESS', response_ocr.data);
      resolve(response);
      })
      .catch(error => {
      // traiter l'erreur
      reject(error);
      console.log(error)
      });
      });
      },
      skyid_fa_face_scan_end_callbackfacematching({ commit }, payload){
      const { docImage, face_image, guid,bearToken } = payload;
      const formData = new FormData()
      formData.append("doc_1_1", docImage);
      formData.append("slf_1", face_image);
      formData.append('guid', guid);
      formData.append("token", Helper.skyid_fa_sdk_token);
      formData.append("application_id", Helper.skyid_fa_sdk_appId);
      return new Promise((resolve, reject) => {
      axios.post(Helper.FACE_MATCHING_url, formData, {
      headers: {
      Authorization: `Bearer ${bearToken}`,
      'Content-Type': 'multipart/form-data',
      }
      })
      .then(response => {
      // traiter la réponse
      const response_facematching = response;
      commit('SET_FACEMATCHING', response_facematching.data);
      resolve(response);
      })
      .catch(error => {
      // traiter l'erreur
      reject(error);
      console.log(error)
      });
      });
      }
      },
      getters: {
      response_data(state) {
      return state.response_data;
      },
      bearToken(state) {
      return state.bearToken;
      },
      response_ocr(state) {
      return state.response_ocr;
      },
      parameters_web_sdk(state){
      return state.parameters_web_sdk;
      },
      response_liveness(state) {
      return state.response_liveness;
      },
      response_facematching(state) {
      return state.response_facematching;
      }
      },
      });
      vue.config.js 0 → 100644
      View file @ e599aa7e
      const { defineConfig } = require('@vue/cli-service')
      module.exports = defineConfig({
      transpileDependencies: true
      })
      vueJs SkyId.zip 0 → 100644
      View file @ e599aa7e
      File added
      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