我们平常也经常使用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. IDEA无法启动：Failed to create JVM：error code -1

    转自:https://blog.csdn.net/u013243986/article/details/52296944 随便设置把内存加大了, 结果idea就奔溃了,再打开时就提示这样的错误,Fai ...

  2. java操作telnet远程登录

    import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import jav ...

  3. Dangling meta character '' near index 0

    1.replaceAll()方法报错 对字符串使用replaceAll()方法替换 * ? + / | 等字符的时候会报以下异常 Dangling meta character '*' near in ...

  4. 那些被刻意“阉割”的名人名言

    "天才是百分之一的灵感,百分之九十九的汗水",这句名言大家都知道的吧!不过还有好多人不知道的是这句名言还有后半句:"但百分之一的灵感甚至比百分之九十九的汗水更重要.&qu ...

  5. 教你win7关闭开机动画，大幅度加快开机时间

    Win7系统如何关闭开机动画 Win7系统开机动画关闭教程,以前我们说过很多种帮助Win7开机加速的方法,比如减少Win7开机启动的程序.服务或计划任务等.不过这些都优化都是针对已经进入Win7系统后 ...

  6. iPhone8、Note8、Mate10硬上面部识别：是潮流还是无奈

    ​ 对于手机厂商来说,时不时抛出几个全新概念当噱头来引起业界和大众的关注,已经成为了必然套路.其中有很多改变智能手机发展进程的技术--双摄像头.指纹识别.快充等,但也有很多纯粹来凑数,看似新潮却始终没 ...

  7. IDEA系列（九）Intellij IDEA界面介绍 - 哲也的博客

    原文出处:https://github.com/judasn/IntelliJ-IDEA-Tutorial 首次打开 重点说明: IntelliJ IDEA 是没有类似 Eclipse 的工作空间的概 ...

  8. JQUERY的基本使用方法

    #准备工作 在官网下载JQUERY库 将库在你需要的网页上引用 123 <head><script src="jquery.js"></script& ...

  9. AI未来如何应对人类的欺骗？

    人工智能正以可预见.不可预见的种种形式无孔不入地涉足社会的各个层面,这既让人兴奋,也让人不安.我们能够预测到这样的情绪反应,但我们真的能够预测到人工智能所涉及的相关风险吗? 假若现在是2022年,你乘 ...

  10. 《HelloGitHub》第 47 期

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...