Google - 使用 Google 登入 - hoyo 學習紀錄

因為

所以要更新

參考

應用

使用起來更簡單了，這樣就可以使用 Google 登入了，當然前提是已經有申請 Google API 以及設定了相關的金鑰

<html>
<body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>
    <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
    <script>
        function handleCredentialResponse(response) {
            // decodeJwtResponse() is a custom function defined by you
            // to decode the credential response.
            const responsePayload = jwt_decode(response.credential);

            console.log("ID: " + responsePayload.sub);
            console.log('Full Name: ' + responsePayload.name);
            console.log('Given Name: ' + responsePayload.given_name);
            console.log('Family Name: ' + responsePayload.family_name);
            console.log("Image URL: " + responsePayload.picture);
            console.log("Email: " + responsePayload.email);
        }
    </script>
</body>
</html>

<html>

<body>

<div id="g_id_onload"

data-client_id="YOUR_GOOGLE_CLIENT_ID"

data-callback="handleCredentialResponse">

</div>

<div class="g_id_signin"

data-type="standard"

data-size="large"

data-theme="outline"

data-text="sign_in_with"

data-shape="rectangular"

data-logo_alignment="left">

</div>

function handleCredentialResponse(response) {

// decodeJwtResponse() is a custom function defined by you

// to decode the credential response.

const responsePayload = jwt_decode(response.credential);

console.log("ID: " + responsePayload.sub);

console.log('Full Name: ' + responsePayload.name);

console.log('Given Name: ' + responsePayload.given_name);

console.log('Family Name: ' + responsePayload.family_name);

console.log("Image URL: " + responsePayload.picture);

console.log("Email: " + responsePayload.email);

}

</script>

</body>

</html>

1,959 total views, 1 views today

Google - 使用 Google 登入

因為

參考

應用

Related Post

發佈留言

Google - 使用 Google 登入

因為

參考

應用

Related Post

PWA - LINE Notify 結束服務後，有網站的真正免費解決方案

PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝

發佈留言