Manual de acceso con redes sociales en Hotspot de 4ipnet

En este artículo, vamos a explicar cómo configurar el acceso con redes sociales en un HotSpot 4ipnet.

NOTA: Desde el 20 de mazo de 2018, Facebook ha cambiado su política de seguridad, por lo que ya no acepta API creadas con URL de devolución en texto plano (http) Todas las API's creadas a partir del 20 de marzo de 2018 deben ser basadas en https y disponer de un dominio y certificado SSL valido.

Las API's creadas antes de esta fecha, seguirán funcionando hasta abril de 2019, cuando Facebook obligará a todos los desarrolladores, que cambien de http a https

Acceso a Facebook developers

Para crear la API necesaria para iniciar sesión con social media en un HotSpot de 4ipnet, debemos acceder a la pagina de desarrolladores de Facebook. Basta con tener una cuenta de Facebook personal o profesional.

El acceso se realiza desde la url https://developers.facebook.com

Acceso se realiza desde la url Developers facebook

Hacemos clic en “iniciar sesión” para empezar, y nos logeamos con nuestra cuenta de Facebook.

Si es la primera vez que creamos una API, en la parte superior derecha, saldrá el botón “empezar” el cual nos pedirá mas información acerca del perfil. Caso ya tengamos alguna API creada, saldrá directamente la lista de API que disponemos. En el caso de ya disponer de alguna API, vaya directamente a la pagina 8.

Botón “empezar” el cual nos pedirá mas información acerca del perfil

Al hacer clic en “empezar” nos abrirá un pequeño wizard que nos guiará para completar la información del perfil y aceptar las políticas de seguridad de Facebook

Completar la información del perfil y aceptar las políticas de seguridad de Facebook

Aceptamos las condiciones de uso haciendo clic en “siguiente”.

En el siguiente paso, introducimos nuestro numero de teléfono para confirmar la cuenta. El numero ha de ser real, ya que recibiremos un código de configuración en el teléfono que tendremos que introducirlo a continuación.

recibiremos un código de configuración en el teléfono

Seleccionamos de que forma queremos validar la cuenta, con un mensaje de texto o con una llamada telefónica.

Seleccionamos “mensaje de texto” y ingresamos a continuación, el PIN que recibiremos por SMS en el campo “código de confirmación” y presionamos sobre “verificar”.

Una vez verificada la cuenta, podemos empezar a crear la API.

El primer paso, es configurar un nombre para la API y una dirección de correo electrónico.

configurar un nombre para la API y una dirección de correo electrónico

Presionamos sobre “next” y nos pedirá introducir el código de seguridad, mas conocido como captcha.

introducir el código de seguridad captcha

Hacemos clic en “enviar” para seguir con el proceso.

Ahora Facebook nos pedirá información personal.

Seleccionamos la opción que mas se encaje en nuestro perfil.

Facebook seleccionamos la opción

Una vez completado el asistente, podemos empezar con la creación de la API.

empezar con la creación de la API

Hacemos clic en “add Your First Product” para empezar a crear la API.

Nos llevará al panel de control para desarrolladores. La app que nos interesa, es “Inicio de sesión con Facebook” hacemos un clic sobre “configurar” para empezar.

Inicio de sesión con Facebook

El siguiente paso, es seleccionar la plataforma que vamos a utilizar.

En este caso, seria www (web).

El siguiente paso, es seleccionar la plataforma

En el siguiente paso, nos pedirá la URL de nuestro sitio web.

Introducimos la URL y hacemos clic en “Save” y después, en “continuar”.

“Save” y después, en “continuar”

Los pasos 2 a 4, son herramientas para programadores, podemos hacer clic en “continuar” hasta llega al paso 5. estás herramientas son solo informativa, la única información necesaria, es la url de nuestro sitio web.

Herramientas para programadores

Una vez completado los pasos del 1 al 5, hacemos clic en “configuración” debajo de la opción “Inicio de Sesión Con Facebook” en el menú izquierdo para continuar con la configuración de la API

“Inicio de Sesión Con Facebook”

Ahora viene los pasos importantes. Debemos decir a la API, la URI de retorno de nuestro dominio, desde que Facebook obliga a utilizar https, debemos disponer de un dominio y un certificado ssl valido para completar estos pasos.

Dominio y un certificado ssl valido

En el campo “URI de re-direccionamiento de Oauth válidos, debemos introducir nuestro dominio, seguido de la URL de devolución del HotSpot que es: “domainname/loginpages/fb_callback.shtml”.

El domain name, es el nombre del certificado:

El domain name, es el nombre del certificado

Por ejemplo, nosotros disponemos de un certificado ssl para el dominio hotspot1.wifisafe.com, por lo que nuestra URI de redirecionamiento seria “https://hotspot1.wifisafe.com/loginpages/fb_callback.shtml”

URI de redirecionamiento

Una vez introducida dicha URI, guardamos los cambios.

Y en esta misma pagina (después de guardar) debemos introducir la URL de redirecionamiento para comprobar.

Escribimos exactamente la misma URL que en el paso anterior y presionamos sobre el botón “comprobar”.

Escribimos exactamente la misma URL botón “comprobar”

Una vez validadas las URI, debemos volver al panel principal de la API. Y esta vez entramos en “configuración/básica” para completar la configuración de la API.

En esta pagina también podremos ver el APP ID y Secret Key de nuestra API, datos que necesitaremos mas adelante.

el APP ID y Secret Key de nuestra API

Completamos los campos “dominios de la aplicación” introduciendo nuestro dominio, en este ejemplo, el dominio es “hotspot1.wifisafe.com”.

También es necesario introducir una URL válida, con la política de privacidad.

El último paso, es hacer que la APP sea publica, para ello solo tenemos que presionar sobre el botón de estado en la parte superior derecha de la pantalla.

Hacer que la APP sea pública

Con eso, hemos completado la creación de la API de Facebook, ahora solo tenemos que introducir nuestra APP ID y nuestra APP KEY en el HotSpot.

introducir nuestra APP ID y nuestra APP KEY en el HotSpot

Ahora, en el HotSpot, vamos a “Users → External Authentication → Social Media”, y marcamos la opción del Facebook (en este caso) e introducimos los datos de la APP de Facebook Guardamos los cambios y ya lo tenemos operativo.

“Users → External Authentication → Social Media”

Luego, solo nos quedaría seleccionar nuestro certificado como “certificado por defecto” y activar la opción “user https login” en el HotSpot.

activar la opción “user https login” en el HotSpot

Podemos ver como el HotSpot nos redirecciona a nuestro dominio, con un SSL válido.

ver como el HotSpot nos redirecciona a nuestro dominio
  • Artículo creado por WifiSafe Spain SL.
  • Queda prohibida la reproducción parcial o total sin previo consentimiento.
  • Contacto: soporte@wifisafe.com
  • Web del fabricante: www.4ipnet.com

¿Quieres descargar este manual?

Descargar manual en .pdf

WifiSafe se dirige a profesionales, pequeñas y medianas empresas, grandes organizaciones y compañías o administraciones públicas, como una alternativa de solución segura y profesional.

CONOCE NUESTROS PRODUCTOS Y SOLUCIONES WIRELESS
.

Para obtener más información, ponte en contacto con el Departamento de Soporte 807 450 005 o el Departamento de Pedidos 902 506 100 o envía un correo electrónico a info@wifisafe.com

PRODUCTOS Y SOLUCIONES WIRELESS