JSFiddle - React, Tailwind, and code Playground

by YJ H

HTML

<script src="https://apis.google.com/js/platform.js"></script>
<button id="getProfile">取得資訊</button>
    <div class="g-signin2" data-onsuccess="onSignIn" data-longtitle="true"></div>
    <a href="#" onclick="signOut();">Sign out</a>

JavaScript

function signOut() {
            var auth2 = gapi.auth2.getAuthInstance();
            auth2.signOut().then(function() {
                console.log('User signed out.');
            });
        }
        
        function onSignIn(googleUser) {
            var profile = googleUser.getBasicProfile();
            //            var profile2 = auth2.currentUser.get().getBasicProfile();
            var id_token = googleUser.getAuthResponse().id_token;
            console.log('id_token: ' + id_token);
            console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
            //            console.log('ID: ' + profile2.getId());
            console.log('Name: ' + profile.getName());
            console.log('Image URL: ' + profile.getImageUrl());
            console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
            //            alert("123");
            var xhr = new XMLHttpRequest();
            var backendURL = 'http://172.25.33.9:8080/qrcodeservice/v1/asset/admin/idToken';
            xhr.open('POST', backendURL);
            xhr.setRequestHeader('Content-Type', 'application/json');
            //            xhr.send('idtoken=' + id_token);
            xhr.send(id_token);
            xhr.onload = function() {
                console.log('Signed in as: ' + xhr.responseText);
            };
        }

 function onSuccess(googleUser) {
            console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
        }

        function onFailure(error) {
            console.log(error);
        }