用supabase在NUXT中实施OAuth
#javascript #网络开发人员 #vue #nuxt

几年前，我尝试完全从头开始在我的Web应用程序中实现OAuth，我可以向您保证，这不是一件容易的事。为了做到这一点，您必须在Web应用程序中实现流程，而前端和后端也将遵循。

我终于设法做到了，它运行良好，但是我对我需要从头开始实施所有这些的事实甚至不满意，甚至认为该过程是任何网络应用程序的相对复制/粘贴。

然后，我发现了有关Supabase的信息。它是纯粹的DX魔术。

在本文中，我将向您展示如何使用supabaseð

在NUXT中实现OAuth

supabase

如果您还不熟悉Supabase，我几周前就发表了一篇文章，您可以查看here

在其中，我还解释了为什么我认为这是我的技术堆栈。确保对其进行测试，并让我知道您是否同样考虑：）

Oauth

要了解Oauth，我看了看的Wikipedia定义，它是很好的IMO：

oauth是访问委托的开放标准，通常用作互联网用户授予网站或应用程序在其他网站上访问其信息但没有给他们密码的方式。亚马逊，Google，Facebook，Microsoft和Twitter等公司都使用了这种机制，以允许用户与第三方应用程序或网站共享有关其帐户的信息。

让我们看一下以下图，以更好地了解该标准的工作方式：

OAuth

在下一节中，我们将在NUXT中使用Supabase实现此OAuth，以显示它的容易。

代码

我们将使用@nuxtjs/supabase模块来处理所有逻辑。

  1. 让我们使用您喜欢的软件包管理器安装此模块： 
yarn add --dev @nuxtjs/supabase
  1. 然后，让我们在nuxt.config.ts文件中的modules数组中注册模块： 
export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
})
  1. 现在，将以下环境变量添加到您的.env文件： 
SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

好，我们已经连接了supabase。现在进入实际的身份验证过程和OAuth标准。

useSupabaseClient composable提供了所有方法来管理useupabaseclient（）。auth的授权。有关更多详细信息，请参阅supabase-js auth documentation。这是登录进出的示例：

<script setup lang="ts">
const supabase = useSupabaseClient()

const signInWithOAuth = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: {
      redirectTo: 'http://localhost:3000/confirm',
    },
  })
  if (error) console.log(error)
}

const signOut = async () => {
  const { error } = await supabase.auth.signOut()
  if (error) console.log(error)
}
</script>

让我们在这里停止一秒钟，以分别解释每个步骤：

  1. 我们将useSupabaseClient称为可创建Supabase的本地实例。
  2. 在signInWithOAuth方法中，我们正在调用supabase.auth.signInWithOAuth方法并破坏可用于处理错误的错误对象。
  3. 作为signInWithOAuth方法的选项，我们将带有github和options.redirectTo的provider带有http://localhost:3000/confirm的值。由于以下默认选项，该/confirm端点实际上在模块配置中注册在模块配置中： 
  redirectOptions: {
    login: '/login',
    callback: '/confirm', // <--
    exclude: [],
  }

如果您希望在AUTH后有不同的回调，请确保也将其配置在模块配置中。

  1. 如果有错误，我们将其记录在控制台中。

对于签名，情况是类似的，但甚至更简单，因为我们不需要通过任何提供商或配置。我们只是称为supabase.auth.signOut，就是这样。这是纯粹的魔术！

如果您想查看使用此OAuth标准的应用程序的演示，请查看以下网站here

Nuxt OAuth With Supabase

还有一个视频，您可以检查here

资源