最近真是一刻不得閑...各種事情像暴風雨一樣砸過來
上菜~
在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，完全是門外漢開發，很多東西都是從個人項目中積累而來，相信有了這個開頭，以后會在做類似功能的時候不用再浪費那么多的時間了。所以啊，技術這一行，經驗很重要、積累也很重要。文中有什么不對的地方歡迎各位指出來，我會及時改正，相互學習。