前提：vue環(huán)境，google授權(quán)登錄需要翻墻。
一、google賬號申請+創(chuàng)建憑據(jù)
地址：
https://console.developers.google.com/apis/credentials?project=matest-247702
申請完賬號之后進入
點擊創(chuàng)建憑據(jù)
這里我添加的url是在本地測試的，授權(quán)的重定向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>
需要授權(quán)的頁面
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授權(quán)登錄
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>
