Finally got my google oauth 2.0 worked. It took me 2 weeks researching on it. One suggestion is that we don’t use the provided google packages. I’ve been trying so many java examples, but they always has this or that problem. In the end, I turned back to the pure GET, POST, ajax to test it. And I made it!
1. Register google developer console. Go to developer.google.com/console.
1). Create a Client ID. We only pay attention to the “Authorized redirect URIs”. This one is the url which google will redirect the web to after user grant access right to web application. This one needs to be identical another one we configured in our application later.
2). Create an API key. To my understanding, API key helps let google know which application you are using to access google and get statistics. For test, we set the content empty. This allows everyone from everywhere to call the API.
3). Enable Google+ API. We are going to just read user’s name and email. So we need to open the Google+ API for our API key. Go and enable it.
2. Explanation for the process.
First step is we redirect to google page, to let user grant us access permissions to their google account.
We should be careful that redirect_uri should be the same as we set in google console.
grant_type shouldn’t be ignored. We just set like that.(Even though I don’t know what is it used for).
state is the a parameter we can set no matter what we want. It will be delivered state to server after authorization.
scope is what information you want to read from google account. For example, other scope could be “https://www.googleapis.com/auth/analytics”.
If we want more than 2 scopes, we just add a space between them. Like this:
“&scope=https://www.googleapis.com/auth/plus.profile.emails.read https://www.googleapis.com/auth/analytics”
var end_point = "https://accounts.google.com/o/oauth2/auth?";
var response_type = "response_type=code";
var client_id = "&client_id=272634450431-8svpdb48br706qoo8huv6698gud2e558.apps.googleusercontent.com";
var client_secret = "&client_secret=xxxxxxxxxxxxxxxx";
var redirect_uri = "&redirect_uri=http://www.allenlipeng47.com/PersonalPage/node/oauth.jsp";
var scope = "&scope=https://www.googleapis.com/auth/plus.profile.emails.read";
var state = "&state=oauthtest";
var grant_type = "&grant_type=authorization_code";
function getCode(){
var url = end_point + response_type + client_id + redirect_uri + scope + state;
window.location.href = url;
}
After user allowed, google will redirect to the uri we set.
We got the code to request access_token. So, let’s use following function to get access_token.
/**
* Get token
*/
function getToken(){
var code = "code=" + $("#code").val();
var endpoint = "https://www.googleapis.com/oauth2/v3/token?";
var url = endpoint + code + redirect_uri + client_id + client_secret + grant_type;
$.ajax({
type: "POST",
url: url,
success: function(res){
console.log(res);
$("#accessToken").val(res.access_token);
},
error: function(err){
console.log(err);
}
});
}
Finally, we got the token. Let’s get user information now. Here, we need to use the API key we applied before, put there.
/**
* Get user information
*/
function getUserInfo(){
var endpoint = "https://www.googleapis.com/plus/v1/people/me?";
var token = "access_token=" + $("#accessToken").val();
var key = "&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
var url = endpoint + token + key;
$.ajax({
type: "GET",
url: url,
success: function(res){
$("#name").val(res.displayName);
$("#email").val(res.emails[0].value);
console.log(res);
},
error: function(err){
console.log(err);
}
});
}
Done!
Following 2 are very similar. It gave me a lot of headache. Be careful to them!
“Insufficient Permission” means scope is not enough. We need to add specific scope in the getting code phase.
“Invalid Credentials” means token_access parameter doesn’t exist, or it is not right.
I think a html/javascript google oauth is more clear and understandable. This is for tutorial. After we understood the process. We can move to servlet, SpringMVC, let the authorization processed in the server side.
Feel free to test my oauth and the source code: link
