The ESP32 and ESP8266 microcontrollers are powerful.
Using their built-in features, these microcontrollers can wirelessly operate robotics, motors, or sensors from simple web applications. However, if you decide you want to put your inventions on the Internet so you and your friends can securely use these creations, it can be difficult. This is the reason that many IOT developers have started using ngrok to put their ESP32 project on the Internet.
The ngrok tunneling software provides an easy way to create and control tunnels from a computer on one LAN that are accessible to computers on other LANs anywhere on the internet.
If you are already familiar with ESP32 programming, skip to the section about using ngrok called “Put your Project on the Internet”
Getting Started with your ESP32 & ngrok
Prerequisites
- ESP32 or ESP8266, any microcontroller that has a web page
- Arduino IDE
- ngrok and an authentication token
- computer to host ngrok
- Internet connection
- wireless network
Setting up your ESP32
For this project, I am using a simple web server from the project below. I found this article easy to follow, and the source code was very clean; but, you can use any ESP32 program that creates a web server on your local network
https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
I loaded up the source code in Arduino IDE and deployed this project onto my ESP32. This source code displays the IP address of my ESP32 on the serial console.
Now, if everything worked correctly, I should be able to open a web browser, and view the web page from my local network.
Remember the IP address that your ESP32 is using.
Now we have a web server serving a web page from our ESP32 microcontroller. Anyone on your local network can browse this web page and see this Magical creation.
Install and Configure ngrok
- Signup for an ngrok account: https://dashboard.ngrok.com/signup
- Download ngrok: https://ngrok.com/download
- Install your Authtoken
To use ngrok, you do need to configure an Authtoken, so once you unzip your ngrok agent, we need to register this Agent with the ngrok Cloud.
Copy and paste the command from the ngrok Dashboard into your Terminal window, like shown below:
Put your Project on the Internet
Before you can put your ESP32 on the Internet, you do need to know the IP address assigned to your ESP32. Earlier in the tutorial we noted where you can get the IP address from the Arduino IDE, or if you know how to get the IP address of your ESP32 from your Router, you need to do that now.
Run this command to put your ESP32 on the Internet.
ngrok http 192.168.1.1:80For ngrok, if you have a Free account, you will get a randomly generated address every time you stop and restart ngrok. Your connection will stay active for several hours, and you can turn off the connection anytime by stopping the ngrok Agent.
Alternatively, with a Pro account, you can specify an subdomain to have a easy to remember url every time you start ngrok:
ngrok http 192.168.8.142:80 --subdomain randomtutorials
Congratulations! You can access your ESP32 from anywhere on the Internet using ngrok. If you see in your Terminal windows, the public address that anyone can use to see your project is shown below.
Below is a screenshot of my Macbook Pro connecting to ngrok and displaying my ESP32 project with a Free ngrok account.
Add authentication to your ESP32
Now you don’t want strangers turning on and off your devices. You should add some security. If you are new to authentication, you can use HTTP Basic Authentication to protect your ESP32 server with a single option:
ngrok http 80 --basic-auth="user:yourCleverPasswordHere"For a more advanced option, with a Pro ngrok account, you can use Google as an Identity Provider instead:
ngrok http 80 --oauth=google –-oauth-allow-email=yourgmailNot only can ngrok tunnel the traffic, it can also do authentication for you.
Architecture
ngrok makes it possible to put any web application on the Internet, and each ngrok agent can connect up to 20 devices, so you can run many projects on a single ngrok Agent. Here's what it looks like in practice:
Next Steps for ESP32 and Security
As we build out our app and what we control with it, we'll have to secure our system better and more reliably. Luckily, with ngrok we can add more components to protect ourselves and our systems. Beyond the Basic Auth and Google, in an enterprise environment, we could plug into our Identity Provider - such as Active Directory, Okta, or others - and layer on IP restrictions to block or allow IPs to refine access as we need.
Or what if.. we used ngrok without an agent?
ngrok recently released a library which can make it possible to put your project on the Internet without requiring an ngrok Agent here.
https://github.com/ngrok/ngrok-go.
So, stay tuned, in the near future it will be possible to develop a ESP32 application that connects directly to the Internet via ngrok, and no computer will be required.