Project Icon

how-to-roll-your-own-auth

从零开始实现Web应用身份认证系统

该开源项目展示了如何构建完整的Web应用身份认证系统。内容包括Discord OAuth实现、JWT生成、安全cookie配置等核心技术,以及服务器部署、域名设置和前端部署指南。项目为开发者提供了实现现代Web应用安全架构的详细参考。

如何构建自己的身份验证系统

本仓库是YouTube视频的配套内容:https://youtu.be/CcrgG5MjGOk

  1. 使用passport.js实现Discord OAUTH
passport.use(
    new Strategy(
      {
        clientId: process.env.DISCORD_CLIENT_ID!,
        clientSecret: process.env.DISCORD_SECRET_ID!,
        callbackUrl: `${process.env.API_URL}/auth/discord/callback`,
        scope: ["identify"],
      },

      async (_accessToken, _refreshToken, profile, done) => {
        // 1. 获取id
        const discordId = profile._json.id as string;

        // 2. 数据库查询
        let user = await db.query.users.findFirst({
          where: eq(usersTable.discordId, discordId),
        });

        // 3. 如果用户不存在则创建
        if (!user) {
          [user] = await db
            .insert(usersTable)
            .values({
              discordId,
            })
            .returning();
        }

        // 4. 返回用户
        done(null, user);
      }
    ) as any
  );
  1. JWT令牌
const createAuthTokens = (
  user: DbUser
): { refreshToken: string; accessToken: string } => {
  const refreshToken = jwt.sign(
    { userId: user.id, refreshTokenVersion: user.refreshTokenVersion },
    process.env.REFRESH_TOKEN_SECRET!,
    {
      expiresIn: "30d",
    }
  );

  const accessToken = jwt.sign(
    { userId: user.id },
    process.env.ACCESS_TOKEN_SECRET!,
    {
      expiresIn: "15min",
    }
  );

  return { refreshToken, accessToken };
};
  1. Cookie设置
// __prod__是一个布尔值,当NODE_ENV为"production"时为true
const cookieOpts = {
  httpOnly: true,
  secure: __prod__,
  sameSite: "lax",
  path: "/",
  domain: __prod__ ? `.${process.env.DOMAIN}` : "",
  maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // 10年
} as const;

export const sendAuthCookies = (res: Response, user: DbUser) => {
  const { accessToken, refreshToken } = createAuthTokens(user);
  res.cookie("id", accessToken, cookieOpts);
  res.cookie("rid", refreshToken, cookieOpts);
};

如何将服务器部署到VPS

如果你还没有VPS,可以选择像Hostinger这样的服务提供商。在结账时使用代码BENAWAD可获得额外优惠(赞助内容)

  1. 为了省去麻烦,设置VPS的无密码SSH登录:https://www.hostinger.com/tutorials/how-to-setup-passwordless-ssh/
  2. 在VPS上安装Dokku:https://dokku.com/docs/getting-started/installation/(我喜欢用它来实现零停机部署)
    • Dokku支持的最新Ubuntu版本是22.04(你可以在Hostinger的控制面板中更改版本)
  3. 创建应用 dokku apps:create api
  4. 创建数据库 https://dokku.com/docs/deployment/application-deployment/?h=postgresql#create-the-backing-services
  5. 链接数据库 dokku postgres:link pg api
  6. 在你的本地计算机上创建Docker镜像 docker build -t example/auth:1 . --platform=linux
  7. 将Docker镜像发送到VPS docker image save example/auth:1 | ssh root@123.23.21.31 docker load
  8. 在VPS中标记镜像 docker tag example/auth:1 dokku/api:latest
  9. 部署 dokku deploy api latest
    • 这一步可能会失败
  10. 设置环境变量
    dokku config:set api FRONTEND_URL=https://example.com ACCESS_TOKEN_SECRET=hj890duj01jd9012j0dj9021390132 REFRESH_TOKEN_SECRET=q90wej9201je091212903291308 DISCORD_SECRET_ID=asdj902j1d0921 DISCORD_CLIENT_ID=129032180312 DOMAIN=example.com
    
    • 这应该会重新部署应用,然后应用应该能正常工作

自定义域名

  1. 设置DNS,使你的域名指向VPS
  2. 使用letsencrypt dokku插件在VPS上设置https:https://github.com/dokku/dokku-letsencrypt
    • 你需要先设置你的域名:dokku domains:set api api.example.com

VPS安全

https://www.hostinger.com/tutorials/vps-security

前端部署

我喜欢使用Cloudflare pages

调试cookies

https://github.com/benawad/how-to-debug-cookies

项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台,能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐,Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持,能够阅读和理解用户上传的文件内容,解析网页信息,并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题,Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型,免费访问各种图像生成与AI训练工具,从Stable Diffusion等基础模型开始,轻松实现创新图像生成。体验前沿的AI技术,推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器,它将改变您观看视频的方式!SubCat结合了先进的人工智能技术,为您提供即时视频字幕翻译,无论是本地视频还是网络流媒体,让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台,利用前沿AI技术,为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图,再到文案生成,美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号