1

Estoy trabajando con el API de Google y necesito que los usuarios puedan crear eventos en mi calendario, para esto utilicé el protocolo de "Using OAuth 2.0 for Server to Server Applications", después de mucha búsqueda lo más lejos que he llegado ha sido con la ayuda del código en este tema How can I retrieve a service account OAuth2 token from Google Api with Javascript?

En esta logro obtener el token pero ahí estoy estancado ya que no se para dónde más avanzar.

El código que tengo actualmente es el siguiente:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script src="jsrsasign-all-min.js"></script>  
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<script type="text/javascript">
$(document).ready(function(){
function postJWT(jwt, callback) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4) {
            if (this.status == 200 && callback) {
                alert('OK');
                callback(this.responseText);
                return;
            }
            if (console) console.log(this.responseText);
        }
    };
    var parameters = "grant_type=" + 
    encodeURIComponent("urn:ietf:params:oauth:grant-type:jwt-bearer") + 
    "&assertion=" + encodeURIComponent(jwt);
    xhttp.open("POST", "https://www.googleapis.com/oauth2/v4/token", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(parameters);
}

function getCert() {
    var cert = //your json key (downloaded earlier) goes here
        {
            "type": "service_account",
            "project_id": "service-to-service-1",
            "private_key_id": "5f2c3565f...ad638c64c2f32f66f2",
            "private_key": "-----BEGIN PRIVATE KEY-----\ --END PRIVATE KEY-----\n",
            "client_email": "[email protected]",
            "client_id": "XXXX",
            "auth_uri": "https://accounts.google.com/o/oauth2/auth",
            "token_uri": "https://accounts.google.com/o/oauth2/token",
            "auth_provider_x509_cert_url": 
             "https://www.googleapis.com/oauth2/v1/certs",
            "client_x509_cert_url": 
    "https://www.googleapis.com/robot/v1/metadata/x509/calendario%40service-to-service-1.iam.gserviceaccount.com"
        };      
    return cert;
}
function getJWT() {
    var cert = getCert();
    var key = KEYUTIL.getKey(cert.private_key);
    var headers = { "alg": "RS256", "typ": "JWT" };
    var issued = Math.floor(new Date().getTime()/1000);

    var claims = {
        "iss": cert.client_email,
        "scope": "https://www.googleapis.com/auth/calendar",
        "aud": "https://www.googleapis.com/oauth2/v4/token",
        "exp": issued + 3600,
        "iat": issued
    };

    var jwt = KJUR.jws.JWS.sign(headers.alg, headers, 
    JSON.stringify(claims), key);
    return jwt;
}   

function handleClientLoad(token) {
    gapi.load('client:auth2', initClient(token));
  }
function initClient(tokenObject) {
    gapi.client.setToken(tokenObject)
}   
var calendarId = $( "#calendarId" ).val();  
var summary = $( "#summary" ).val();    
var dateTimeEnd = $( "#dateTimeEnd" ).val();    
var dateTimeStart = $( "#dateTimeStart" ).val();    
var timeZone = $( "#timeZone" ).val();  

$("p").click(function(){
    var jwt = getJWT();
    postJWT(jwt, function(response){
    let token = JSON.parse(response).access_token;
    var event = {
        //"kind": "calendar#event",
        'summary': summary,
        'start': {
            'dateTime': dateTimeStart,
            'timeZone': timeZone
        },
        'end': {
            'dateTime': dateTimeEnd,
            'timeZone': timeZone
        },  
        };
    var request = gapi.client.calendar.events.insert({
        'calendarId': 'primary',
        'resource': event
        });

        request.execute(function(event) {
            appendPre('Event created: ' + event.htmlLink);
        });
    });
});
</script>

Los datos los espero tomar de un un formulario

<form action="https://www.googleapis.com/calendar/v3/calendars/calendarId/events" method="post" id="idFormulario">
    <input type="hidden" name="summary" id="summary" value="Prueba1">
    <input type="hidden" name="dateTimeEnd" id="dateTimeEnd" value="2018-08-05T13:00:00-05:00">
    <input type="hidden" name="dateTimeStart" id="dateTimeStart" value="2018-08-05T14:00:00-05:00">
    <input type="hidden" name="timeZone" id="timeZone" value="America/Bogota">      
</form>
<p>ENVIAR</p> 

Y por el momento cuándo le doy a enviar me da el siguiente error "Uncaught TypeError: Cannot read property 'calendar' of undefined".

Espero me puedan ayudar, muchas gracias.

1 respuesta 1

1

El código que debés usar es el siguiente:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
    <script src="https://cdn.rawgit.com/kjur/jsrsasign/d282c71c/jsrsasign-all-min.js"></script>     
    <script src="https://apis.google.com/js/api.js"></script>
</head>
<body>


    <form action="" method="" id="idFormulario">
    <input type="hidden" name="summary" id="summary" value="Prueba1">
    <input type="hidden" name="dateTimeEnd" id="dateTimeEnd" value="2018-08-05T14:00:00-05:00">
    <input type="hidden" name="dateTimeStart" id="dateTimeStart" value="2018-08-05T13:00:00-05:00">
    <input type="hidden" name="timeZone" id="timeZone" value="America/Bogota">      
    </form>

    <p>ENVIAR</p> 


    <script type="text/javascript">

    $(document).ready(function(){

        function insertEvent(event){

            var token = gapi.client.getToken();
            var request = gapi.client.request({
                path: "https://www.googleapis.com/calendar/v3/calendars/primary/events",
                headers: {
                    "Authorization": "Bearer " + token,
                    "Content-type": "application/json"
                },
                method: "POST",
                body: event
            });

            request.execute(function(event) {
                console.log('Event created: ' + event.htmlLink);
            });

        }

        var summary = $( "#summary" ).val();    
        var dateTimeEnd = $( "#dateTimeEnd" ).val();    
        var dateTimeStart = $( "#dateTimeStart" ).val();    
        var timeZone = $( "#timeZone" ).val();  

        $("p").click(function(){            

            var event = {
                'summary': summary,
                'start': {
                    'dateTime': dateTimeStart,
                    'timeZone': timeZone
                },
                'end': {
                    'dateTime': dateTimeEnd,
                    'timeZone': timeZone
                }
            };
            insertEvent(event);

        });
    });

    function getCert() {
        var cert = {
          "type": "service_account",
          "project_id": "testProject-1555903",
          "private_key_id": "ea94sdlkfc7735fa4bdd4870faf0da65sad4fb",
          "private_key": "--BEGIN PRIVATE KEY---END PRIVATE KEY--",
          "client_email": "[email protected]",
          "client_id": "129301255267335436391",
          "auth_uri": "https://accounts.google.com/o/oauth2/auth",
          "token_uri": "https://accounts.google.com/o/oauth2/token",
          "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
          "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service%testProject-1555903.iam.gserviceaccount.com"
        };      
        return cert;
    }


    function getJWT() {
        var cert = getCert();
        var key = KEYUTIL.getKey(cert.private_key);
        var headers = { "alg": "RS256", "typ": "JWT" };
        var issued = Math.floor(new Date().getTime()/1000);

        var claims = {
            "iss": cert.client_email,
            "scope": "https://www.googleapis.com/auth/calendar",
            "aud": "https://www.googleapis.com/oauth2/v4/token",
            "sub": "[email protected]",
            "exp": issued + 3600,
            "iat": issued
        };

        var jwt = KJUR.jws.JWS.sign(headers.alg, headers, JSON.stringify(claims), key);
        return jwt;
    }  

    function authClient(token) {
        gapi.client.setToken(token);    
    }

    function postJWT() {                

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var token = JSON.parse(this.responseText).access_token;
                authClient(token);
            }
        };

        var jwt = getJWT();
        var parameters = "grant_type=" + encodeURIComponent("urn:ietf:params:oauth:grant-type:jwt-bearer") + "&assertion=" + encodeURIComponent(jwt);
        xhttp.open("POST", "https://www.googleapis.com/oauth2/v4/token", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(parameters);
    }

    gapi.load('client', postJWT);   

    </script>

</body>
</html>

Tomá en cuenta lo siguiente:

A la hora de crear el JSON Web Token(jwt), dentro del objeto claims tenés que usar la propiedad sub y el valor de ésta tiene que ser el usuario de google, es decir, [email protected]. Supongo que a estas alturas ya sabés que no podés usar una cuenta de [email protected], pues las cuentas gratis no pueden hacer esto. Es indispensable que usés una cuenta de G-Suite. Podés revisar la referencia que usé para llevar a cabo esto en este link y también en este link. Espero que te sirva, y si es así, no olvidés de marcar la respuesta como aceptada. ¡Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.