我们平常也经常使用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. python两个队列实现一个栈和两个栈实现一个队列

    1.两个栈实现一个队列 两个栈stack1和stack2, push的时候直接push进stack1,pop时需要判断stack1和stack2中的情况.如果stack2不为空的话,直接从stack2 ...

  2. 小码哥哥 FastJson--阿里巴巴公司开源的速度最快的Json和对象转换工具

    转载地址:http://www.oschina.net/code/snippet_228315_35122?_t_t_t=0.4667952097048127 class User{ private ...

  3. SpringSecurity 如何提示错误

    1.可以通过authentication-failure-url="/login.html?error=1" 前端接收参数,根据参数提示 错误 2.前端vue this.myNam ...

  4. Android中的AlertDialog和ProgressDialog用法

    手机APP对话框是很多APP都有的下面来看下怎么实现的吧, 打开Android studio 然他自动创建好布局和类; 下面我们修改activity_main.xml中的代码 <?xml ver ...

  5. Win10+GTX906M+Tensorflow-gpu==2.1.0

    环境 Windows10 GeForce GTX 960M python 3.7.6 tensorflow-gpu==2.1.0 CUDA 10.2 cuDNN v7.9.4.38 for windo ...

  6. 多线程的lock功能

    import threading def job1(): global A, lock lock.acquire() for i in range(10): A += 1 print('job1', ...

  7. appium使用相对坐标定位元素

    最近在用appium做自动化时发现,有一些元素无法通过uiautomatorviewer进行定位,这样就只能通过相对坐标来进行定位了.但是,问题又来了:如何获取元素的坐标呢? 在网上找了半天也没找到相 ...

  8. Wordpress 外网访问时不显示图片解决办法

    我的云服务器是 :windows2012R 打开命令行: 进入到mysql中 show databases; //查看你Wordpress使用的数据库是否存在 use blog; //例如你使用的数据 ...

  9. 47-Python进阶小结

    目录 Python进阶小结 一.异常TODO 二.深浅拷贝 2.1拷贝 2.2 浅拷贝 2.3 深拷贝 三.数据类型内置方法 3.1 数字类型内置方法 3.1.1 整型 3.1.2 浮点型 3.2 字 ...

  10. LeetCode--链表2-双指针问题

    LeetCode--链表2-双指针问题 思考问题: 判断一个链表是否有环 列举几种情况: graph LR A-->B B-->C C-->D D-->E E-->C g ...