16

Hey there I would really appreciate it if you can provide me with an example where a type script class can get the client's IP address and the browser that the client is using and set those values in variables

I want to do this in type script, not in javascript is that possible and if not how to do it with type script

- So For Example I can

  1. set those variables while submitting the form to the database in the back end

  2. I can for example display for the user the browser he is using any help would be appreciated thanks

Ala'a Mezian
  • 297
  • 1
  • 6
  • 15
  • Possible duplicate of [How to get client's IP address using javascript only?](https://stackoverflow.com/questions/391979/how-to-get-clients-ip-address-using-javascript-only) – str Jun 14 '17 at 19:39
  • https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator – str Jun 14 '17 at 19:40
  • Check following answer. [This works for me](https://stackoverflow.com/a/51924213/3578809) in 2020. – johannesMatevosyan Jul 01 '20 at 18:20

4 Answers4

14

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')
             .map((res: Response) => {
               console.log('res ', res);
               console.log('res.json() ', 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);

               return ipVar
             }
  );
}
ssuperczynski
  • 3,190
  • 3
  • 44
  • 61
Juan Ignacio Liska
  • 172
  • 1
  • 6
  • This is not formatted as an answer - responses as this one belong in comments. – Eli Aug 23 '17 at 18:30
  • 1
    I marked you down because this answer returns a cors error – Aaron Matthews May 08 '20 at 16:34
  • Aaron, I'm so sorry that it doesn't work for you, friend. The application that takes the example is in production and without the problem that you mention. Did you configure CORS in your back? My back is done in springboot and the following helped me: https://spring.io/guides/gs/rest-service-cors/ https://www.baeldung.com/spring-cors I hope it works Greetings, Juan- – Juan Ignacio Liska May 11 '20 at 16:43
  • 1
    If you're receiving a CORs error calling the api.ipify.org endpoint from angular, check the headers being sent. You can always send a second parameter to the http.get call that clears to the default headers: this.httpClient.get(url, { headers: null }). Also check if your angular application has an httpInterceptor that may be injecting additional authorization headers. – LethargicGeek Jul 01 '20 at 08:01
  • After deployment hitting using proxy giving me server IP and hitting directly, the blocked content issue also tried with "{ headers: null }" but nothing works. Any solution? – Shivam May 10 '21 at 10:11
  • Why do we need to have an external API call needed for getting the ip-address. Does it possible to retrieve the IP address in our application instead of making the rest call to `api.ipify.org`? – Akiner Alkan Jun 09 '22 at 06:28
5

Try the services of https://geolocation-db.com to get the public ip address of the user.

import { HttpClient } from "@angular/common/http";
import { catchError, tap } from "rxjs/operators";

this.http.get<any>('https://geolocation-db.com/json/')
  .pipe(
    catchError(err => {
      return throwError(err);
    }),
    tap(response => {
      console.log(response.IPv4);
    })
  )
Kurt Van den Branden
  • 11,995
  • 10
  • 76
  • 85
3

You should try like this

var json = 'http://ipv4.myexternalip.com/json';
   $http.get(json).then(function(result) {
    console.log(result.data.ip)
},  function(e) {
   alert("error");
});
Sagar V
  • 12,158
  • 7
  • 41
  • 68
seersol
  • 57
  • 4
1

Try This :

Create Provider and add function with required dependencies :

import { Injectable }     from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/Rx';


 //  Function :

getIP(): Observable<Data[]> {
    return this.http.get('http://ipinfo.io') // ...using post request
    .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
    .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any
}

Controller Code :

getIP() {
    this.loading = true;
    this._myIPService.getIP()
    .subscribe(
        IPDetails => this.IppDetails,
        error =>  this.errorMessage = <any>error
        );
}

You will have all the details of IP in this.IppDetails

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66