Get client IP in Angular

There are 2 types of IP addresses associated with a computer connected to an internet – Private and Public IP

What is the difference between public and private IP address?

Private IP – Private IP address is the address used for identification of a device within a network. 

Public IP – Public IP address is the address that is assigned to a computer by your Internet Service Provider(ISP) to allow direct access to the Internet.

The devices residing outside of your local network cannot directly communicate via the private IP address but uses your router’s public IP address to communicate.

How to know Public IP in the Angular project?

Client Public IP can be accessed by making an API call to 3rd party services like ipify.org or ipinfo.io. Since this API will be issued from the client browser, you don’t have to worry about security failure as this call will not be flow through any of your server resources.

How to know Private IP in the Angular project?

with the introduction of WebRTC support in modern browsers like Chrome and Firefox,  it is possible to know Client Private IP. RTCPeerConnnection provided by webRTC can be used to retrieve the client IP using JavaScript.

WebRTC Details – https://webrtc.org/

In Angular, the same feature can be used to retrieve client IP. But the problem is where to place javascript related code? All sorts of errors will be thrown by the compiler If Javascript code related to WebRTC is placed in Typescript or in the template file. A good place to host this piece of code is inside index.html file where Angular App root details will be mentioned.

Refer my GitHub project to access the source code for this article. Below screenshot shows final output –

Github location – https://github.com/programmingwithnaveen/get-IP

Demo video – https://www.youtube.com/watch?v=MOW8LmO_TqY

 

 

 

 

 

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s