@svelte-dev/auth 一个简单好用的 Svelte 身份管理库

最新推荐文章于 2024-06-04 09:33:55 发布

Willin 老王躺平不摆烂

最新推荐文章于 2024-06-04 09:33:55 发布

阅读量447

点赞数 10

分类专栏： Typescript全栈开发从入门到精通文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jslygwx/article/details/134969799

版权

Typescript全栈开发从入门到精通专栏收录该内容

76 篇文章 7 订阅

订阅专栏

Logo

特性

完全的服务器端身份验证
完整的TypeScript支持
策略-基础身份验证
轻松处理成功和失败
实现自定义策略
支持持久会话

概述

Svelte Auth是一个完整的开源身份验证解决方案，适用于Svelte应用程序。

深受Passport.js和Remix-Auth的启发，但完全从头开始重写，以便在Web Fetch API之上工作。 Svelte Auth可以在最小的设置下添加到任何基于Svelte的应用程序中。

与Passport.js一样，它使用策略模式来支持不同的身份验证流程。每个策略都作为单独的npm包单独发布。

官网： https://svelte.js.cool/auth/

安装

要使用它，从npm（yarn或bun）安装：

npm install @svelte-dev/auth @svelte-dev/session

使用

这是一个简单的例子：

// hooks.server.ts
import { env } from '$env/dynamic/private';
import { sequence } from '@sveltejs/kit/hooks';
import { handleAuth } from '@svelte-dev/auth';
import { OAuth2Strategy } from '@svelte-dev/auth-oauth2';

const oauthStrategy = new OAuth2Strategy(
  {
    clientID: env.SSO_ID,
    clientSecret: env.SSO_SECRET,
    callbackURL: env.SSO_CALLBACK_URL || 'http://localhost:8788/auth/oauth2/callback'
  },
  async ({ profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return profile;
  }
);

export const handle = handleAuth({
  // Auth Options
  autoRouting: true,
  strategies: [oauthStrategy],
  sessionKey: 'user',
  sessionErrorKey: 'auth:error',
  sessionStrategyKey: 'strategy',
  successRedirect: '/',
  failureRedirect: '/',
  // Session Storage Options
  adapter: {
    name: 'cookie',
    options: {
      chunk: true
    }
  },
  session: {
    secrets: ['s3cr3t']
  },
  cookie: {
    secure: !!env.SSO_CALLBACK_URL,
    sameSite: 'lax',
    path: '/',
    httpOnly: !!env.SSO_CALLBACK_URL
  }
});

就是这样。

进阶使用

自定义路由

如果您没有设置authRouting，您首先需要添加一个 src/routes/auth/[provider]/+server.ts:

import { redirect, type RequestEvent } from '@sveltejs/kit';

export const GET = async (event: RequestEvent) => {
  const { request } = event;
  const provider = event.params.provider ?? 'github';
  return await event.locals.auth.authenticate(event, provider, {
    successRedirect: '/dashboard',
    failureRedirect: '/error'
  });
};

然后添加回调 src/routes/auth/[provider]/callback/+server.ts.ts:：

// 根据实际需要修改
import type { RequestEvent } from '@sveltejs/kit';

export const GET = async (event: RequestEvent) => {
  const provider = event.params.provider ?? 'github';

  return await event.locals.auth.authenticate(event, provider, {
    successRedirect: '/dashboard',
    failureRedirect: '/error'
  });
};

Typescript

修改app.d.ts，这是一个例子：

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
  namespace App {
    // interface Error {}
    interface Locals {
      auth: Auth;
      session: SessionStorage<{ user: any }>;
      user:
        | {
            invalid?: boolean;
            [key: string]: unknown;
          }
        | unknown;
    }
    // interface PageData {}
    interface Platform {
      env: {
        SSO_ID: string;
        SSO_SECRET: string;
      };
      context: {
        waitUntil(promise: Promise<unknown>): void;
      };
      caches: CacheStorage & { default: Cache };
    }
  }
}

export {};