Google Sign In

我们平常也经常使用QQ，微信账号，登录其他应用。最近公司让我给网站添加一个谷歌账号登录。我来这里记录一下，莫怪~~~莫怪~~~

1. 申请一个账号登录ID: https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin

2. 拿到ID:

var clientId = "**********.apps.googleusercontent.com";

3. 在官网https://developers.google.com/identity/sign-in/web/有一段代码更改下clientId就可以在页面中使用，只是效果可能与实际需求有点差别。

<html lang="en">

<head>

    <title>test.html</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="google-signin-scope" content="profile email">

    <meta name="google-signin-client_id" content="*** Your client_id ***.apps.googleusercontent.com" />

    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <script type="text/javascript">

        function onSignIn(googleUser) {

            var profile = googleUser.getBasicProfile();

            var parameter = {

                id: profile.getId(),

                userName: profile.getName(),

                email: profile.getEmail(),

                imageUrl: profile.getImageUrl(),

                givenName: profile.getGivenName(),

                familyName: profile.getFamilyName(),

                imgUrl: profile.getImageUrl()

            };
            var vid_token = googleUser.getAuthResponse().id_token;

        }

        function signOut() {

            var auth2 = gapi.auth2.getAuthInstance();

            auth2.signOut().then(function () {

                console.log('User signed out.');

            });

        }</script>

</head>

<body>

    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>

    <a href="#" onclick="signOut();">Sign out</a>

</body>

</html>

4. 来啦来啦，下面是我根据公司网站和实际需求，参考着官网上写的代码。（感觉公司对待某些网站功能时，挺随意的，需要的说添加就添加。呃，我啥也没说~_~~~）

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

    <style type="text/css">

        .g-signin-wrapper {

            padding: 5px ;

        }

        .customGPlusSignIn {

            display: inline-block;

            width: 180px;

            /* 背景顏色設定 */

            background-color: #4285f4;

            color: #ffffff;

            border-radius: 5px;

            border: thin solid #;

            box-shadow: 1px 1px 1px grey;

            white-space: nowrap;

        }

        .customGPlusSignIn:hover {

            cursor: pointer;

        }

        .label {

            /* display: none; */

            padding-left: 3px;

            color: #;

            font-family: serif;

            font-weight: normal;

        }

        .icon {

            display: inline-block;

            vertical-align: middle;

            width: 34px;

            height: 24px;

            background: url('https://developers.google.com/identity/sign-in/g-normal.png') transparent 3px % no-repeat;

            background-color: #ffffff;

            border-radius: 5px   5px;

        }

        .buttonText {

            display: inline-block;

            vertical-align: middle;

            width: 140px;

            font-size: 14px;

            font-weight: bold;

            font-family: 'Roboto', sans-serif;

            text-align: center;

        }

    </style>

    <script>

        var clientId = "******.apps.googleusercontent.com";

        //登錄按鈕事件

        function GoogleLogin() {

            gapi.load('auth2', function () {

                var auth2 = gapi.auth2.init({

                    client_id: clientId,

                    //fetch_basic_profile: false,　//这里true或false的值会影响，下面的googleUser.getBasicProfile()的取值和api验证返回结果res的值

                    fetch_basic_profile: true,

                    scope: "profile email"

                });

                auth2.signIn().then(function (googleUser) {

                    var profile = googleUser.getBasicProfile();

                    var response = googleUser.getAuthResponse();

                    var parameter = {

                        id: profile.getId(),

                        userName: profile.getName(),

                        email: profile.getEmail(),

                        imageUrl: profile.getImageUrl(),

                        givenName: profile.getGivenName(),

                        familyName: profile.getFamilyName()

                    };

                    var verifyUrl = "https://oauth2.googleapis.com/tokeninfo?id_token=" + response.id_token;

                    getRespone(verifyUrl);

                });

            });

        }

        function getRespone(url) {

            $.ajax({

                type: "GET",

                cache: false,

                url: url,

                success: function (res) {

                    console.log(res);   // res： api驗證后的結果

                }

            });

        }

    </script>

</head>

<body>

    <div id="gSignInWrapper" class="g-signin-wrapper">

        <span class="label">Sign in with:</span>

        <div id="customBtn" class="customGPlusSignIn" onclick="GoogleLogin()">

            <span class="icon"></span>

            <span class="buttonText">Sign in with Google</span>

        </div>

    </div>

</body>

</html>

5.API: https://oauth2.googleapis.com/tokeninfo?id_token=*********验证通过的返回值

{

   alg: "RS256"

　　at_hash: "EZlzneWBRJGP4318W12vZQ"

　　aud: "******.apps.googleusercontent.com"　　/* 与ClientID的值相同 */

　　azp: "******.apps.googleusercontent.com"

　　email: "******@gmail.com"　　　　/* google的邮箱账号 */

　　email_verified: "true"　　/* 是否是邮箱账号 */

　　exp: ""

　　family_name: "AA"　　/* 姓 */

　　given_name: "vvv"　　/* 名 */

　　iat: ""

　　iss: "accounts.google.com"　　/* google账号登录的标识 */

　　jti: "ce11dc29ac53aa52533f5489b1dde03988035785"

　　kid: "60f4060e58d75fd3f70beff88c794a775327aa31"

　　locale: "zh-CN"

　　name: "vvv AA"  /* 姓名 */

　　picture: "https://lh6.googleusercontent.com/**********/photo.jpg"　　/* 头像url */

　　sub: ""　　　　/* 与上面的googleUser.getBasicProfile().getId()相同 */

　　typ: "JWT"

}

6. 在浏览器加载页面时，判断是否登录google账号，若已登录，则弹出提示窗口。

这个功能在iframe嵌套的页面会出错，具体原因不知道，听老大说，有些服务会禁止在iframe嵌套的页面使用。

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://smartlock.google.com/client" defer></script>

    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

    <script>

        var clientId = "******.apps.googleusercontent.com";

        //進入頁面，Google登錄彈窗提示

        window.onGoogleYoloLoad = function (googleyolo) {

            var config = {

                supportedAuthMethods: ["https://accounts.google.com"],

                supportedIdTokenProviders: [{ uri: "https://accounts.google.com", clientId: clientId }]

            };

            googleyolo.hint(config).then(function (credential) {

                getRespone("https://oauth2.googleapis.com/tokeninfo?id_token=" + credential.idToken);

            }, function (error) {

                console.log(error);

            });

            var bodyObserver = new MutationObserver(function (mutationsList) {

                for (var i = ; i < mutationsList.length; i++) {

                    var mutation = mutationsList[i];

                    for (var j = ; j < mutation.addedNodes.length; j++) {

                        var node = mutation.addedNodes[j];

                        if (node.nodeName === 'IFRAME' && node.src.includes('smartlock.google.com/iframe/')) {

                            bodyObserver.disconnect();

                            node.onmouseover = function () {

                                clearInterval(timer);

                            }

                            node.onmouseleave = function () {

                                timer = setTimeout(function () { node.style.display = "none"; }, );

                            }
　　　　　　　　　　　　　　　　　// 10秒后隐藏窗体

                            var timer = setTimeout(function () { node.style.display = "none"; }, );

                        }

                    }

                }

            });

            bodyObserver.observe(window.document.body, { childList: true });

        }

        function getRespone(url) {

            $.ajax({

                type: "GET",

                cache: false,

                url: url,

                success: function (res) {

                    console.log(res);   // res： api驗證后的結果

                }

            });

        }

    </script>

</head>

<body>

   <!-- 参考链接：　　　　https://github.com/zapier/google-yolo-inline/blob/master/google-yolo-iframe.html
　　　　https://github.com/openid/OpenYOLO-Web
　　　　https://medium.com/groww-engineering/all-about-googles-one-tap-sign-in-b8c1c93305d4
　　 -->

</body>

</html>

巴特西

Google Sign In

最新文章

热门文章