0

Web サイトにワンクリック登録機能を実装するために、Google フェデレーション ログイン機能を使用してユーザー情報を取得しようとしました。

クライアント側のすべての情報を取得しました。名前、電子メールなどのパラメーターの値を保存するために、いくつかの非表示の入力フィールドを使用しました。ただし、コード ビハインドからこれらのフィールドにアクセスすると、値が空になりました。

問題を調査するために私が行った手順は次のとおりです。 1. 各入力フィールドに [runat="server"] タグが含まれていることを確認し、すべての値が Google から正しく返されることを確認しました。2.すべての入力フィールドがフォーム内にあることを確認しました

google+ログインボタンをクリックした後、フォームを送信しなかったためか、ボタンは次のとおりです。

<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 プラス情報を取得し、button.click() はクライアント側からサーバー側に情報を取得することになっています。

4

1 に答える 1

2

Google+ サインイン ボタンは現在、フォーム データを POST しませんが、代わりに、ボタンで構成されたコールバック関数で認証コードとアクセス トークンをページに戻します。JavaScript を使用して非表示フィールドをコンテンツで更新し (すでに実行している可能性があります)、その非表示フィールドのデータをサーバー側で OAuth 2 コード交換に使用するなど、巧妙なことを実行できる場合があります。

別の方法は、Google+ C# クイック スタート サンプルで使用されています。そのサンプルが行うことは、API エンドポイントを使用して認証コードを POST することです。認証コードは後でサーバー側で OAuth 2 資格情報と交換されます。

バックエンドを承認するための承認コードを渡すコードをまとめました。これは、フロントエンドのフォームで構成されています。

<%@ 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 も使用する必要があります。

于 2013-08-13T00:43:17.807 に答える