努克斯

Question

我正在用Strapi CMS后端和使用composition API的NuxtJS前端建立一个社区网站。

除了正常的注册和使用电子邮件和用户名登录（有效！），我希望用户能够使用GitHub登录。

我正在使用@nuxtjs/auth模块进行授权。

我已经使用ngrok“部署”了我的Strapi后端。这显然是使OAuth工作所必需的。

我已经设置了我的GitHub应用程序，使用

我已经在我的.env文件中设置了GitHub客户端的id和secret。

在我nuxt.config.js文件中的策略中，我有以下内容：

github: {
  clientId: process.env.GITHUB_CLIENT_ID,
  clientSecret: process.env.GITHUB_CLIENT_SECRET,
},

我在Strapi后端的config/server.js中添加了一行：

url: '<ngrok url>'

所以后端在那个位置启动。

在我的Strapi配置中，我启用了GitHub提供程序，我需要一个重定向url到我的前端。我不知道该在这里放什么。

我试过：http://localhost:3000 （我的Nuxt应用程序端口），但当我尝试从前端（使用Nuxt auth的loginWith（'github'）访问它时，会出现重定向uri不匹配错误（“重定向uri必须与注册的回调匹配”）。

这里有更多的信息，但我不明白他们在说什么。

• 提供一个重定向uriwhere？

nuxt auth文档并没有那么复杂，比如说使用$auth.loginWith（'github'），就是这样。我在前端做这件事，但我不确定这是否是我应该做的全部。

我可以手动转到“

我的主要两个问题是：

• 如何从前端向正确的endpoint进行正确呼叫，以通过GitHub登录？

任何帮助都非常感谢！

更新#1

我在github策略上添加了一个属性reDirectUrl，nuxt.config.js

我还在Strapi中添加了一个重定向到localhost:3000/connect/github，并在nuxt中添加了一个页面。

现在，我从Strapi获得了一个jwt令牌和一个用户，但是$auth.loggedIn在我的前端仍然是false。我将尝试通过编写自己的中间件来解决这个问题。我认为这是必要的，因为应用程序是服务器端渲染的。




Answer 1

问题是，loginWith（'github'）将nuxt直接连接到github。但我们想先去斯特拉皮。因此，最后，我删除了前端中所有与github相关的信息，并制作了一个常规的

data() {
    return {
      provider: this.$route.params.provider,
      access_token: this.$route.query.access_token,
    }
  },
  async mounted() {
    const res = await this.$axios.$get(
      `/auth/github/callback?access_token=${this.access_token}`,
    )
    const { jwt, user } = res
    await this.$auth.setUserToken(jwt)
    this.$auth.setUser(user)
    this.$router.push(`/`)
  },

为了在本地测试它，我使用ngrok在隧道中启动后端，而不是localhost。

如果你想看更多的代码，请在这里查看我的PR