Tag Archives: API

Iniciando sesión con Google+ y OAuth

Un escenario común es iniciar una sesión mediante una cuenta externa como Google+, Twitter o Facebook.
En este código mostraré como hacerlo con Google+ API

Primero necesitas registrar el API en https://code.google.com/apis/console/, registrar el servicio de Google+ API y crear una nueva aplicación, en el campo de “Redirect URI” necesitas escribir la ruta del script y lo siguiente: “googleplus.php?op=redirect“, comentaré el porqué después; después que veas el código podrás separarlo en rutas o scripts más elegantes.

En la aplicación generada, necesitarás los campos de Redirection URI y Client ID

Google OAuth funciona de la siguiente manera:

  1. Generar una URL usando los parámetros de los servicios que quieres acceder (scope) y tu Client ID y Redirection URI
  2. Necesitas redireccionar al usuario a esta URL
  3. Después que el usuario ha ingresado, el sistema te redireccionará a la URL que proporcionaste con parametros hash (googleplus.php?op=redirect#access_token=....), así que no verás esto en el servidor; puedes pasarlo a tu servidor mediante AJAX o en este caso mediante una petición GET

En el código el parámetro “?op=redirect” mostrará una página blanca con un código en javascript para convertir el hash en una petición GET; esto pemitirá obtener en el servidor el parámetro access_token que usarás para verificar mediante Google+ si es válido.

Esta parte del código lo hace:

<?php
        $access_token = $_GET['access_token'];

	//verificar si es real
	$data = @file_get_contents("https://www.googleapis.com/plus/v1/people/me?access_token={$access_token}");
	if ($data) {
		print $data;
	} else {
		print "Token no valido!";
	}

El código no está preparado para manejar errores (lo mostrará como un parámetro $_GET['error']) así que necesitas manejar eso en tu caso.

Ligas:

Ejemplo de API de Yahoo/Weather.com

La pagina de Yahoo developers tiene el API de Weather.com (que compro hace tiempo), Weather.com ya tenia un xml que ha simplificado Yahoo.com

Esta API nos permite obtener informacion del clima de practicamente cualquier lugar del mundo y sin duda es muy utilizada para varios widgets dentro de páginas o como widgets de escritorio.

Básicamente para usar esta API se hace una llamada a la siguiente dirección:
http://weather.yahooapis.com/forecastrss?p=CODIGO&u=c

Donde código puede ser un Código Postal de Estados Unidos, o un ID de una ciudad en el mundo, el API de yahoo developers, dice brevemente que para conseguir este ID se necesita ir a la página de Yahoo Weather y copiar de la URL el código de la ciudad.

Esto es realmente muy malo ya que lo que se busca es optimizar, pero ahi entra el API viejo de Weather.com, donde podemos enviarle una cadena con la ciudad a buscar y nos regresará diversos resultados que pueden concordar con el código de la ciudad y su nombre “legible”, la url es: 
http://xoap.weather.com/weather/search/search?where=NOMBRE_CIUDAD

Por ejemplo para buscar la ciudad de Puebla, Mexico haremos:
http://xoap.weather.com/weather/search/search?where=Puebla

El resultado nos dará como resultado:

<!-- This document is intended only for use by authorized licensees of The  -->
<!-- Weather Channel. Unauthorized use is prohibited.  Copyright 1995-2008, -->
<!-- The Weather Channel Interactive, Inc.  All Rights Reserved.            -->
<search ver="2.0">
  <loc id="MXPA0070" type="1">Puebla, Mexico</loc>
</search>

 

Que vemos que el elemento loc provee el ID de la ciudad y el nombre legible; ahora si podemos contruir la nueva URL que será:

http://weather.yahooapis.com/forecastrss?p=MXPA0070&u=c

El resultado es un documento RSS con un nombre de espacio (namespace) de yweather, la página contiene mucha información, mucha de ella redundante, pero lo que más nos importa es lo que tiene ese nombre de espacios como:

<yweather:condition  text="Partly Cloudy"  code="30"  temp="19"  date="Sat, 27 Sep 2008 5:49 pm CDT" />
<yweather:location city="Puebla" region=""   country="MX"/>
<yweather:units temperature="C" distance="km" pressure="mb" speed="kph"/>
<yweather:wind chill="19"   direction="150"   speed="11.27" />
<yweather:atmosphere humidity="60"  visibility="1607.69"  pressure="0"  rising="0" />
<yweather:astronomy sunrise="7:23 am"   sunset="7:24 pm"/>

El primero es lo más importante (condition), nos mostrará la información del clima, el código de estado (code), la temperatura (temp) y la fecha de cuando se obtuvo la información.
El segundo (location) nos dice información del lugar.
El tercero (units) nos dice en qué unidades está expresada la información, como hemos solicitado en formato de grados Centigrados el sistema muestra la información en sistema métrico.
El cuarto (wind) nos da información del viento.
El quinto (atmosphere) nos da información del medio ambiente en cuanto a humedad, visibilidad, etc
El último (astronomy) nos da una breve información de cuando el sol aparece y se oculta en el horizonte.

La página también incluye una liga a la imagen del estado, yo he decidido utilizar las que provee Weather.com

El nombre del estado no lo usaremos ya que está en inglés, por lo que hice una traducción del estado al nombre correspondiente, los códigos se pueden ver aqui:
http://developer.yahoo.com/weather/#codes

 

Aqui tenemos un ejemplo ensamblado en PHP y Javascript:
http://demo.livesourcing.com/blog_vida/articulos/DanguerArticle_Clima/

 

Básicamente tiene tres partes, la primera nos permite introducir un nombre y obtener el ID de los lugares, obviamente está en ingles por lo que se tienen que hacer busquedas como “Mexico City” para encontrar la información del clima del D.F.

La segunda parte nos permite seleccionar de las distintas opciones de los lugares el que queramos ver su clima, después de seleccionarlo le damos click a “Obtener clima” y obtendremos el clima ;)

El sistema muestra solamente el Estado (en español), la temperatura y la fecha con la imagen correspondiente del estado; en el ejemplo no obtuve información extra como información del viento o del medio ambiente, pero en base al ejemplo se puede extender fácilmente.

 

Descargar el código fuente del ejemplo: 
http://demo.livesourcing.com/blog_vida/articulos/DanguerArticle_Clima.tar.gz

 

Más información:

 

Usando el Google Autosuggest API

Aunque no he encontrado documentación, viendo como Youtube solicita datos de sugerencia me he dado cuenta que existe un pequeño api de sugerencias google, la liga es:

http://suggestqueries.google.com/complete/search?q=lorem

Si entran a la anterior dirección verán que les sirve un documento javascript con una llamada a una función (window.google.ac.h)

El documento regresa un arreglo con tres valores, el primero es la busqueda misma, el segundo es un arreglo de etiquetas y el tercero es un arreglo con la información del número de resultados. Este formato puede cambiar dependiendo de los parámetros enviados.

Hasta donde he probado tiene las siguientes opciones (pronto liberarán las especificaciones oficiales):

  • nolabels, valores posibles: t, f
    Especifica si deben mostrarse el numero de resultados [f] o solamente las etiquetas [t]
  • hl, valores posibles: cualquier valor válido ISO para lenguajes por ejemplo en, es, etc
    El lenguaje en el que se realizará la búsqueda por defecto está en ingles, se puede cambiar a español con hl=es
  • json, valores posibles: t
    Especifica si el resultado será en formato JSON (para ser leido por javascript), cambia un poco el formato ya que no llama la función y no es un arreglo doble como por defecto
  • xml, valores posibles: t
    Especifica si el resultado será en formato XML (muy bueno para PHP, flash o Flex), tiene una información un poco más “limpia” pero por supuesto contiene es más grande el envio de este archivo
  • jsonp, valor posible: nombre de función en javascript
    Con este parámetro podemos decirle que mande a llamar a una función de nuestro código por ejemplo: “resultados”

Pueden ver un ejemplo donde proceso los resultados de google suggest en la siguiente página:

Ejemplo de Google Autosuggest API

http://demo.livesourcing.com/blog_vida/articulos/DanguerArticle_GoogleAutosuggest/

Pueden descargar el código en:
http://demo.livesourcing.com/blog_vida/articulos/DanguerArticle_GoogleAutosuggest.tar.gz