最近真是一刻不得闲...各种事情像暴风雨一样砸过来
上菜~
在Vue项目中使用google登录
说到google登录，第一点毫无疑问...
那就是你需要有一张梯子和一个google账号
在google开发者官方网站中，google官方将开发所需要用到的API都放在那里 https://developers.google.com
或者你也可以直接进入Google API 控制中心 https://console.developers.google.com
从控制中心进入到API库中，打开之后你会发现一片新天地
那么多的API是不是眼睛看花了，最要命的是这么多API那个才是我们做登录功能需要用到的呢
不要方~
当初我在做登录功能时是通过官方提供的分类去查询的，登录功能那么应该就是......社交API
于是找到了社交中的API，又找到了社交中Google + API ，后来一看文档,果然是我要找的那个... 然后启用Google+ API
这里要说一点Google对开发者还是相当友好的，尤其是首次接触陌生API的开发者，Google提供的文档相当的友好，进入教程和文档查看API的介绍，这个API大概要怎么用心里基本有个数了。
里面的教程在这里就不多做阐述，毕竟文档里面已经说的很清楚了。
https://developers.google.com/identity/sign-in/web/sign-in?hl=zh-cn 这里Google对引入登录功能进行了详细的说明。
使用这个API之前还需要做一件事，那就是申请一个OAuth 2.0 客户端 ID
申请步骤：
1）在API中心 凭据栏 创建凭据
2）按照要求填写你项目的类型、名称以及来源url
3）创建完成之后，页面也有一个弹窗将你申请的客户端ID已经密钥展示出来，没错这个就是一个生成的过程。（ps：最近被申请AdSense弄怕了）
等等...到这里还没有结束呢，
主题是在Vue项目中使用，那么接下来就要说说我是怎么在Vue中使用的了
上个我之前写的栗子（ps:在这里我没有引入npm插件去进行处理，而在npm上我查了一下有相关的插件‘google-sign-in’ 以及github上的 https://github.com/mejiamanuel57/vue-google-signin-button-directive）
1 <template>
2 <div id="google-signin-button"></div>
3 </template>
4
5 <script>
6 export default {
7 mounted() {
8 gapi.load("auth2", function() {}); // 加载auth2凭据 9 gapi.signin2.render("google-signin-button", { //gapi.signin2.render渲染登录按钮 10 onsuccess: this.onSignIn,
11 // scope: 'email',
12 width: 200,
13 height: 50,
14 longtitle: false,
15 theme: "dark"
16 });
17 },
18 methods: {
19 onSignIn(user) {
20 const profile = user.getBasicProfile(); // 用户登录信息 21 console.log("ID: " + profile.getId());
22 console.log("Full Name: " + profile.getName());
23 console.log("Given Name: " + profile.getGivenName());
24 console.log("Family Name: " + profile.getFamilyName());
25 console.log("Image URL: " + profile.getImageUrl());
26 console.log("Email: " + profile.getEmail());
27
28
29 var id_token = user.getAuthResponse().id_token;
30 console.log("ID Token: " + id_token);
31 }
32 }
33 };
34 </script>
35 <style lang="less">
36 #google-signin-button {
37 // opacity: 0;
38 }
39 .abcRioButtonContents {
40 vertical-align: text-top !important;
41 }
42 </style>
对于样式的自定义，因为时间上的受限，没有仔细去研究，我在移动端的处理是自己写一个样式，将Google登录按钮做透明处理覆盖在自己的元素上面。
总结：以前没有接触过Google API，完全是门外汉开发，很多东西都是从个人项目中积累而来，相信有了这个开头，以后会在做类似功能的时候不用再浪费那么多的时间了。所以啊，技术这一行，经验很重要、积累也很重要。文中有什么不对的地方欢迎各位指出来，我会及时改正，相互学习。