现在我们将 GoogleAPI 与 Google+ 一起使用
截至 2013 年 12 月,这里是最新的网站;
https://developers.google.com/+/
然后为 Web 登录
https://developers.google.com/+/web/signin/
选择登录流程
->客户端流程
->使用 JavaScript 启动登录流程(我相信这是最新技术)
https://developers.google.com/+/web/signin/javascript-flow
使用 JavaScript 启动 Google+ 登录流程
您可以使用gapi.auth.signIn()
方法启动 Google+ 登录流程。此方法为您提供了很大的灵活性来决定如何以及何时提示用户授权您的应用和登录。
https://developers.google.com/+/web/api/javascript#gapiauthsigninparameters
gapi.auth.signIn(参数)
启动客户端 Google+ 登录 OAuth 2.0 流程。与 gapi.auth.authorize() 类似,只是此方法支持高级 Google+ 登录功能,包括无线安装 Android 应用程序。此方法是使用 Google+ 登录按钮小部件的 JavaScript 替代方法。
https://developers.google.com/+/web/signin/javascript-flow
- 尝试使用页面触发登录流程gapi.auth.signIn()
https://google-developers.appspot.com/+/demos/signin_demo_render (SourceCode)
您将尝试这个,并为您自己的,按照
第 1 步:创建客户端 ID 和客户端密码
忽略以下步骤,
实际上,您只需要 clientID 并替换上面Try it的源代码中的那个。
添加范围 https://www.googleapis.com/auth/userinfo.email
var options = {
'callback': loginFinished,
'approvalprompt': 'force',
'clientid': 'YOURID.apps.googleusercontent.com',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email',
'requestvisibleactions': 'http://schemas.google.com/CommentActivity http://schemas.google.com/ReviewActivity',
'cookiepolicy': 'single_host_origin'
};
添加
gapi.client.load('oauth2', 'v2', function()
{
gapi.client.oauth2.userinfo.get()
.execute(function(resp)
{
// Shows user email
console.log(resp.email);
});
});
这是基于上述内容的完整工作和简洁代码:
<html>
<head>
<title>Google+ Sign-in button demo: rendering with JavaScript</title>
<style type="text/css">
html, body { margin: 0; padding:0;}
#signin-button {
padding: 5px;
}
#oauth2-results pre { margin: 0; padding:0; width: 600px;}
.hide { display: none;}
.show { display: block;}
</style>
<script src="https://apis.google.com/js/client:platform.js" type="text/javascript"></script>
<script type="text/javascript">
var loginFinished = function(authResult)
{
if (authResult)
{
console.log(authResult);
}
gapi.client.load('oauth2', 'v2', function()
{
gapi.client.oauth2.userinfo.get()
.execute(function(resp)
{
// Shows user email
console.log(resp.email);
});
});
};
var options = {
'callback': loginFinished,
'approvalprompt': 'force',
'clientid': 'YOURID.apps.googleusercontent.com',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email',
'requestvisibleactions': 'http://schemas.google.com/CommentActivity http://schemas.google.com/ReviewActivity',
'cookiepolicy': 'single_host_origin'
};
var renderBtn = function()
{
gapi.signin.render('renderMe', options);
}
</script>
</head>
<body onload ="renderBtn()">
<div id="renderMe"></div>
</body>
</html>
没有 HTML 输出,但控制台。所以打开浏览器的开发者控制台工具来查看结果。