How to Get the Client Ip Address from Browser in Angular (Typescript)

How to get the client ip address from browser in angular (typescript)

Thank you very much, very good solution
I took it as a basis for my problem but I did not solve it because it gave me the public IP of the internet server.
For an internal network with DHCP, change the URL by the following:

  getIpCliente(): Observable<string> {
      return this.http.get('http://api.ipify.org/?format=jsonp&callback=JSONP_CALLBACK') // ...using post request '
      .map((res:Response) => {console.log('res ', res);
                              console.log('res.json() ', res.text());
                              //console.log('parseado ', JSON.parse(res.text()));
                              console.log('parseado  stringify ', JSON.stringify(res.text()));
                              let ipVar = res.text();
                              let num = ipVar.indexOf(":");
                              let num2 = ipVar.indexOf("\"});");
                              ipVar = ipVar.slice(num+2,num2);
                              console.log('ipVar -- ',ipVar);
                              return ipVar}); // ...and calling .json() on the response to return data
      //.catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
  }

I hope to serve you friends

Angular 5, Getting actual network IP Address

Try https://jsonip.com

this.http.get('https://jsonip.com/').subscribe(data => {
console.log(data);
});

Get local client ip address

I was able to modify what you have above and create an example StackBlitz that does not use jQuery or external libraries. You can follow that link to see the code running.

As mentioned in my comment above, you will need to make use of the module augmentation documentation on the TypeScript handbook in order to do this. To augment the window object to recognize the global properties that you are accessing, I added the following code:

declare global {
  interface Window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

It seems that the current version of the spec for the RTCPeerConnection has changed versus the example that you were using in the code above. Modifying that to conform to the current spec, I ended up with the following code:

import { Component, NgZone } from '@angular/core';

declare global {
  interface Window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  localIp = sessionStorage.getItem('LOCAL_IP');

  private ipRegex = new RegExp(/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/);

  constructor (private zone: NgZone) {
  }

  ngOnInit() {
    this.determineLocalIp();
  }

  private determineLocalIp() {
    window.RTCPeerConnection = this.getRTCPeerConnection();

    const pc = new RTCPeerConnection({ iceServers: [] });
    pc.createDataChannel('');
    pc.createOffer().then(pc.setLocalDescription.bind(pc));

    pc.onicecandidate = (ice) => {
      this.zone.run(() => {
        if (!ice || !ice.candidate || !ice.candidate.candidate) {
          return;
        }

        this.localIp = this.ipRegex.exec(ice.candidate.candidate)[1];
        sessionStorage.setItem('LOCAL_IP', this.localIp);

        pc.onicecandidate = () => {};
        pc.close();
      });
    };
  }

  private getRTCPeerConnection() {
    return window.RTCPeerConnection ||
      window.mozRTCPeerConnection ||
      window.webkitRTCPeerConnection;
  }
}

As a note, the code that is executed within the onicecandidate method will run outside of the Angular zone, so that will not tell Angular to update the UI when properties on your component change within that code. In order to let Angular be aware of the changes, you need to get a reference to the Angular zone and run the code within it. This is accomplished with the this.zone.run(() => { ... }); syntax. Here is a good blog about zones in Angular if you would like to learn more about that.

Get ip address in Angular 5

It will work if you remove the { headers: headers } parameter.

How to determine a user's IP address in node

In your request object there is a property called socket, which is a net.Socket object. The net.Socket object has a property remoteAddress, therefore you should be able to get the IP with this call:

request.socket.remoteAddress

(if your node version is below 13, use the deprecated now request.connection.remoteAddress)

EDIT

As @juand points out in the comments, the correct method to get the remote IP, if the server is behind a proxy, is request.headers['x-forwarded-for']

---

Related Topics