Azure-Samples / digital-twins-explorer

A code sample for visualizing Azure Digital Twins graphs as a web application to create, edit, view, and diagnose digital twins, models, and relationships.
MIT License
184 stars 119 forks source link

ADT Explorer gives error when used in Private Link Environment #197

Open idbanham opened 3 years ago

idbanham commented 3 years ago

My customer is trying to test out ADT behind a private endpoint, they've created a VM on the same VNET as the ADT Private Endpoint and installed ADT Explorer onto it. However when they run it they get the following error :

"Unexpected Token E in JSON at position 0" accurred while parsing the response body - Error occurred while trying to proxy to: localhost:3000/models?api-version=2010-10-31....

I've seen the StackOverflow article advising to allow pop-ups in the browser and that doesn't fix it for the customer. I've set up my own environment and can replicate the error, looking in the command prompt in my environment I see :

[HPM] Error occurred while trying to proxy request /models?api-version=2020-10-31&dependenciesFor=&includeModelDefinition=true from localhost:3000 to / (UNABLE_TO_VERIFY_LEAF_SIGNATURE) (https://nodejs.org/api/errors.html#errors_common_system_errors)

This seems to be certificate related, I've tried setting process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0'; in both of the .env files that I can find in the ADT Explorer directories but it still doesn't work. [Update - I've also tried some other Node settings to turn certificate/TLS checking off, but without success]

idbanham commented 3 years ago

I have found a work-around...

The first step was to see if I could connect to ADT via the CLI, I couldn't, but the error message was more friendly. That led to the fix for ADT Explorer:

Initially connecting to ADT with the CLI failed with the following error

C:\ADTExp\digital-twins-explorer-main\client\src>az dt twin query -n .api.uks.digitaltwins.azure.net -q "select * from digitaltwins"

Error "Certificate verification failed. This typically happens when using Azure CLI behind a proxy that intercepts traffic with a self-signed certificate. Please add this certificate to the trusted CA bundle. More info: https://docs.microsoft.com/cli/azure/use-cli-effectively#work-behind-a-proxy."

To fix this…. You need Google Chrome (or know where Developer Tools are in Edge)

In chrome on your private VM browse to https:// - you’ll get a 404. Now open developer tools and go into the security tab.

Click view Certificate – there’s three levels, for each:

On the details tab, click copy to file

Select Base64 encoded x509 (.cer)

Save

In the Azure CLI installation, find the following directory:

C:\Program Files (x86)\Microsoft SDKs\Azure\CLI2\Lib\site-packages\certifi\

There’s a cacert.pem file in there, open it up in notepad and append the three certs you downloaded to the file. Save it.

In CLI command do : set REQUESTS_CA_BUNDLE=C:\Program Files (x86)\Microsoft SDKs\Azure\CLI2\Lib\site-packages\certifi\cacert.pem

CLI connection to ADT will now work – e.g. something like : az dt twin query -n .api.uks.digitaltwins.azure.net -q "select * from digitaltwins"

To Get ADT Explorer working, copy the cacerts.pem file that was modified as part of the process for getting the CLI working into the ADT Explorer deployment and then (this is a windows VM) typing set NODE_EXTRA_CA_CERTS=c:\ADTExp\cacert.pem in the command prompt before running npm run start