KitForStartups OAuth集成教程：轻松实现GitHub与Google第三方登录-育师

KitForStartups OAuth集成教程：轻松实现GitHub与Google第三方登录

【免费下载链接】kitforstartupsThe Open Source SvelteKit SaaS boilerplate.项目地址: https://gitcode.com/gh_mirrors/ki/kitforstartups

KitForStartups是一个开源的SvelteKit SaaS开发模板，提供了完整的用户认证系统，包括便捷的OAuth集成功能。本教程将详细介绍如何在KitForStartups项目中快速配置GitHub与Google第三方登录，帮助开发者节省认证系统开发时间，专注于核心业务功能实现。

📋 准备工作：OAuth应用注册

在开始集成前，需要在GitHub和Google开发者平台分别注册OAuth应用，获取必要的认证凭证。

GitHub OAuth应用注册步骤

访问GitHub开发者设置页面，创建新的OAuth应用
填写应用名称、主页URL和授权回调URL
- 本地开发环境回调URL：http://localhost:5173/api/oauth/github/callback
- 生产环境需替换为实际域名，如：https://yourdomain.com/api/oauth/github/callback
注册完成后，记录下Client ID和Client Secret

Google OAuth应用注册步骤

访问Google Cloud控制台，创建新项目并启用Google+ API
在"凭据"页面创建OAuth客户端ID
配置授权回调URL，与GitHub类似，使用/api/oauth/google/callback路径
保存生成的Client ID和Client Secret

🔧 项目配置：环境变量设置

获取OAuth凭证后，需要在项目中配置相关环境变量。在项目根目录下找到.env文件（如不存在则创建），添加以下配置：

# GitHub OAuth配置 GITHUB_CLIENT_ID=your_github_client_id GITHUB_CLIENT_SECRET=your_github_client_secret # Google OAuth配置 GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret

🚀 OAuth认证流程实现

KitForStartups使用Lucia认证库处理OAuth流程，相关实现代码位于以下路径：

OAuth配置文件：starter/src/lib/lucia/oauth.ts
GitHub认证处理：starter/src/routes/api/oauth/github/+server.ts
Google认证处理：starter/src/routes/api/oauth/google/+server.ts
回调处理：starter/src/routes/api/oauth/github/callback/+server.ts和starter/src/routes/api/oauth/google/callback/+server.ts

核心认证流程解析

发起认证请求：当用户点击登录按钮时，系统会生成认证URL并重定向到第三方平台。以GitHub为例：

import { githubAuth } from '$lib/lucia/oauth'; // 生成认证URL和状态 const [url, state] = await githubAuth.getAuthorizationUrl(); // 保存状态到cookie cookies.set('github_oauth_state', state, { path: '/', maxAge: 60 * 60 }); // 重定向到GitHub认证页面 throw redirect(302, url.toString());

处理回调请求：第三方平台认证完成后，会重定向回项目的回调接口，系统验证状态并获取用户信息：

// 获取URL中的状态和代码 const state = url.searchParams.get('state'); const code = url.searchParams.get('code'); // 验证状态 const savedState = cookies.get('github_oauth_state'); if (!state || !savedState || state !== savedState) { throw error(400, 'Invalid state'); } // 获取访问令牌和用户信息 const { getExistingUser, githubUser, createUser } = await githubAuth.validateCallback(code);

用户登录处理：根据第三方平台返回的用户信息，系统会创建新用户或关联已有用户，并生成会话：

// 检查用户是否已存在 const existingUser = await getExistingUser(); if (existingUser) { // 已存在用户，创建会话 const session = await lucia.createSession(existingUser.userId, {}); // 设置会话cookie cookies.set(lucia.sessionCookieName, session.sessionId, { path: '/', ...lucia.sessionCookieAttributes }); throw redirect(302, '/app'); }