1

バックボーン js アプリで google+ ログインを使用しようとしています。ユーザーフローは、

  1. ユーザーがログインボタンをクリックする
  2. これにより、ブートストラップ ( thttp://twitter.github.io/bootstrap/ ) モーダルが開き、google+ サインイン ボタン (facebook ログインなど) が表示されます。
  3. ユーザーは明示的に g+ サインイン ボタンをクリックしてサイトにログインする必要があります。

自動 g+ サインインを防ぐために、カスタム g+ サインイン ボタンと onclick を表示し、そのカスタム サインイン ボタンをコンテナーとして「gapi.signin.render」API を使用します。これは、サインイン ボタンが最初にクリックされたときに正常に機能しますが、ユーザーがログアウトして再ログインしようとすると、最初のクリックでは何も起こりませんが、2 回目のクリックで g+ サインインが 2 回トリガーされ、ユーザーがログアウトするたびに 1 ずつ増加します。そして、再ログインします。そして、g+ サインインが 2 回目のクリックでのみトリガーされるたびに。私のアプリは単一ページのアプリであるため、ログアウトとログインの間にリロードがないことに注意してください。サイトをリロードすると、最初は機能し、その後のサインインで問題が発生します。

注: g+ サインイン ボタンを表示するために使用するモーダル (およびその DOM) は、ログインが成功するたびに削除され、ユーザーがメインのログイン ボタンをクリックするたびに再作成されます。ログインに成功した後、g+ サインイン ボタンによって作成された iframe がまだ存在し、モーダルを再作成して「gapi.signin.render」API 呼び出しを呼び出すと、干渉している可能性があることに気付きました。

私が使用するコードは

バックボーン ビューでは、render メソッドは

render: function() {
        var thisV = this;
        _.defer(function(){
            gapi.signin.render('gSignIn', {
              'callback': thisV.gPlusLoginCB,
              'clientid': "clientID",
              'requestvisibleactions': "http://schemas.google.com/AddActivity",
              'scope': "https://www.googleapis.com/auth/plus.login",
              'theme': 'dark',
              'cookiepolicy': "single_host_origin"
            });
        });
    }

そして、私が持っているhtmlテンプレートで

<button id="gSignIn" class="btn gplogin">
      <i class="icon-google-plus"></i>Login
</button>

G+ サインインの呼び出しがキューに入れられる理由や、シナリオの実装方法について何か考えはありますか?

ありがとう

4

2 に答える 2

0

複数の認証試行が表示される理由はわかりません。

この動作が見られる最小限のコード例を投稿できますか?

あなたの説明に基づく推測として、g-signin ボタンのカスタム レンダリングと gapi.signin.render を混在させていますか? たとえば、カスタム ボタンを次のようにレンダリングします。

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
    <!-- Custom button markup -->
  </span>
</span>

次に、たとえば次のように呼び出します。

gapi.signin.render('signinButton', {
      //'callback': 'signinCallback',
      'clientid': 'CLIENT_ID',
      'cookiepolicy': 'single_host_origin',
      'requestvisibleactions': 'http://schemas.google.com/AddActivity',
      'scope': 'https://www.googleapis.com/auth/plus.login'
    });
  }
于 2013-04-16T11:18:52.797 に答える