0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

googleアカウントでログイン(OAuth認証)で少しハマった

Last updated at Posted at 2022-01-28

概要

需要は少ないと思いますが、ハマる人もいるかもしれないと思ったので覚書。
下記は、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に登録されました。
結論としては、機弱性には関係ないから、そちらで何とかしてね(ハートだそうです。

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?