如何从 google plus oauth 获取用户电子邮件答案

【问题标题】：How to get user email from google plus oauth如何从 google plus oauth 获取用户电子邮件
【发布时间】：2017-02-07 23:04:28
【问题描述】：

链接：https://sites.google.com/site/oauthgoog/Home/emaildisplayscope

从上面的链接中我添加了电子邮件范围

https://www.googleapis.com/auth/plus.me
https://www.googleapis.com/auth/userinfo.email

但我不明白以下内容

一旦您拥有一个有效的 OAuth 令牌，您就可以使用它对电子邮件显示 API 端点进行 API 调用： https://www.googleapis.com/userinfo/email 如果令牌无效，将返回 401 错误。如果令牌有效，则返回用户的电子邮件地址。 API 还将返回一个布尔值，以指示 Google 是否已验证用户拥有该电子邮件地址。然而，大多数已安装的应用程序会忽略该值。

如何调用电子邮件显示 API 端点？使用https://www.googleapis.com/userinfo/email

【问题讨论】：

标签： google-plus

【解决方案1】：

将范围设置为：

并使用端点：

https://www.googleapis.com/oauth2/v1/userinfo?alt=json

用法：

get https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=youraccess_token

你会得到 JSON：

{ "id": "xx", 
  "name": "xx", 
  "given_name": "xx", 
  "family_name": "xx", 
  "link": "xx", 
  "picture": "xx", 
  "gender": "xx", 
  "locale": "xx" 
}

【讨论】：

它返回 { "data": { "email": "xxx@gmail.com", "isVerified": true } } 我不能只收到电子邮件..
如果你使用 JQuery 试试 jQuery.parseJSON( ).email
当我尝试这个时，我只得到用户 ID (:(
链接已过期。粘贴新的文档链接
如果您指的是 googleapis.com/auth/XXX 链接 - 这些不是文档。它们是需要设置到您的 GoogleOAuthParameters 对象的范围和端点。（例如 oauthParameters.setScope(); )

【解决方案2】：

Google+ 登录的范围已更改。

将范围设置为：

https://www.googleapis.com/auth/plus.login
https://www.googleapis.com/auth/userinfo.email

JavaScript 调用如下所示：

gapi.client.load('oauth2', 'v2', function() {
  gapi.client.oauth2.userinfo.get().execute(function(resp) {
    // Shows user email
    console.log(resp.email);
  })
});

gapi.client.load('plus', 'v1', function() {
  gapi.client.plus.people.get( {'userId' : 'me'} ).execute(function(resp) {
    // Shows profile information
    console.log(resp);
  })
});

更多信息https://developers.google.com/+。

编辑：请注意，您不需要 plus.me 或 userinfo.profile 的范围。

【讨论】：

范围应该用空格分隔。

【解决方案3】：

现在我们将 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（源代码）

你会尝试这个，并为你自己，跟随

第 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 输出，而是控制台。所以打开浏览器的开发者控制台工具来查看结果。

【讨论】：

【解决方案4】：

我在 angularjs 中，在 Ionic 框架中做了这个，它可以工作。试试这个。

controller("OauthExample", function($scope, $cordovaOauth, $http) {

    $scope.googleLogin = function() {
        $cordovaOauth.google("YOUR CLIENTID", ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile"]).then(function(result) {
            window.localStorage.setItem("access_token", result.access_token);
            $scope.token=JSON.stringify(result);

        }, function(error) {
            console.log(error);
        });
    }


        $scope.getProfileInfo = function() {
            console.log(window.localStorage.getItem('access_token'));
        $http.defaults.headers.common.Authorization = "Bearer " + window.localStorage.getItem("access_token");
        $http.get("https://www.googleapis.com/oauth2/v1/userinfo?alt=json")
            .success(function(data) {
                console.log(data);
                console.log(data.email);
            })
            .error(function(error) {
                console.log(error);
            });
    }

});

【讨论】：