Question

我尝试使用Google联合登录功能检索用户信息，以便为我的网站实现一键注册功能。

我已检索到客户端的所有信息。我使用了几个隐藏的输入字段来存储名称，电子邮件等参数的值。但是，当我从后面的代码中访问这些字段时，我得到空值。

以下是我检查问题的步骤： 1.我确保每个输入字段都有[runat =“server”]标记，并确保从谷歌正确返回所有值。 2.我确保所有输入字段都在表单

中

我想知道是否因为我点击谷歌+登录按钮后没有提交表格，按钮如下：

<div id="signin-button" class="slidingDiv">
 <div class="g-signin" data-callback="loginFinishedCallback"
  data-approvalprompt="force"
  data-clientid="....."
  data-scope="  https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me "
  data-height="short"
  data-cookiepolicy="single_host_origin"
  >
</div>
</div>

此按钮将引导我进入其他验证我的凭据的函数并返回我请求的参数。我想知道如何修改它以便我可以在单击此按钮后提交表单？

如果不是由此问题引起的，那么有没有人能想到为什么我无法从后面的代码中获取隐藏的输入值？

这是我的回调函数

 function loginFinishedCallback(authResult) {
      if (authResult) {
          if (authResult['error'] == undefined) {
              gapi.auth.setToken(authResult); 
              toggleElement('signin-button'); /
              getInfo();

              document.getElementById('Button').click();
          } else {
              console.log('An error occurred');
          }
      } else {
          console.log('Empty authResult');  
      }
  }

getInfo将获取所有google plus信息，而button.click（）应该从客户端检索信息到服务器端

Answer 1

Google+登录按钮当前不会POST表单数据，而是将授权代码和访问令牌传递回按钮中配置的回调函数中的页面。您可以做一些聪明的事情，比如使用JavaScript来更新内容（您可能已经在做什么？）的隐藏字段，然后使用该隐藏字段中的数据进行服务器端的OAuth 2代码交换。

Google+ C# Quick Start sample中使用了另一种方法。该示例所做的是使用API端点来发布授权代码，以后在服务器端交换OAuth 2凭据。

我把some code that will pass the authorization code for authorizing your backend放在了一起。它由表格前端组成：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fedLogin.aspx.cs"     Inherits="GPlusQuickstartCsharp.fedLogin" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var confirms = 0;
        function loginFinishedCallback(result) {
            console.log(result);
            if (result.access_token != null) {
              gapi.client.load('plus', 'v1', function(){
                gapi.client.load('oauth2', 'v2', function () {
                  gapi.client.plus.people.get({ userId: 'me' }).execute(
                    function (resp) {
                        document.getElementById('name').value = resp.displayName;
                        confirms += 1;
                        if (confirms > 1) {
                            document.getElementById('form1').submit();
                        }
                    });
              });
              gapi.client.load('oauth2', 'v2', function () {
                gapi.client.oauth2.userinfo.get().execute(
                    function (resp) {
                        document.getElementById('email').value = resp.email;
                        confirms += 1;
                        if (confirms > 1) {
                            document.getElementById('form1').submit();
                    }
                    });
                  });
                });
                document.getElementById('code').value = result.code;
            }
        }
    </script>
    <div id="signin-button" class="slidingDiv">
        <div class="g-signin" data-callback="loginFinishedCallback"
            data-clientid="....apps.googleusercontent.com"
            data-scope="https://www.googleapis.com/auth/userinfo.email"
            data-height="short"
            data-cookiepolicy="single_host_origin"
        >
    </div>
    </div>

    <form id="form1" runat="server" method="post">
    <div>
        <input type="hidden" name="code" id="code" />
        <input type="hidden" name="email" id="email" />
        <input type="hidden" name="name" id="name" />
    </div>
    </form>
</body>
<script type="text/javascript">
  (function () {
    var po = document.createElement('script');
    po.type = 'text/javascript'; po.async = true;
    po.src = 'https://plus.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();
</script>
</html>

[C＃]背后的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace GPlusQuickstartCsharp
{
    public partial class fedLogin : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request["code"] != null)
            {
                // Perform code exchange here
                var result = ManualCodeExchanger.ExchangeCode(Request["code"]);
            }

        }
    }
}

如果在var result = ...行放置断点，您可以在即时窗口中看到请求变量，例如：

Request["code"]
"4/xUgz-_zWFAgpq4Kbfas66pV0oWJ8........."
Request["email"]
"gguuss@gmail.com"
Request["name"]
"Gus Class (Gus)"

希望这有帮助！

注意：虽然您需要客户端ID和客户端密码来交换代码中所示的一次性代码，但最好尽可能地保护它。我正在使用POST来保护表单中的代码以帮助您，但是每当您传递凭据时也应该使用https。

将前端输入值传递给代码/ google联合登录

1 个答案: