创建Google登录页面以访问服务

Question

I need to build a small web application which connects to Google Calendars and fetches a specified event set. I've read the documentation, and I understand that I need to authenticate the user to my app which I created on the Google Developer console.

I'm trying to implement an authentication with a popup window (I'm using fancybox for this). This is the <div> in which the login data goes: <div id="login-popup" style="display:none"></div>

This is the JS code I'm using to call the auth.php file:

    $.get("/auth.php", function(result) {
            $('#login-popup').append(result);
            $.fancybox({
                href: "#login-popup",
                autoSize: true,
                width: "60%",
                fitToView: true
            });
        });

And finally this is the PHP code that sends the GET request to Google's API:

$ch = curl_init();
if($ch) {
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/plain'));
    curl_setopt($ch, CURLOPT_HTTPGET, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_URL, $query);
    $result = curl_exec($ch);

    curl_close($ch);
}
else {
    throw new RuntimeException("Hiba történt a távoli adatok elérése közben!");
}
echo json_encode($result);

So this popup comes up after this, as it's supposed to be:

After I enter my credentials however, it redirrects me to Google's login website (https://accounts.google.com/ServiceLoginAuth).

My problem:

I need to be able to get data back from this popup window to get the access token I can later use on my Calendar API call. What do I need do to achieve this?

Answer 1

The reason you are being redirected is because you are essentially loading google's page into an iframe. Everything that is normally called on their login page on submit is called when you input. So basically you're just opening a window to google within your website.

The correct way to implement this would be to use google's oauth API. (https://developers.google.com/accounts/docs/OAuth2 or more specifically, https://developers.google.com/accounts/docs/OAuth2Login)

You'll need to register a project and get a developer/API key.

The google docs are very comprehensive, so you should be able to follow them pretty easily!