概要
需要は少ないと思いますが、ハマる人もいるかもしれないと思ったので覚書。
下記は、googleアカウントでログインのサンプルコードです。
ここで、コールバック関数onSignInの定義にlet onSignIn = function(){...} を使用すると、コールバック関数が呼ばれなくなりました。
詳細は、下記詳細をご覧ください。
sample.html
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="<用意したクライアントID>">
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
function onSignIn(googleUser) { //"let onSingIn = function(googleUser){"は使用できない
var id_token = googleUser.getAuthResponse().id_token;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'test.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
console.log('Signed in as: ' + xhr.responseText);
};
xhr.send('idtoken=' + id_token);
window.location.href = 'index.php';
}
</script>
</body>
</html>
詳細
sample.js
function onSignIn(googleUser) {...} //OK
var onSignIn = function(googleUser){...} //OK
let onSignIn = function(googleUser){...} //NG
原因
スコープ範囲か呼び出し順の関係だと思うけど。
素直にサンプル通りに書けと言うことなのか。
設定で何かやらかしたのかと思って、焦った。
その後
googleに報告したところ、issue trackerに登録されました。
結論としては、機弱性には関係ないから、そちらで何とかしてね(ハートだそうです。