我正在使用vue-authenticate进行Google的社交登录。
我遵循vue-authenticate gituhub自述文件中所述的基本设置。 下面是我的vue文件的代码
<template>
<button @click="authenticate('google')">auth Google</button>
</template>
<script>
export default {
name: 'app',
methods: {
authenticate: function (provider) {
this.$auth.authenticate(provider).then(function () {
})
}
}
}
</script>
我在其中定义提供程序的js文件如下
import Vue from 'vue'
import App from './App.vue'
import VueAxios from 'vue-axios'
import VueAuthenticate from 'vue-authenticate'
import axios from 'axios';
Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
baseUrl: 'http://localhost:8000', // Your API domain
storageType: 'localStorage',
tokenName: 'token',
providers: {
google: {
clientId: 'client_id_key',
redirectUri: 'http://localhost:8080/',
url: 'http://localhost:8000/rest-auth/google/',
}
}
})
new Vue({
el: '#app',
render: h => h(App),
})
我对google身份验证的后端的看法如下
class GoogleLogin(SocialLoginView):
adapter_class = GoogleOAuth2Adapter
callback_url = 'http://localhost:8080/'
client_class = OAuth2Client
现在,当我单击前端上的按钮时,会弹出一个窗口,数据库中的所有条目均按预期方式创建,并且按我的意愿在后端侧创建了用户。
但是,在前端,我在控制台上得到了错误:
可能的未处理的承诺拒绝:错误:身份验证失败于 评估(vue-authenticate.es2015.js?5ab3:1380)
我在做什么错?我似乎不知道。
我正在使用django-rest-auth和vue-authenticate。