2016-04-28 1 views
1

にアクセスしようとするが、コンソールに、私はエラーました:で検査した後グーグルサインインAPI <a href="https://developers.google.com/identity/sign-in/web/sign-in#specify_your_apps_client_id" rel="nofollow" title="google documentation">google sign-in docs</a>、AUTH作品で説明したように、私はシンプルなGoogleのログインボタンを実装していますunexisting DOM要素に

cb=gapi.loaded_0:247 Uncaught TypeError: Cannot read property 'style' of nullG_ 
@ cb=gapi.loaded_0:247(anonymous function) 
@ cb=gapi.loaded_0:251(anonymous function) 
@ cb=gapi.loaded_0:145c.port1.onmessage 
@ cb=gapi.loaded_0:72 

を縮小さGoogleのコードにはunexisting DOM要素にアクセスしようとするように、それが見えます:

document.getElementById("not_signed_in"+a.El) 
//it prints: "not_signed_invrnlb3wwqpsh" 

認証は動作しますが、私はangular.jsアプリ内でこれと同じコードを使用しようとすると、エラーが私に影響を及ぼしています。これは、エラーを再現するための簡単なHTMLコードです:

<html> 
<head> 
<script src="https://apis.google.com/js/platform.js" async defer></script> 
<meta name="google-signin-client_id" content="MY_APP_ID.apps.googleusercontent.com"> 
</head> 
<body> 
<script type="text/javascript"> 
function onSignIn(googleUser) { 
    console.log('Name: ' + profile.getName()); 
} 
</script> 
<p>please sign in</p> 
<div class="g-signin2" data-onsuccess="onSignIn"></div> 
</body> 
</html> 

答えて

0

私はそれは、角度によって非同期動作によって引き起こされる疑い(または任意の他のフレームワークは、同様に動作できます)。その場合は、.g-signin2ではなくボタンを手動でレンダリングすることをおすすめします。

gapi.signin2.render()を使用すると、ボタンの描画タイミングを制御する最も簡単なオプションです。 https://developers.google.com/identity/sign-in/web/build-button#customizing_the_automatically_rendered_sign-in_button_recommended

ただし、.attachClickHandler()を使用して、カスタムボタンにログイン機能を組み込むこともできます。 https://developers.google.com/identity/sign-in/web/build-button#building_a_button_with_a_custom_graphic

関連する問題

 関連する問題