Recuperar la localización de una IP con Azure Maps

Hasta ahora, te he mostrado todo aquello que cabía esperar de Azure Maps: renderizar mapas y hacer búsquedas de lugares o puntos de interés y calcular rutas, además de conocer la situación del tráfico. Sin embargo, este servicio también te permite recuperar la localización de una IP, algo súper útil para muchas web que necesitan conocer de dónde proceden sus usuarios.

Obtención de la IP

Lo primero que necesitas es obtener la IP desde la cual está saliendo el usuario a Internet. Para ello he creado un pequeño método en Azure Functions que devuelve la IP del usuario que está realizando la petición:

#r "System.Web"
using System.Net;
using System.Web;
public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
    string clientIP = ((HttpContextWrapper)req.Properties["MS_HttpContext"]).Request.UserHostAddress;
    return req.CreateResponse(HttpStatusCode.OK, clientIP);
}

Antes de poder llamar la función desde JavaScript debes habilitar CORS del lado de Azure Functions. Haz clic sobre la pestaña Platform Features y accede a la sección CORS.

Incluye la URL donde hospedes tu código para que solo se puedan realizar llamadas desde allí. En mi caso, estoy alojando mis ejemplos en una cuenta de Azure Storage, ya que se tratan de páginas web estáticas. Por lo tanto, la URL de mi sitio será el primary endpoint que me facilita Azure Storage, una vez habilitada la sección Static webpage (preview).

Azure Maps – Function – configuración CORS

Recuperar la localización de la IP

Una vez que tenemos la IP podemos enviarla a Azure Maps para que devuelva la información relacionada con la misma. La idea es que la página muestre la IP devuelta por Azure Functions y la información facilitada por Azure Maps. El código HTML será algo como lo siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>Azure Maps</title>
</head>
<body>
    <h1 id="YourIP"></h1>
    <pre id="jsonResult"></pre>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="js/azure-maps-get-ip-to-location.js"></script>
</body>
</html>

Por otro lado, desde JavaScript haremos dos llamadas: la primera de ellas para recuperar la IP desde la cual se está saliendo a Internet y la segunda para obtener la información que Azure Maps ofrece sobre la misma:

$.ajax({
    url: 'https://azuremaps-functions.azurewebsites.net/api/GetIP',
    type: 'GET'
}).done(function (result) {
    $("#YourIP").text("This is your IP: " + result);
    $.ajax({
        url: 'https://atlas.microsoft.com/geolocation/ip/json',
        type: 'GET',
        data: {
            'subscription-key': '<your azure maps key>',
            'api-version': '1.0',
            'ip': result
        }
    }).done(function (result) {
        $("#jsonResult").text(JSON.stringify(result, null, 2));
    });
}).fail(function (err) {
    console.warn('ERROR(' + err.code + '): ' + err.message);
});

El resultado será parecido al siguiente:

Todo el proceso podría haberse hecho directamente en la primera llamada, en Azure Functions, y así evitar dos llamadas desde el cliente. Sin embargo, me parecía interesante mostrarlo de esta forma solamente con motivos de demostración de cada uno de los pasos necesarios. Te recomendaría que en solo una llamada recuperaras tanto la IP y la información de Azure Maps. Azure Functions puede ser un buen lugar 😉

El código completo lo tienes disponible en mi cuenta de GitHub.

¡Saludos!