Vue.js和django-rest-auth导致谷歌社交认证失败

Question

我正在关注一个博客，它向我们展示了如何在django restframework中使用vue-authenticate进行社交认证。

这是博客：https://medium.com/@dobrotek6/drfsamv-django-rest-framework-social-auth-mongo-vuejs-part-1-c5c907dd7b69

然而，我的博客使用了一些我没有使用的社交身份验证框架。我使用的是django-rest-auth包。

我试着相应地设置它，但我遇到了一些问题。

redirectUri: 'http://localhost:8080/',
url: 'http://localhost:8000/rest-auth/google/',

上面的代码显示了我根据vue-authenticate文档在提供者设置中放置的链接

this.$auth.authenticate('google', {provider: "google- 
oauth2"}).then(function (response)

上面的代码显示了根据我从博客复制的vue-authenticate中的文档进行身份验证的方法。这就是我收到错误的地方，指出身份验证失败。

我到底做错了什么？我似乎找不到问题所在。

Answer 1

遇到同样的问题，解决方案很容易，但很难找到。

您需要将tokenPath字段添加到Vue-authenticate的配置中，以允许vue在响应中定位令牌。

在我的示例中，Django在“token”字段中返回token，但在您的示例中可能会有所不同。

示例代码：

Vue.use(VueAuthenticate, {
  baseUrl: 'youApiDomain',
  storageType: 'localStorage',
  tokenPath: 'token',

  providers: {
    google: {
      clientId: 'yourClientId',
      redirectUri: '',
      url: 'authenticationUrl',
    }
  }
});

解决方案位于：https://github.com/dgrubelic/vue-authenticate/issues/157#issuecomment-487063363