我们平常也经常使用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的更多相关文章

  1. google+ sign in and get the oauth token 转摘：https://gist.github.com/ianbarber/5170508

    package com.example.anothersignintest;   import java.io.IOException;   import com.google.android.gms ...

  2. Google Spreadsheet Add-on Links Extractor 谷歌表格插件链接提取器的制作与发布（附源码）

    引言 为什么想到制作这么一个插件呢,是因为博主在更新微信公众号[刷尽天下]的后台数据库时,需要有博客园题目帖子的链接,那么就要从这篇帖子 LeetCode All in One 题目讲解汇总(持续更新 ...

  3. Android Weekly Notes Issue #258

    Android Weekly Issue #258 May 21st, 2017 Android Weekly Issue #258 本期内容: 围绕着Google I/O的热潮, 本周的posts除 ...

  4. android studio学习---模板

    Android Studio还为开发人员提供多种模板选项,从而大大提升开发速度.这些模板能自动创建Activity以及必要的XML文件.大家还可以利用这些模板创建出较为基础的Android应用程序,并 ...

  5. Google Play sign sha1 转 Facebook login 需要的 hashkey

    :4E:::::3A:1F::A6:0F:F6:A1:C2::E5::::2E | xxd -r -p | openssl base64 输出 M05IhBlQOh9jpg/2ocIx5QE4VS4= ...

  6. [转]Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#)

    本文转自:https://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-o ...

  7. 算法系列（1）：Google方程式

    有一个字符组成的等式:WWWDOT – GOOGLE = DOTCOM,每个字符代表一个0-9之间的数字,WWWDOT.GOOGLE和DOTCOM都是合法的数字,不能以0开头.请找出一组字符和数字的对 ...

  8. google play iap 常见问题

    1.测试阶段query时获取的sku对象为空 解:测试阶段只能使用如下sku // private static final String SKU_TEST = "android.test. ...

  9. How Google TestsSoftware - Part Three

    Lots of questions in thecomments to the last two posts. I am not ignoring them. Hopefully many of th ...

随机推荐

  1. notepad++下载及安装

    下载notepad++: 官网 安装:https://jingyan.baidu.com/article/154b463109921828cb8f4151.html 如果下载的64位没有插件管理器,单 ...

  2. 写个匹配某段html dom代码某属性的正则匹配方法

    private static string GetHtmlDomAttr(string html, string id, string attrname) { string xmatchstring ...

  3. 初等数论-Base-2(扩展欧几里得算法，同余，线性同余方程，(附：裴蜀定理的证明))

    我们接着上面的欧几里得算法说 扩展欧几里得算法 扩展欧几里德算法是用来在已知a, b求解一组x,y,使它们满足贝祖等式\(^①\): ax+by = gcd(a, b) =d(解一定存在,根据数论中的 ...

  4. 金矿还是大坑 VR创业真有那么美好？

    VR创业真有那么美好?"> 近段时间,一个段子在疯狂流传:彩票中奖的1000万,其实是存放在银行里,而彩民每次花两块钱买彩票,其实就是去输一次密码,只要够坚持,总会取出那1000万-- ...

  5. 11--PHP中的类和对象

    PHP类和对象 类是面向对象程序设计的基本概念,通俗的理解类就是对现实中某一个种类的东西的抽象, 比如汽车可以抽象为一个类,汽车拥有名字.轮胎.速度.重量等属性,可以有换挡.前进.后退等操作方法. 通 ...

  6. sublime安装vue插件

    1.打开sublime text 3按 Ctrl+Shift+P(相信你有单身的手速,同时按完这3个键) 2.选中上图中,框出来的内容,按下enter. 3.选择上图的第二个即:vue syntax ...

  7. Zookeeper的核心概念以及java客户端使用

    一.Zookeeper的核心概念 分布式配置中心(存储):disconf(zk).diamond(mysql+http) 1)znode ZooKeeper操作和维护的是一个个数据节点,称为 znod ...

  8. eggjs+vue+nginx配置

    安装node https://github.com/nodesource/distributions#installation-instructions-1 注意使用No root privilege ...

  9. 50-Python2和3字符编码的区别

    目录 Python2和3字符编码的区别 python2 python3 Python2和3字符编码的区别 区别点 python2 python3 print 是一个语法结构 是一个函数,print(' ...

  10. 使用timeit测试Python函数的性能

    timeit是Python标准库内置的小工具,可以快速测试小段代码的性能. 认识timeit timeit 函数: timeit.timeit(stmt, setup,timer, number) 参 ...