Google 的社交身份验证因 Vue.js 和 django-rest-auth 而失败答案

【问题标题】：Social authentication for Google failing with Vue.js and django-rest-authGoogle 的社交身份验证因 Vue.js 和 django-rest-auth 而失败
【发布时间】：2019-07-25 12:45:51
【问题描述】：

我正在关注一个博客，该博客向我们展示了如何使用 vue-authenticate 和 django restframework 进行社交身份验证。

这是博客：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 中的文档显示了认证方法。这是我收到验证失败的错误消息。

我到底做错了什么？我似乎无法确定问题所在。

【问题讨论】：

标签： django vue.js django-rest-framework django-rest-auth

【解决方案1】：

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

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

在我的情况下，Django 在“令牌”字段中返回令牌，但在你的情况下可能会有所不同。

示例代码：

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

【讨论】：