7

私たちのウェブサイトでGoogleログインを実装しようとしています。ドキュメントを読み、apis コンソールでアプリケーションをセットアップしました。

サインアップダイアログがポップアップに表示され、ユーザーがログインしてアクセス許可を受け入れた後、javascript コールバックを取得することをお勧めします。これは、ドキュメントに従ってAPIもサポートしています。だから私はドキュメントの助けを借りて以下を構築します;-)

この最初の部分は、Google クライアント スクリプトを非同期にロードし、スクリプトを正しい clientid と apikey で初期化することです。

$gp = new googlePlus('@Trustpilot.Web.Social.Google.ClientID', '@Trustpilot.Web.Social.Google.ApiKey');
(function () {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client.js?onload=googlePlusClientLoad';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

次の部分は、Google クライアント API を使用する部分です。client.js がロードされると、 handleClientLoad() が呼び出されます。このメソッドは、使用が認証されているかどうかを確認します。ユーザーがそうである場合、アイデアは、ユーザーにログインしたいということです。ユーザーがまだ認証されていない場合は、ボタンが表示され、クリックすると handleAuthClick() が呼び出されます。基本的には handleClientLoad() と同じですが、ユーザーが (Google アカウントで) ほとんどログインしてアクセス許可を受け入れるポップアップが表示されます。ログインした後、ユーザーをログインさせる handleAuthResult() が呼び出されます。

function googlePlus(clientId, apiKey) {
    this.clientId = clientId;
    this.apiKey = apiKey;
    this.scopes = 'https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.email';

    /// This method is called when the javascript is loaded async
    this.handleClientLoad = function() {
        gapi.client.setApiKey(this.apiKey);
        window.setTimeout(this.authorize(true), 1);
    };

this.handleAuthResult = function (authResult) {
    console.log(authResult);
    if (authResult && !authResult.error) {
        var token = gapi.auth.getToken();
        console.log(token);
    }
    else if (authResult && authResult.error) {
        alert(authResult.error);
    }
};

this.handleAuthClick = function(event) {
    this.authorize(false);
    return false;
};

this.makeApiCall = function() {
    gapi.client.load('plus', 'v1', function () {
        var request = gapi.client.plus.people.get({
            'userId': 'me'
        });
        request.execute(function (resp) {
            console.log(resp);
        });
    });
};

    this.authorize = function (immediate) {
        gapi.auth.authorize({ client_id: this.clientId, scope: this.scopes, immediate: immediate }, this.handleAuthResult());
        //gapi.auth.authorize({ client_id: this.clientId, scope: this.scopes, immediate: immediate }, this.handleAuthResult());
    };
}
var googlePlusClientLoad = function() {
    $gp.handleClientLoad();
};

だから今問題に：

  1. handleClientLoad が呼び出されると、ユーザーがすでに認証されていても、ユーザーは認証されません。
  2. ユーザーが handleAuthClick() を使用すると、ポップアップが表示され、ログイン、権限、および handleAuthResult() へのコールバックが機能します。ただし、パラメーター authResult は常に何もありません (ドキュメントに記載されているものである必要があります)。
  3. ページをリロードせずに何度も試すと、makeApiCall() と gapi.auth.getToken() が機能して必要な情報を取得できる場合があります。
4

1 に答える 1

1

コードには 2 つの問題があります。

  • API キーは不要です。削除できます。OAuth2 を介してユーザー トークンを取得するだけで十分です。

  • ではauthorize()、handleAuthResultメソッドが正しく呼び出されていません。関数名の末尾にある括弧を削除してください。関数を実行する必要はありません。参照を渡すだけです。メソッドは次のauthorizeようになります。

    gapi.auth.authorize({ client_id: this.clientId, scope: this.scopes, immediate: immediate }, this.handleAuthResult);

括弧の違いに注意してください。

于 2014-07-26T06:31:51.783 に答える