上一篇说了 facebook的实现,接下来说下google 的实现了,国际化的用的少.实际详细的文档也不多,这记录下来!
demo 地址请狠狠的戳这里 http://download.lllomh.com/cliect/#/product/J417101756893390
一:开发者平台配置进入开发者平台 https://console.developers.google.com/apis/credentials?project=matest-247702
在凭据中创建app凭据:
设置 重定向地址等相关内容
动态演示:
我们需要的 是那个客户端 ID!
二:代码核心代码:
<template>
<div>
<button v-google-signin-button="clientId" class="google-signin-button"> Continue with Google</button>
</div>
</template>
<script>
import GoogleSignInButton from 'vue-google-signin-button-directive'
import jsonwebtoken from 'jsonwebtoken'
export default {
directives: {
GoogleSignInButton
},
data: () => ({
clientId: '345345-petbt7osm0gs9mtivclevt6cjb9la43b.apps.googleusercontent.com'
}),
mounted(){
},
methods: {
OnGoogleAuthSuccess (idToken) {
console.log(idToken,"tokesdasdasd") //返回第三方结果信息 默认是全token 要用jsonwebtoken 解析
// Receive the idToken and make your magic with the backend
},
OnGoogleAuthFail (error) {
console.log(error)
}
}
}
</script>
<style>
.google-signin-button {
color: white;
background-color: red;
height: 50px;
font-size: 16px;
border-radius: 10px;
padding: 10px 20px 25px 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
记得 npm install vue-google-signin-button-directive && npm install jsonwebtoken
结果如下:
比如这里 我的 url 是http://localhost:5000,那么开发者平台里面也要配置这个重定向地址=>
实际使用: man.js
/***********Google登录自定义指令***************/
Vue.directive('google-signin-button', {
bind: function (el, binding, vnode) {
CheckComponentMethods()
let clientId = binding.value
let googleSignInAPI = document.createElement('script')
googleSignInAPI.setAttribute('src', 'https://apis.google.com/js/api:client.js')
document.head.appendChild(googleSignInAPI)
googleSignInAPI.onload = InitGoogleButton
function InitGoogleButton() {
gapi.load('auth2', () => {
const auth2 = gapi.auth2.init({
client_id: clientId,
cookiepolicy: 'single_host_origin'
})
auth2.attachClickHandler(el, {},
OnSuccess,
Onfail
)
})
}
function OnSuccess(googleUser) {
vnode.context.OnGoogleAuthSuccess(googleUser.getAuthResponse().id_token)
googleUser.disconnect()
}
function Onfail(error) {
vnode.context.OnGoogleAuthFail(error)
}
function CheckComponentMethods() {
if (!vnode.context.OnGoogleAuthSuccess) {
throw new Error('The method OnGoogleAuthSuccess must be defined on the component')
}
if (!vnode.context.OnGoogleAuthFail) {
throw new Error('The method OnGoogleAuthFail must be defined on the component')
}
}
}
})
/***********Google登录自定义指令***************/