7

GoogleのウェブサイトでGoogleログインの実装を試みています。私はドキュメントを読んで、apisコンソールでアプリケーションを設定しました。Google認証javascript

私は、サインアップダイアログがポップアップで表示され、ユーザーがログインして、javascriptコールバックを取得する権限を受け入れることをお勧めします。これは、APIにも対応しています。そこで、私はドキュメントの助けを借りて以下を構築します;

この最初の部分は、Googleクライアントスクリプトasyncを読み込み、スクリプトを正しい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を使用していますパーツ。 handleClientLoad()は、client.jsがロードされたときに呼び出されます。このメソッドは、使用が認証されているかどうかをチェックします。ユーザーがいる場合は、ユーザーにログインしたいという考えがあります。 ユーザーがまだ認証されていない場合はボタンが表示され、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(); 
}; 

handleClientLoadは、ユーザーがすでにautehnticatedしている場合、ユーザーがさえ 認証されることはありませんと呼ばれる

  1. ユーザーがhandleAuthClick()を使用すると、ポップアップが表示され、ログインした場合、handleAuthResult()へのアクセス権と コールバックが機能します。しかし、パラメータauthResultは常に です(ドキュメントに何かあるはずです)。
  2. ページを再ロードせずに何度も試してみると、時には makeApiCall()とgapi.auth.getToken()を取得して必要な情報を取得できます。
+0

私はjavascript APIを使用して同じ問題があります。あなたがすでにそれを解決している場合は、あなたの答えを共有してください。 – xrnd

答えて

1

あなたのコード内の二つの問題があります

  • はAPIキーが必要とされていない、あなたはそれを削除することができます。あなたはOAuth2を通してユーザートークンを取得し、これで十分です。
  • authorize()では、handleAuthResultメソッドが正しく呼び出されないため、関数名の末尾にある括弧を削除してください。関数を実行したくない場合は、その参照を渡すだけです。ここでauthorize方法は次のように見なければならないものです。

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

注括弧の違い。