Nuxt & Strapi - 使用 Github 使用 OAuth 登录

如何解决Nuxt & Strapi - 使用 Github 使用 OAuth 登录

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

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

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

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

我已经设置了我的 GitHub 应用程序，使用 <ngrok-url>/connect/github/callback 作为回调。

我已经在我的 .env 文件中设置了 GitHub client_id 和 secret。

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 应用程序端口），但是当我尝试访问它时出现重定向 uri 不匹配错误（“重定向 uri 必须匹配注册的回调”）从前端（使用 nuxt-auth 的 loginWith('github)'）。

有关此 here 的更多信息，但我不明白他们在说什么。

在何处提供redirect_uri？
他们说有一个与您注册的内容相匹配的 redirect_uri。那到底匹配什么？

nuxt-auth docs 没有那么复杂，说使用 $auth.loginWith('github') 就可以了。我在我的前端执行此操作，但我不确定这是否是我应该做的全部。

我可以手动转到“/connect/github”（在 ingognito 中）并在 GitHub 中登录，然后我被重定向到我在 Strapi 中放入的 URL，访问令牌作为参数。所以这部分似乎有效。

我的主要 2 个问题是：

如何从前端正确调用正确的端点以通过 GitHub 登录？
如何处理该调用的结果？

非常感谢任何帮助！

更新 #1

我在 nuxt.config.js 中的 github 策略上添加了一个属性 redirectUrl，带有 <ngrok-url>/connect/github/callback。这修复了来自 GitHub 的重定向问题。

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

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

解决方法

问题是 loginWith('github') 将 nuxt 直接连接到 github。但我们想先去斯特拉皮。所以最后，我删除了前端中所有与 github 相关的信息，并使用 href 到 <a> 制作了一个常规的 <strapi-url>/connect/github，然后在 vue 页面中像这样处理响应：

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 here