1、進(jìn)入開發(fā)者平臺(tái)，首先前往Google API 控制臺(tái)選擇或者創(chuàng)建一個(gè)項(xiàng)目

谷歌開發(fā)者平臺(tái)

一堆眼花繚亂的API讓你無從選擇，但是你只要記住這次進(jìn)來的目的是：社交API

2.使用這個(gè)API之前還需要做一件事，那就是申請(qǐng)一個(gè)OAuth 2.0 客戶端 ID

3按照要求填寫你項(xiàng)目的類型、名稱以及來源url

注：創(chuàng)建完成之后，頁面也有一個(gè)彈窗將你申請(qǐng)的客戶端ID已經(jīng)密鑰展示出來，沒錯(cuò)這個(gè)就是一個(gè)生成的過程。

4、安裝vue-google-signin-button

npm install vue-google-signin-button --save

5、在main.js中引入并注冊(cè)

import GSignInButton from ’vue-google-signin-button’Vue.use(GSignInButton);

6.index.html引入js文件

<!--谷歌登錄需要的依賴js--><script src='https://apis.google.com/js/api:client.js'></script>

7、在login.vue中使用組件

<template> <g-signin-button :params='googleSignInParams' @success='onSignInSuccess' @error='onSignInError'> Sign in with Google </g-signin-button></template><script>export default { data () { return { /** * The Auth2 parameters, as seen on * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams. * As the very least, a valid client_id must present. * @type {Object} */ googleSignInParams: {client_id: ’YOUR_APP_CLIENT_ID.apps.googleusercontent.com’ } } }, methods: { onSignInSuccess (googleUser) { console.log(googleUser) const profile = googleUser.getBasicProfile() console.log(profile) }, onSignInError (error) { console.log(’OH NOES’, error) } }}</script><style>.g-signin-button { /* This is where you control how the button looks. Be creative! */ display: inline-block; padding: 4px 8px; border-radius: 3px; background-color: #3c82f7; color: #fff; box-shadow: 0 3px 0 #0f69ff;}</style>

1、問題一：初始化沒有引入js

你會(huì)發(fā)現(xiàn)在初始化的時(shí)候頁面會(huì)出現(xiàn)一個(gè)報(bào)錯(cuò)。

出現(xiàn)這個(gè)問題的原因就是插件本身是沒有引入Google.js文件。解決辦法就是Vue的index.html中引入,詳情看下圖。

到此這篇關(guān)于Vue實(shí)現(xiàn)Google第三方登錄的示例代碼的文章就介紹到這了,更多相關(guān)Vue Google第三方登錄內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！