Since I have solved the problem by myself, I would like to contribute my solution.
The Google+ documents are not explained properly, and there are some bugs I had to deal with.
You can look at: https://developers.google.com/+/web/signin/add-button
and on: https://developers.google.com/+/web/signin/server-side-flow.
For google server side:
Create a project and reference on google server side (Finally, you
shall have "Compute Engine and App Engine", "Client ID for web
application", "Key for server applications").
1. Go to : https://console.developers.google.com/project Project +
create project. Named the project+id.
2. Add google+ API. APIS & AUT -> APIS. Add Google+ (Enable it).
3. Go to APIS & AUT -> Credentials. Create new client ID (For Web application). Authorized JavaScript – enter the site name (maybe
several lines). Authorized redirect URI – Clear it. Attention:
Client id + Client secret are declared.
4. Go to APIS & AUT -> Credentials. Create a new key, Choose server key, and press "Create".
For you php side:
Download php api libray from:
https://code.google.com/p/google-api-php-client/
The Client.php file shall be in Google folder, because of little
bug, that you cannot include it in your script, unless you do a
little trick, as explained later - so change the folder whether
necessary, and put the whole folder on your site (only this folder
and sub folders). The fix may look like this:
set_include_path(get_include_path() . PATH_SEPARATOR . DIR );
You shall keep in $_SESSION variables the values of the token, and email (of user that login). That can be checked later like $_SESSION["TOKEN"] = $_POST["TOKEN"] for forgery.
For retrieving the user email, you shall have to add scope, as the following code:
$google_client->addScope(Google_Service_Oauth2::USERINFO_PROFILE);
$google_client->addScope(Google_Service_Oauth2::USERINFO_EMAIL);
/* ... */
$me = $plus->people->get("me");
$email = $me['emails'][0]['value'];
As you see, $me is the magic that retrieve the current user.
5. On client side, you have to use only one button (even for signing in and logged in).
Use same form for login and sign in, and swap it, by some jquery command like html().
- You will have to use google api and make a button, with callback reference.
Here is the php code:
<?php
# REQUIRED MODULES:
/*.
require_module 'standard';
require_module 'mysqli';
require_module 'spl';
require_module 'simplexml';
require_module 'dom';
require_module 'session';
.*/
require_once __DIR__ . "/stdlib/all.php";
require_once __DIR__ . '/Google/Client.php';
require_once __DIR__ . '/Google/Service/Plus.php';
/*. string .*/ $aut_code = "";
session_start();
try {
$aut_code = $_POST["code"];
set_include_path(get_include_path() . PATH_SEPARATOR . __DIR__ ); /* the fix for using the 'google' library, unless it will not run properly */
$id = "<Client-id from 'Compute Engine and App Engine'";
$google_client = new Google_Client();
$google_client->setApplicationName("your application name created in google side");
$google_client->setClientId("Client-id of 'Client ID for web application'");
$google_client->setClientSecret("Client secret of 'Client ID for web application'");
$google_client->setRedirectUri("postmessage"); /* alway postmessage. */
$google_client->setDeveloperKey("Api key of 'Key for server applications'");
$google_client->addScope(Google_Service_Oauth2::USERINFO_PROFILE); /* important for getting access to user profile */
$google_client->addScope(Google_Service_Oauth2::USERINFO_EMAIL);/* important for getting access to user email */
$google_client->setAccessType("offline");
$google_client->authenticate($aut_code);
$access_token = $google_client->getAccessToken();
$plus = new Google_Service_Plus($google_client);
$_SESSION['access_token'] = $access_token;
$me = $plus->people->get("me"); /* me is the current logged in user */
$email = $me['emails'][0]['value'];
$_SESSION["EMAIL"] = $email; /* keep in session variable whatever you send to client */
$_SESSION["GOOGLELOGIN"] = 1; /* keep in session variable whatever you send to client */
echo "ok," . urlencode($access_token) . "\n" . $email; /* response from server */
} catch(Exception $e) {
echo "error:" . $e->getMessage();
}
?>
The part of html is split to two:
In body section, you shall add a button:
<div id="id_googleSignInDlg">
<table>
<tr>
<td id="id_googlelogDesc">
Google log in:
</td>
<td id="id_googlelogButton">
<span class="g-signin"
data-scope="https://www.googleapis.com/auth/userinfo.email"
data-clientid="Client ID for web application"
data-redirecturi="postmessage"
data-accesstype="offline"
data-cookiepolicy="single_host_origin"
data-callback="googleSignInCallbackLog"
data-approvalprompt="force"
data-height="short"
>
</span>
</td>
</tr>
</table>
<div id="id_logreg"></div>
</div>
and for reference to google.
<script>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js?onload=start';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
don't forget to include:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
in Javascript, do:
function googleSignInCallbackLog(authResult) {
'use strict';
var s,
temps,
values;
$("#id_googleSignInDlg").dialog("close");
if (authResult.code) {
$.ajax({
url: 'googleOpenIdLogin.php',
type: 'POST',
dataType: "html",
success: function (result) {
s = result;
if (s.substring(0, 3) === 'ok,') {
temps = s.substring(3, 4000);
values = temps.split("\n");
googleToken = decodeURIComponent(values[0]);
newAccountOn = false;
// check login.
} else {
// error !!!
}
},
data: {
'code': authResult.code
}
});
} else if (authResult.error) {
$("#id_googleSignIn").dialog("close");
}
}
id_googleSignInDlg is the dialog that includes dynamically the html part of the google+ button.
And finally, when using one dialog for two abilities (sign in and login), you shall have code like this:
function loginclick() {
'use strict';
if ($("#id_regdialog").html() === "") {
$("#id_regdialog").html($("#id_logreg").html());
}
if ($("#id_logindialog").html() !== "") {
$("#id_logreg").html($("#id_logindialog").html());
}
$("#id_logindialog").html("");
...
$("#id_googlelogButton").css("opacity", 1);
...
}
and because the google button is shown for less than second on the screen - may be annoying, you can have on css file the following style:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
Hope this post will be helpful.
