網頁接Google第三方登入問題

html google oauth 2.0

yoyokuo2007 2023-11-12 18:02:38 ‧ 1218 瀏覽

分享至

小弟利用HTML製作Google第三方登入，按下登入以後確實會有Popup，並且可以選擇帳號後自動關掉Popup視窗，但完成之後卻沒有執行onSignIn Function，他好像被判斷為用戶手動關閉，試過了好幾次都一樣，請問有什麼解法嗎?

https://upload.cc/i1/2023/11/12/C4HiZJ.png

Google Cloud設定上Localhost也有弄到授權名單
https://upload.cc/i1/2023/11/12/0TXNZx.png

CODE如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-signin-client_id" content="XXXXXXXXXXXXX"> <!-- XXXXXXXXXXXXX為Client ID-->
    <title>Document</title>

    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="profileinfo"></div>
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
    <script>
        function onSignIn(googleUser){
            var profile = googleUser.getBasicProfile();

            $("#profileinfo").append("<h2>Name- " + profile.getName() + "</h2>");
            $("#profileinfo").append("<img style='width: 150px;height:150px' src='"+profile.getImageUrl()+"'><br><br>");
            $("#profileinfo").append("<p>Your email is: "+profile.getEmail()+"</p>");
        }
    </script>
    <br>
    <button type="button" class="btn btn-danger" onclick="signOut();">Sign Out</button>
    <script>
        function signOut(){
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.signOut().then(function(){
                console.log("User signed out.");
            $("#profileinfo").empty();
            $("#profileinfo").append("<h2>Signed Out.</h2>")
            })
        }
    </script>
</body>
</html>