由Next.js创建一个带有Slack身份验证的小型企业的Web应用程序
#node #nextjs #slack

创建Web应用程序，实现登录身份验证是艰苦的工作。需要登录身份验证，重新发布密码，密码更改等。但是使用nextauth.js和Slack，您无需自己准备这些。这非常容易，建议小型企业。

使用启用HTTPS创建本地服务器

Slack要求应用程序URL使用HTTP，即使用于本地开发。在这种情况下，locass-ssl-proxy易于且有用。

另请参见：

https://dev.to/cress/when-you-need-https-on-local-environment-local-ssl-proxy-is-the-best-solution-24n6

在松弛侧配置

关注QuickStart。

https://api.slack.com/authentication/quickstart

创建客户ID和客户端秘密

  1. 单击“创建新的Slack应用程序”按钮。
  2. 在“您的应用程序”页面中，单击“创建新应用”，然后选择“从头开始”
  3. 输入您的应用程序名称并选择一个工作区以开发您的应用程序。
  4. 单击“创建应用程序”按钮。

然后，在“基本信息”页面的“ App凭据”部分中，您可以看到其客户端ID和客户端秘密。

配置重定向URL

  1. 在“基本信息”页面的“添加功能和功能”部分中，单击“权限”。
  2. 在“ Oauth＆Permissions”页面的重定向URL中，单击“添加新的重定向URL”按钮。
  3. 输入“ https://localhost:3001”，然后单击“添加”按钮。
  4. 单击“保存URL”按钮。

然后您可以使用Slack的身份验证。

创建您的应用程序

另请参见：

https://next-auth.js.org/

作为一个例子，创建应用程序名为 slack-auth-example by create-next-app。

npx create-next-app slack-auth-example

然后，从NPM安装软件包。

npm install next-auth bootstrap react-bootstrap

.env.开发

根据您的环境将信息放入.env.development.local文件中：

SLACK_CLIENT_ID = "<Your client ID>"
SLACK_CLIENT_SECRET = "<Your client secret>"
NEXTAUTH_URL = "https://localhost:3001"
NEXTAUTH_SECRET = "changeit"

SLACK_CLIENT_ID和SLACK_CLIENT_SECRET的值是您在“创建客户端ID和客户端秘密”部分中获得的。

/PI/Auth/ [....nextauth] ts

这是最小配置。

import NextAuth from "next-auth/next"
import SlackProvider from "next-auth/providers/slack"

export const authOptions = {
  providers: [
    SlackProvider({
      clientId: <string>process.env.SLACK_CLIENT_ID,
      clientSecret: <string>process.env.SLACK_CLIENT_SECRET
    })
  ]
}

export default NextAuth(authOptions)

页/_app.tsx

与Session Provider的环绕组件。

import '@/styles/globals.css'
import { SessionProvider } from 'next-auth/react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

示例：index.tsx

它显示登录按钮。登录时，它显示了您的姓名和注销按钮。

import React from "react"
import { signIn, signOut, useSession } from "next-auth/react"
import { Button } from "react-bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"

export default function Home() {
  const {data: session, status} = useSession()

  if (status === "loading") {
    return <p>Loading...</p>
  }

  if (status === "authenticated") {
    return (
      <>
        <p>You are logged in as {session.user?.name}</p>
        <Button onClick={() => signOut()}>Logout</Button>
      </>
    )
  } else {
    return (
      <Button onClick={() => signIn("slack")}>Login</Button>
    )
  }
}

与Prisma集成

NextAuth.js具有用于使用Prisma的适配器。可以在数据库中管理会议。

https://authjs.dev/reference/adapter/prisma

安装 

npm install next-auth @prisma/client @next-auth/prisma-adapter
npm install -D prisma

Prisma设置

显示了使用mySQL的示例。

npx prisma init --datasource-provider mysql

然后，编辑prisma.schema文件如下：

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mys"
  url      = env("DATABASE_URL")
}

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  ok                 Boolean?
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  state              String?
  session_state      String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

根据您的环境编辑.env.development.local文件中的以下行。

DATABASE_URL="mysql://johndoe:randompassword@localhost:3306/mydb"

按下以下命令：

npx prisma generate

现在已经生成了Prisma客户端。

/PI/Auth/ [....nextauth] ts

将adapter属性添加到authOptions。

import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
import NextAuth from "next-auth/next"
import SlackProvider from "next-auth/providers/slack"

const prisma = new PrismaClient()

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    SlackProvider({
      clientId: <string>process.env.SLACK_CLIENT_ID,
      clientSecret: <string>process.env.SLACK_CLIENT_SECRET
    })
  ]
}

export default NextAuth(authOptions)

初始化数据库 

npx prisma migrate dev --name init

供你参考

不必担心局外人即使有其他域松弛帐户也无法登录。因为您获得的客户端ID与您的Slack域挂钩，所以只有您的Slack域成员才能登录。并非总是需要将用户信息保存在数据库中。