网上资源很多,但乱七八糟,踩坑几小时后,发现下面的方式没问题。
npm install vue3-google-login
插件文档:vue3-google-登录 (devbaji.github.io)
修改main.js
import './assets/main.css'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'const app = createApp(App)app.use(ElementPlus)app.use(vue3GoogleLogin, {clientId: '---id.apps.googleusercontent.com'
})
app.mount('#app')
以下代码是关键:
import vue3GoogleLogin from 'vue3-google-login'app.use(vue3GoogleLogin, {clientId: '---id.apps.googleusercontent.com'
})
修改app.vue
<script setup>
import { decodeCredential } from 'vue3-google-login'
const callback = (response) => {// This callback will be triggered when the user selects or login to// his Google account from the popupconsole.log("Handle the response", response)// decodeCredential will retrive the JWT payload from the credentialconst userData = decodeCredential(response.credential)console.log("Handle the userData", userData)
}
</script><template><GoogleLogin :callback="callback"/>
</template>