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

Question

我正在使用组合 API.

建立一个带有 Strapi CMS 后端和 NuxtJS 前端的社区网站

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

登录

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

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

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

我已经在我的 .env 文件中设置了 GitHub client_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)').

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

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

中的nuxt-auth docs就不细说了，说是用$auth.loginWith('github')就可以了。我在我的前端这样做，但我不确定这是否是我应该做的。

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

我的主要 2 个问题是：

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

非常感谢任何帮助！

更新 #1

我在 nuxt.config.js 和 <ngrok-url>/connect/github/callback 的 github 策略上添加了属性 redirectUrl。这修复了 GitHub.

的重定向问题

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

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

Answer 1

问题是 loginWith('github') 将 nuxt 直接连接到 github。但我们想先去 Strapi。所以最后，我删除了前端中所有与 github 相关的信息，并制作了一个常规 <a> 和 href 到 <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 在隧道中启动后端，而不是本地主机。

如果您想查看更多代码，请查看我的 PR here

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

Nuxt & Strapi - Logging in with OAuth using Github

github

oauth

strapi

nuxtjs

nuxt-auth