一、打开谷歌控制台:https://console.developers.google.com/apis

二、点击创建凭据,如下图,填写项目地址等

三、创建好客户端ID和秘钥后,填写对应的项目网址和登录页网址

四、修改OAuth同意屏幕网站首页地址和隐私政策网址

五、代码部分如下:

<script src="https://apis.google.com/js/api:client.js"></script>function google_login() {
var googleUser = {};
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: '申请得到的客户端ID', //客户端ID
cookiepolicy: 'single_host_origin',
scope: 'profile' //可以请求除了默认的'profile' and 'email'之外的数据
});
attachSignin(document.getElementById('google_button')); //点击google登录的按钮
}); } function attachSignin(element) {
auth2.attachClickHandler(element, {},
function(googleUser) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
}, function(error) {
console.log(JSON.stringify(error, undefined, 2));
});
}

Web网站实现Google登录的更多相关文章

  1. 钉钉授权第三方WEB网站扫码登录

    一.阅读开发文档 首先阅读钉钉官方的开发文档,扫码登录其实用的是官方文档描述的第二种方式,即将钉钉登录二维码内嵌到自己页面中,用户使用钉钉扫码登录第三方网站,网站可以拿到钉钉的用户信息. 二.准备工作 ...

  2. Web网站实现facebook登录

    一.登录facebook开发者中心:https://developers.facebook.com 二.创建应用编号,如下图: 三.添加产品选择Facebook登录,如下图: 四.facebbok登录 ...

  3. (钉钉)第三方WEB网站扫码登录

    年底在做钉钉和公司的知识库产品的对接,怎么使用钉钉api的如下: 第一步: 登录:https://oa.dingtalk.com/#/welcome 这点可以自己建立一个企业账号进行测试 点击工作台建 ...

  4. NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证

    JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器.每一种解析器都是一个运行环境,不但允许J ...

  5. 搭建开发框架Express,实现Web网站登录验证

    NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证   JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需 ...

  6. JWT(JSON Web Token) 多网站的单点登录,放弃session

    多个网站之间的登录信息共享, 一种解决方案是基于cookie - session的登录认证方式,这种方式跨域比较复杂. 另一种替代方案是采用基于算法的认证方式, JWT(json web token) ...

  7. JWT(JSON Web Token) 多网站的单点登录,放弃session 转载https://www.cnblogs.com/lexiaofei/p/7409846.html

    多个网站之间的登录信息共享, 一种解决方案是基于cookie - session的登录认证方式,这种方式跨域比较复杂. 另一种替代方案是采用基于算法的认证方式, JWT(json web token) ...

  8. 【架构】浅谈web网站架构演变过程

    浅谈web网站架构演变过程   前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管 ...

  9. (转)web网站架构演变

    浅谈web网站架构演变过程   前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管 ...

随机推荐

  1. 工具系列 | PHPSTROM 连接Docker容器 && 配置XDEBUG调试

    Docker 客户端配置 PHPSTROM 配置 选择连接 容器日志 配置Xdebug 开启Debug模式 打断点 浏览器访问该项目地址:http://wiot.frp.tinywan.top/

  2. FNV哈希算法(转)

    由来:FNV哈希算法全名为Fowler-Noll-Vo算法,是以三位发明人Glenn Fowler,Landon Curt Noll,Phong Vo的名字来命名的,最早在1991年提出. 特点和用途 ...

  3. 认真分析mmap:是什么 为什么 怎么用(转)

    阅读目录 mmap基础概念 mmap内存映射原理 mmap和常规文件操作的区别 mmap优点总结 mmap相关函数 mmap使用细节 回到顶部 mmap基础概念 mmap是一种内存映射文件的方法,即将 ...

  4. vue form表单上传文件

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js">< ...

  5. phpspreadsheet

    2019-5-9 8:20:07 星期四 昨天在看PHPExcel的时候, github上作者说已经停止更新了, 推荐使用phpspreadsheet, 查看了一下官方文档, 功能还挺强大的, 可以读 ...

  6. 如何上传本地jar至远程仓库供其他项目使用

    我们首先需要创建自己内部nexus私服仓库.这里假设你已经做好了. 其次我们要明白nexus上如下几个component的用处. maven-central:maven中央库,默认从https://r ...

  7. oracle 导出,导入表

    导出 exp DZQZ/DZQZ@orcl file=D:/DZQZ.dmp log=D:/DZQZ.log 导入 imp DZQZ/DZQZ@orcl file=D:\电子取证\DZQZ.dmp f ...

  8. JAVA中生成指定位数随机数的方法总结

    JAVA中生成指定位数随机数的方法很多,下面列举几种比较常用的方法. 方法一.通过Math类 public static String getRandom1(int len) { int rs = ( ...

  9. UE4 移动物体的几种方法

    转自:https://dawnarc.com/2016/06/ue4%E7%A7%BB%E5%8A%A8%E7%89%A9%E4%BD%93%E7%9A%84%E5%87%A0%E7%A7%8D%E6 ...

  10. ThinkPHP3验证码、文件上传、缩略图、分页(自定义工具类、session和cookie)

    验证码 TP框架中自带了验证码类 位置:Think/verify.class.php 在LoginController控制器中创建生存验证码的方法 login.html登陆模板中 在LoginCont ...