Angular 15 : How to Get Client IP Address using a Service?

In this tutorial, you will learn how to easily get the client id of user in Angular application by using a third part service.

The IP address is a unique identifier that is used to identify a device on a network. In the context of a web application, the client’s IP address can be useful for a variety of purpses, such as:

1. Security: The IP address can be used to help identify and block malicious traffic, such as requests from known malicious IP addresses or IP addresses associated with suspicious activity.
2. Analytics: The IP address can be used to track user activity on a website, such as the pages they visit, the length of their visit, and the frequency of their visits. This data can be used to gain insights into user behavior and improve the user experience.
3. Personalization: The IP address can be used to personalize the user experience, such as showing content that is relevant to the user’s geographic location.
4. Debuging: The IP address can be used to debug issues with the website, such as identifying where errors are occurring or why certain features are not working for certain users.

How to Obtain the Client’s IP address in Angular App?

Here’s a step-by-step tutorial on how to fetch the client’s IP address using a third-party service in an Angular app:

Step 1 – Choose a third-party service that provides the client’s IP address. In this example, we will use https://ipify.org/.

Step 2 – Make sure to import the HttpClientModule in your AppModule, as we will make GET call to the third party service to fetch IP Address.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2 – Create a new Angular service to call the ipify API. In the terminal, navigate to your project directory and run the following command:

ng generate service ip-service

Step 3 – Open the generated ip-service.service.ts file and add the following code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IpService {
  private apiUrl = 'https://api.ipify.org?format=json';

  constructor(private http: HttpClient) { }

  public getIpAddress(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

This service uses the HttpClient to make an HTTP GET request to the ipify API and returns an Observable that emits the response.

Step 4 – In your component where you want to obtain the client’s IP address, inject the IpService and subscribe to the getIpAddress() method to obtain the response:

import { Component } from '@angular/core';
import { IpService } from './ip-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public ipAddress: string;

  constructor(private ipService: IpService) { }

  ngOnInit(): void {
    this.ipService.getIpAddress().subscribe(response => {
      this.ipAddress = response.ip;
    });
  }
}

This component injects the IpService and subscribes to the getIpAddress() method. When the response is received, the client’s IP address is stored in the ipAddress property.

Step 5 – Display the client’s IP address in your component’s template. Open the component’s template file (app.component.html in this example) and add the following code:

<h2>Your IP address is: {{ ipAddress }}</h2>

This displays the client’s IP address obtained from the ipify API.

Step 6 – Start the development server and view the app in a browser. In the terminal, run the following command:

ng serve --open

This starts the development server and opens the app in a browser. The app should display the client’s IP address obtained from the ipify API.

However, it’s important to note that obtaining the client’s IP address is not always reliable or possible. The client’s IP address can be hiden behind a proxy, or the client can be using a shared or dynamic IP address that changes frequently. Additionally, some users may use tools or techniqiues to obscure or fake their IP address. As a result, the client’s IP address should be used with caution and in conjunction with other methods of user identification and authentication.