http://hayageek.com/login-with-google-plus-javascript-api/
Entrar en:
https://console.developers.google.com
1. Crear un nuevo proyecto llamado por ejemplo "Registrarse en www.midominio.com"
2. Ir a "Credenciales" -> Crear Credenciales -> Clave de API (con esto obtenemos la API Key)
3. Una vez creado ir a: Visión general -> APIs de Google
4. Habilitar las APIS de "Gmail API" y la de "Google+ API"
5. Ir a "Credenciales" -> Crear Credenciales -> "Id de Cliente OAuth" -> Web
6. Rellenar aquí los datos de "Orígenes de JavaScript autorizados" y de "URIs de redireccionamiento autorizados" con las urls de tu web, por ejemplo:
http://www.midominio.com
http://www.midominio.com/google/get_google.php
7. Con esto obtenemos el Id de Cliente y el App Secret.
8. Para que te deje hacerlo tendrás que verificar que tú eres el dueño del dominio www.midominio.com para ello te enlazará con tu servidor (por ejemplo www.ovh.com) para que añadas un texto para confirmar que es tuyo el dominio.
Una vez guardados todos los cambios el código sería:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Login" onclick="login()" />
<input type="button" value="Logout" onclick="logout()" />
<div id="profile"></div>
<script type="text/javascript">
function logout()
{
gapi.auth.signOut();
location.reload();
}
function login()
{
var myParams = {
'clientid' : 'XXX',
'cookiepolicy' : 'single_host_origin',
'callback' : 'loginCallback',
'approvalprompt':'force',
'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
};
gapi.auth.signIn(myParams);
}
function loginCallback(result)
{
if(result['status']['signed_in'])
{
var request = gapi.client.plus.people.get(
{
'userId': 'me'
});
request.execute(function (resp)
{
console.log("RESP:");
console.log(resp);
var email = '';
if(resp['emails'])
{
for(i = 0; i < resp['emails'].length; i++)
{
if(resp['emails'][i]['type'] == 'account')
{
email = resp['emails'][i]['value'];
}
}
}
var str = "Name:" + resp['displayName'] + "<br>";
str += "Image:" + resp['image']['url'] + "<br>";
str += "<img src='" + resp['image']['url'] + "' /><br>";
str += "URL:" + resp['url'] + "<br>";
str += "Email:" + email + "<br>";
document.getElementById("profile").innerHTML = str;
});
}
}
function onLoadCallback()
{
gapi.client.setApiKey('XXXX');
gapi.client.load('plus', 'v1',function(){});
}
</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario