Using Camera from WebView

The task is:

• find out whether/how it is possible to use (hardware) camera from the web control

Marcel means it would be possible, when we use HTTPS for communication between our server and mobile client. The question is to:

• find out whether is possible
• test it
• use certificates properly
• find out how we can use the “keystore from Windows”

So:

• 1. find out how to use the camera
  • HTTPS only?
• 2. use HTTPS ?
• 3. use certificates properly

• the HTTPS is implemented and can be used
  • my work is saved in special branches (see the following text)
• I wrote a document about using HTTPS with efc ERP:
  • https://docs.google.com/document/d/1mSJM13utIdbfc2HvGzOJXUl34SmSqvnplsa54T_-T9A/edit?usp=sharing
• currently (18.04.2023) :
  • I can leave my work “as is” (saved in branches and documented in the previously described document) and wait until Marcel will implement certificate handling in the Tomcat
  • Marcel (maybe) will implement a “switch” to have the possibility to use both (HTTP and HTTPS)

• I wrote a document about using HTTPS with efc ERP: https://docs.google.com/document/d/1mSJM13utIdbfc2HvGzOJXUl34SmSqvnplsa54T_-T9A/edit?usp=sharing

• to use camera from WebView all communication should be done over HTTPS
• to scan barcodes we can use a library for it
  • we chose zxing
    • see efc_client_mobile/build.gradle

      ...
                "@zxing/browser": "latest",
      	  "@zxing/library": "latest",
      	  "@zxing/ngx-scanner": "latest",

• to enable scanner the parameter scanner-enabled for component efc-field was implemented
• I've tested it in the file auth.component.html for field loginUsername:

  <efc-field [focus]="true" [(ident)]="loginUsername" label="login_username" tabindex="0" [scannerEnabled]="true"> </efc-field>

• for test purposes an “independent” component scanner-dialog-example was developed. Example:

  <scanner-dialog-example></scanner-dialog-example>

• my work is saved in two branches
  • feat/barcodereader
    • for project efc_client_mobile
  • feat/https
    • for projects
      • efc_server
      • efc_client

The following bar codes should be supported (sorted by priority):

• Code39
• EAN13
• DataMatrix
• QRCode
• PDF417
• Code128

See also the email from Klaus Gebauer “ClientMobile: Barcodes” (sent at 13.03.2023).

I found the following libraries:

• https://github.com/zxing-js/ngx-scanner
  • based on ZXing
  • supported bar codes are listed here: https://github.com/zxing/zxing
• https://www.npmjs.com/package/ngx-barcode-scanner
  • based on QuaggaJS

• To have the “.war” of client_mobile in Tomcat it should be built first
  • Open view “Gradle tasks”
    • Open project efc_tools
      • Open folder efc
        • Execute task build_client_mobile

• TODO
  • the ng-component efc-field is not yet “bug free”. There is a small CSS-problem with scanner symbol, which should be fixed.
  • see https://stackoverflow.com/questions/59783953/align-matsuffix-content-with-a-text-inside-mat-form-field-input
    • ask Torsten where / how to do it
  • clean
    • documentation/examples of Dialog:

• A very helpful tool to debug in Chrome is the “Developer Console”. To use it remotely on an Android device see: Is it possible to open developer tools console in Chrome on Android phone?
  • see also : Remote debug Android devices
  • to check devices in Chrome: chrome:/ /inspect/#devices ← (remove blank in the URL)

• Icons library used by efc_client_mobile: https://github.com/marella/material-icons.
• This is the Demo (with search functionality)

• Show Corners / Get coordinates of barcode
  • https://stackoverflow.com/questions/43034961/how-to-get-the-coordinates-of-qr-code-using-zxing
  • add the horizonal red line and yellow dots during codeReader.decodeFromVideoDevice
  • Add crop functionality to BrowserCodeReader

• On Eclipse project efc_client_mobile
  • Open context menu and 'Properties' in it
    • Open “Deployment”
      • Add one entry:
        • Source build/angular → Deploy path /
  • In the file proxy.conf.json
    • edit entry “target”: “http://PC-LS:8080/efcserver”,
      • to “target”: “https://PC-LS:8443/efcserver”,

• Let's Encrypt for intranet servers
  • https://security.stackexchange.com/questions/103524/lets-encrypt-for-intranet-websites
  • https://dev.to/michaeldscherr/lets-encrypt-ssl-certificate-via-dns-challenge-8dd
  • https://blog.heckel.io/2018/08/05/issuing-lets-encrypt-certificates-for-65000-internal-servers/

• Using WebView with HTTPS
  • Our MainActivity from efc_client_mobile_android project
  • https://developer.android.com/reference/android/webkit/WebViewClient
    • HTTPS should work with standard WebView (?)
  • Android WebView not loading an HTTPS URL
    • Proper solution (?)
  • https://gist.github.com/xtools-at/cf3eb1654d1162ef9a93c5354154344c
    • is it a workaround?

• Get angular-cli to ng serve over HTTPS
  • add parameters “sslKey”, “sslCert”, and “ssl” to “/efc_client_mobile/angular.json”
• SSL/TLS Configuration How-To (for Apache Tomcat 9.0)

Original: SSL/TLS Configuration How-To (for Apache Tomcat 9.0)

• It is important to note that configuring Tomcat to take advantage of secure sockets is usually only necessary when running it as a stand-alone web server.

• Certificate - “digital passport” of an internet address
  • Organization and some contact information
• This certificate is cryptographically signed by its owner
• For the certificate to work in the browsers without warnings, it needs to be signed by a trusted Certificate Authorities (CAs).
  • To obtain a signed certificate, you need to choose a CA and follow the instructions your chosen CA provides to obtain your certificate.
  • A range of CAs is available including some that offer certificates at no cost.
• Java provides a simple command-line tool keytool, which can easily create a “self-signed” Certificate.
• Self-signed Certificates not really guaranteed to be authentic at all, but can be useful for some testing scenarios (⇒ they are not suitable for any form of production use).

…

Tomcat currently operates only on keystores in following formats:

• JKS → standard Java format (can be manipulated by keytool)
• PKCS11 or PKCS12 → internet standard (can be manipulated via (among other things) OpenSSL and Microsoft's Key-Manager)

To create a keystore with keytool:

"%JAVA_HOME%\bin\keytool" -genkey -alias tomcat -keyalg RSA -keystore \path\to\my\keystore

Tomcat can use three different implementations of SSL:

• JSSE implementation provided as part of the Java runtime
• JSSE implementation that uses OpenSSL
• APR implementation, which uses the OpenSSL engine by default

…

The final step is to configure the Connector in the $CATALINA_BASE/conf/server.xml file, where $CATALINA_BASE represents the base directory for the Tomcat instance. An example <Connector> element for an SSL connector is included in the default server.xml file installed with Tomcat. To configure an SSL connector that uses JSSE, you will need to remove the comments and edit it so it looks something like this:

<!-- Define an SSL Coyote HTTP/1.1 Connector on port 8443 -->
<Connector
  protocol="org.apache.coyote.http11.Http11NioProtocol"
  port="8443" maxThreads="200"
  scheme="https" secure="true" SSLEnabled="true"
  keystoreFile="${user.home}/.keystore" keystorePass="changeit"
  clientAuth="false" sslProtocol="TLS"/>