Como obtener la "KEY" desde el "Developer Tools" o inspector de elementos de Google y mostrar Lugares.

17065

Hola comunidad!
Reciban un cordial saludo de mi parte.

Quise de manera breve mostrar como obtener la famosa “KEY” desde el navegador para quienes no saben.
Los que sí pueden omitir el Tutorial o seguirlo solo por curiosidad.

Les comento que en la sección del curso, justo donde se paso a utilizar Sockets para utilizar Http (esto trae algunos problemas quienes no hayan ajustado el código Typescript relativo al servicio), realizamos una autenticación mediante “JWT” o el uso de Tokens.

Para el caso de los comentarios citados en algunos apartados del curso solicitan obtener dicha Key para a través de esta, poder obtener el valor de dicha Key que es la que utilizaremos para poder obtener los Lugares sin ningún tipo de error molesto en consola.

Para quienes somos usuarios de Windows pulsamos la combinación de teclas: “Ctrl+ Shift + i” y automáticamente se desplegará la ventana de inspección de elementos de Chrome “Developer Tools”.
Una vez tengamos la ventana “Developer Tools”, seguir estos pasos:

Identificar la pestaña “Application”
Una vez seleccionada la pestaña “Application”, desde el costado izquierdo de la ventana de herramientas de desarrollador, se despliega desde la sección “Storage”, el item “Local Storage”.
Una vez seleccionado este item, se procede a seleccionar su nodo Hijo directo y justo al costado superior derecho de la ventana, aparecerá una columna cuyo titulo es: “Key”, seguido de otra columna: “Value”.

Basta entonces con seleccionar el item o elemento que encontrarán justo debajo del item “currentUser”, y presionar doble click sobre este “en mi caso, es exactamente el segundo elemento”, dando doble click se activa el modo de editar, entonces copiamos toda la selección y lo pegamos en un editor para dejarlo pendiente y aplicar la otra parte del procedimiento. Una captura de pantalla en resumen de estos primeros 3 pasos se ve así:

Una vez tengamos en memoria toda esta <key>que de hecho es algo extensa, se procede a abrir el fichero “lugares.service.ts” y justo acá empalmamos con la solución propuesta por: <ins>@andresfelipechaparro</ins></key>

La captura de pantalla de como tengo este bloque de código que retorna los lugares mediante HTTP:

Hecho lo anterior, basta para obtener el listado de lugares que bien se ha desplegado con normalidad durante el Curso sin mostrar errores por consola, hay que tener muy claro la configuración realizada previamente desde la consola que ofrece Firebase. Pero, ¿De que hablas, que configuración?.
Hago mención a esta configuración establecida en la siguiente sección de Firebase:

Si se dejan las reglas de esta manera, tendremos que gestionar esa petición de los lugares que se maneja desde: “lugares.service.ts” para habilitar esa variable GET extra en la URL tal como se aprecia en la captura del código.

El código de las reglas lo comparto para que sea fácilmente editado:

    {
        "rules": {
            ".read": "auth != null",
            ".write": "auth != null"
        }
    }

Espero aportar algo a la comunidad. Siempre hay que resolver errores sobre la marcha y eso define nuestra esencia. Para ello hay que tener mucha paciencia y sobre todo estar concentrados,enfocados. La lectura del error muchas veces tiene esas “Pistas” que nos llevan a una solución fiable.
Saludos.

hace 7 años