ブラウザの許可またはIPアドレスによるユーザの位置

このモジュールを使用すると、IPアドレスでどちらかのナビゲーター許可を使用してユーザーを検索できます.

何をもたらすのですか.

(ブラウザソリューションの場合)ナビゲータの許可

(ブラウザソリューション用)ナビゲータコーディネート

( IPソリューション用)バックエンドのIPアドレスの取得

( IPソリューションの場合) IP APIを呼び出します.特定のIPの位置を得るためにCOMサービス

3時間保存の仕事

必要条件
このモジュールを動作させるにはip-api サービスが必要です.

IPアドレスとIP - APIによるユーザの位置の取得

ステップ1
リクエストのHTTPヘッダから、ユーザのIPアドレスをRadio - X - Forward -に表示します.

request.ipAddress = request?.headers['x-forwarded-for']?.split(',')[0] || request.connection.remoteAddress

このIPアドレスはリクエストを介してアクセス可能です.IPAddress、しかし、我々はそれの取得を容易にするためにカスタムメイドのデコレータを作成します.

ステップ2
直接にアクセスするのではなく、装飾子を使用してiPadressを取得するカスタムデコレータを作成するrequest.ipAddress :

import { createParamDecorator, ExecutionContext } from '@nestjs/common';

export const IpAddress = createParamDecorator(
    (data: unknown, ctx: ExecutionContext) => {
        const request = ctx.switchToHttp().getRequest();
        return request.ipAddress;
    },
);

ステップ3
このカスタムデコレータを使用するコントローラを作成します

ステップ4
お使いのコントローラーでは、IPアドレス(IP APIサービスを使用して)からユーザーの緯度と経度を取得するサービスを使用します.

        const headers = {
            Accept: "application/json",
            "Content-Type": "application/json"
        };
        const res = await fetch(`https://pro.ip-api.com/json/${ip}?key=[ENTER YOUR KEY HERE]`, {
            method: "get",
            headers
        });
        const json = await res.json();
        return {
            latitude: json.lat,
            longitude: json.lon
        }

Navigator許可を使用したユーザの位置の取得

ステップ1
あなたはnavigator web api standards ブラウザーに、ユーザーの場所の使用方法を認証するよう依頼するよう指示します.

export const getGeolocationPermission = async () => {
    const permission = await navigator.permissions.query({
        name: "geolocation"
    });
    return permission.state;
};

ステップ2
ユーザーがプロンプトを受け入れた場合、その緯度と経度のためにナビゲータにnavigator.geolocation.getCurrentPosition() 関数.
つの場所の間の全体のソースコードと距離計算が利用可能ですhere .
ユーザーの場所を取得する方法として、これらの2つの方法を使用することができます.

どちらかのおかげで、IPアドレス

どちらかのブラウザを介して

結論
私は、このモジュールは、ユーザーの位置を取得するシステムを実装しようとしている間、いくつかの時間を節約するのに役立ちます願っています.
何か質問があれば、コメント欄でいつも通りにプレゼントします!
リンク

プラットフォームを共有するプラットフォームとモジュールFast Modular Project

ユーザの位置モジュールオープンソースコードhere.
ピンを躊躇しないでください、そして、あなたが記事を評価するならば❤️