前提：vue环境，google授权登录需要翻墙。
一、google账号申请+创建凭据
地址：
https://console.developers.google.com/apis/credentials?project=matest-247702
申请完账号之后进入
点击创建凭据
这里我添加的url是在本地测试的，授权的重定向url是google通过验证后重定向的地址，我填的也是本地url，添加完之后点击保存就会生成一个客户端 ID，代码中需要用到。
二、代码
安装依赖：
cnpm install --save vue-google-signin-button
并在main.js引入：
import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton)
index.html文件引入
<script async defer crossorigin="anonymous" src="https://apis.google.com/js/api:client.js"></script>
需要授权的页面
html:
<g-signin-button
:params="googleSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Google
</g-signin-button>
<script>
data() {
return {
googleSignInParams: {
client_id: '106825946812-7o529upnhp5emn87ronp5vtr72ipcps3.apps.googleusercontent.com'
} //客户端Id
}
}
//google授权登录
onSignInSuccess (googleUser) {
const info = googleUser.getBasicProfile() //获取信息
const name = info.getName(); // 姓名
const id = info.getId(); // id
const givenName = info.getGivenName(); // 名
const familyName = info.getFamilyName(); // 姓
const imageUrl = info.getImageUrl(); // imageUrl
const email = info.getEmail(); // email
console.log(info,name,id,givenName,familyName,imageUrl,email)
},
onSignInError(error) {
console.log(error)
}
</script>
