# oauth 提供者 ## 说明此技能为 Clerk 支持的应用程序提供完整的 OAuth 提供程序配置。它涵盖所有 19 个以上受支持的 OAuth 提供程序，以及 Next.js、React 和其他框架的模板、设置脚本、测试实用程序和集成模式。 ### 支持的 OAuth 提供商 **第 1 层（最常见）：** * Google - 消费者应用、Google Workspace 集成 * GitHub - 开发人员工具、技术受众 * Discord - 游戏、社区平台 * Microsoft - 企业应用程序、Microsoft 365 集成 **第 2 级（社交和专业）：** * Facebook - 社交应用、消费产品 * LinkedIn - 专业网络、B2B 应用程序 * Twitter/X - 社交媒体集成 * Apple - iOS 应用程序、消费产品 **第 3 级（专业）：** * GitLab - 开发者平台、CI/CD 工具 * Bitbucket - Atlassian 生态系统集成 * Dropbox - 文件存储集成 * 概念 - 生产力应用程序集成 * Slack - 工作空间协作 * Linear - 项目管理工具 * Coinbase - 加密钱包身份验证 * TikTok - 短视频平台 * Twitch - 直播平台 * HubSpot - CRM 集成 * X/Twitter - 社交媒体（更名） ### 1\.提供商设置脚本使用自动设置配置任何 OAuth 提供程序： # 设置单一提供者 bash 脚本/setup-provider.sh 谷歌 # 设置多个提供者 bash 脚本/setup-provider.sh 谷歌 github 不和谐 # 带提示的交互式设置 bash 脚本/setup-provider.sh --interactive **脚本的作用：** 1.检测Clerk项目配置 2. 生成特定于提供商的配置 3. 为所有环境（开发、登台、生产）创建重定向 URL 4. 提供分步设置说明 5.生成环境变量模板 6. 创建提供商测试实用程序 **输出：** * 提供者配置 JSON * 环境变量模板 * 设置说明降价 * 测试凭证配置 ### 2\.生成重定向 URL 为所有环境生成回调 URL： # 为特定提供者生成 bash 脚本/generate-redirect-urls.sh 谷歌 # 为所有配置的提供者生成 bash 脚本/generate-redirect-urls.sh --all # 导出到环境文件 bash 脚本/generate-redirect-urls.sh google --export > .env.oauth **重定向 URL 模式：** 发展： http://localhost:3000/api/auth/callback/google 生产： https://yourdomain.com/api/auth/callback/google 文员默认： https://your-clerk-domain.clerk.accounts.dev/v1/oauth_callback ### 3\.测试 OAuth 流程端到端验证 OAuth 配置： # 测试单一提供商 bash 脚本/test-oauth-flow.sh 谷歌 # 测试所有提供者 bash 脚本/test-oauth-flow.sh --all # 生成测试报告 bash 脚本/test-oauth-flow.sh google --report **进行的测试：** * 提供者配置验证 * 重定向 URL 可访问性 * OAuth流程启动 * 回调处理 * 代币交换验证 * 用户资料检索 * 错误处理场景 ### 4\.提供者模板访问每个提供商的预配置模板： **谷歌OAuth：** // 模板/google/clerk-config.ts 从'@clerk/clerk-sdk-node'导入{google}；导出常量 googleConfig = { clientId：process.env.GOOGLE_CLIENT_ID， clientSecret：process.env.GOOGLE_CLIENT_SECRET， redirectUri：process.env.GOOGLE_REDIRECT_URI，范围：['个人资料'，'电子邮件']， // Google 特定选项 accessType: '离线', 提示：“同意” }; **GitHub OAuth：** // 模板/github/clerk-config.ts 导出 const githubConfig = { clientId：process.env.GITHUB_CLIENT_ID， clientSecret：process.env.GITHUB_CLIENT_SECRET， redirectUri：process.env.GITHUB_REDIRECT_URI，范围：['读取：用户'，'用户：电子邮件']， // GitHub 特定选项允许注册：true }; **不和谐 OAuth：** // 模板/discord/clerk-config.ts 导出常量discordConfig = { clientId：process.env.DISCORD_CLIENT_ID， clientSecret：process.env.DISCORD_CLIENT_SECRET， redirectUri：process.env.DISCORD_REDIRECT_URI，范围：['身份'，'电子邮件']， // Discord 特定选项权限：“0” }; ### 5\.多提供商集成 **React/Next.js 组件：** // 模板/oauth-shared/AuthButtons.tsx 从“@clerk/nextjs”导入{SignIn}；导出函数 AuthButtons() { 返回（

<登录.根>

）； } **文员仪表板配置：** // 模板/oauth-shared/clerk-dashboard-config.ts 导出常量 oauthProviders = [ { 提供商：“谷歌”，启用：真，客户端 ID：'GOOGLE_CLIENT_ID'，客户端秘密：'GOOGLE_CLIENT_SECRET'，范围：['个人资料'，'电子邮件'] }, { 提供者：'github'，启用：真， clientId: 'GITHUB_CLIENT_ID', clientSecret: 'GITHUB_CLIENT_SECRET', 范围：['读取：用户'，'用户：电子邮件'] }, { 提供者：'不和谐'，启用：真， clientId: 'DISCORD_CLIENT_ID', clientSecret: 'DISCORD_CLIENT_SECRET', 范围：['身份'，'电子邮件'] } ]; ## 示例 ### 示例 1：用于 SaaS 应用程序的 Google OAuth # 1. 设置 Google OAuth bash 脚本/setup-provider.sh 谷歌 # 按照提示操作： # - 在 Google Cloud Console 中创建 OAuth 应用 # - 配置授权重定向 URI # - 复制客户端 ID 和客户端密钥 # - 添加到职员仪表板 # 2. 生成重定向 URL bash 脚本/generate-redirect-urls.sh google --export > .env.google # 3. 测试 OAuth 流程 bash 脚本/test-oauth-flow.sh 谷歌 # 4. 添加到 React 应用程序 cp 模板/google/clerk-config.ts ./lib/auth/google.ts cp 模板/oauth-shared/AuthButtons.tsx ./components/auth/ **结果：** 完全配置 Google OAuth，带有登录按钮和经过测试的流程 ### 示例 2：多提供商身份验证（Google + GitHub + Discord） # 设置所有提供者对于 google github discord 中的提供者；做 bash 脚本/setup-provider.sh $provider 完成 # 生成所有重定向 URL bash 脚本/generate-redirect-urls.sh --all --export > .env.oauth # 测试所有提供者 bash 脚本/test-oauth-flow.sh --all --report # 部署多提供商 UI cp 模板/oauth-shared/AuthButtons.tsx ./components/auth/ **结果：** 用户可以使用 Google、GitHub 或 Discord 登录 ### 示例 3：Microsoft + LinkedIn 的企业应用程序 # 设置企业提供商 bash 脚本/setup-provider.sh 微软 linkedin # 配置企业特定范围 # 编辑 templates/microsoft/clerk-config.ts 以添加 Azure AD 范围 # 编辑 LinkedIn API v2 的 templates/linkedin/clerk-config.ts # 测试企业流程 bash 脚本/test-oauth-flow.sh 微软 --report bash 脚本/test-oauth-flow.sh linkedin --report **结果：** 通过 Microsoft 365 和 LinkedIn 集成进行企业身份验证 ### 示例 4：使用 Discord + Twitch 的游戏平台 # 设置游戏提供商 bash 脚本/setup-provider.sh 不和谐抽搐 # 配置游戏特定权限 # Discord：公会成员、语音状态 # Twitch: 用户:阅读:电子邮件、频道订阅 # 测试游戏提供商流程 bash 脚本/test-oauth-flow.sh 不和谐抽搐 **结果：** 通过 Discord 和 Twitch 集成进行游戏平台身份验证 ## 要求 **环境变量：** * `CLERK_PUBLISHABLE_KEY` \- 职员公钥 * `CLERK_SECRET_KEY` \- 职员秘密密钥 * 特定于提供商的凭据（例如“GOOGLE_CLIENT_ID”、“GOOGLE_CLIENT_SECRET”） **依赖关系：** * `@clerk/clerk-sdk-node` \- Clerk Node.js SDK * `@clerk/nextjs` \- Clerk Next.js 集成（适用于 Next.js 应用程序） * `@clerk/clerk-react` \- Clerk React 组件（用于 React 应用程序） * Node.js 18+ 或兼容运行时 * jq（用于脚本中的 JSON 处理） **文员项目设置：** * Active Clerk 帐户（提供免费套餐） * 文员应用程序配置 * 开发生产实例（可选） **对于每个 OAuth 提供商：** * 提供商平台上的开发者帐户 * OAuth应用程序创建 * 获得客户凭证 * 配置重定向 URI ## 安全性：API 密钥处理 **关键：** 生成任何配置文件或代码时： * 切勿对实际 API 密钥或秘密进行硬编码 * 切勿在示例中包含真实凭证 * 切勿将敏感值提交到 git * 始终使用占位符：`your_service_key_here` * 始终仅创建带有占位符的 `.env.example` * 始终将 `.env*` 添加到 `.gitignore`（`.env.example` 除外） * 始终从代码中的环境变量中读取 * 始终记录从哪里获取密钥 **占位符格式：** `{provider}_{env}_your_key_here` 示例： # .env.example（安全提交） GOOGLE_CLIENT_ID=google_dev_your_client_id_here GOOGLE_CLIENT_SECRET=google_dev_your_client_secret_here # .env（永远不要提交） GOOGLE_CLIENT_ID=actual_client_id_from_google_cloud GOOGLE_CLIENT_SECRET=actual_secret_from_google_cloud ## 特定于提供商的设置指南 ### Google OAuth 设置 **文档：** templates/google/SETUP.md 1. 在 Google Cloud Console 中创建项目 2.启用Google+ API 3. 配置 OAuth 同意屏幕 4. 创建 OAuth 2.0 凭据 5. 添加授权重定向 URI 6. 复制客户端 ID 和客户端密钥 7. 添加到职员仪表板 **所需范围：** * `profile` \- 用户个人资料信息 * `email` \- 电子邮件地址 * `openid` \- OpenID 连接 ### GitHub OAuth 设置 **文档：** templates/github/SETUP.md 1. 导航到 GitHub 设置 > 开发者设置 2.创建新的OAuth应用程序 3.配置应用名称和主页URL 4.添加授权回调URL 5. 生成客户端密钥 6. 添加到职员仪表板 **所需范围：** * `read:user` \- 读取用户个人资料 * `user:email` \- 访问用户电子邮件地址 ### Discord OAuth 设置 **文档：** templates/discord/SETUP.md 1. 在 Discord 开发者门户中创建应用程序 2. 导航到 OAuth2 部分 3. 添加重定向 URI 4. 复制客户端 ID 和客户端密钥 5.配置机器人权限（如果需要） 6. 添加到职员仪表板 **所需范围：** * `identify` \- 用户身份 * `email` \- 电子邮件地址 * `guilds` \- 服务器列表（可选） ### Microsoft OAuth 设置 **文档：** templates/microsoft/SETUP.md 1. 在 Azure AD 门户中注册应用程序 2. 配置平台设置（Web） 3. 添加重定向 URI 4. 生成客户端密钥 5.配置API权限 6. 添加到职员仪表板 **所需范围：** * `openid` \- OpenID 连接 * `profile` \- 用户个人资料 * `email` \- 电子邮件地址 * `User.Read` \- Microsoft Graph API ### Apple OAuth 设置 **文档：** templates/apple/SETUP.md 1. 在 Apple Developer Portal 中创建 App ID 2.启用Apple登录功能 3.创建服务ID 4. 配置域名和重定向 URL 5. 创建私钥用于身份验证 6. 添加到职员仪表板 **所需范围：** * `name` \- 用户名 * `email` \- 电子邮件地址 ## 最佳实践 **多提供商策略：** * 提供 2-3 个主要提供商（Google、GitHub、Discord） * 添加 B2B 应用程序的企业提供商（Microsoft、LinkedIn） * 包括电子邮件/密码作为后备选项 * 定期测试所有提供商 **重定向 URL 管理：** * 使用环境特定的 URL * 将确切 URL 列入白名单（无通配符） * 在生产中使用HTTPS * 记录所有重定向 URL **范围配置：** * 请求最小必要范围 * 记录为什么需要每个范围 * 优雅地处理范围变化 * 测试范围有限 **错误处理：** * 处理特定于提供商的错误 * 提供清晰的用户反馈 * 记录认证失败 * 实现重试逻辑 **测试：** * 在发布前测试所有提供商 * 验证所有环境中的重定向 URL * 使用新用户帐户进行测试 * 验证令牌刷新流程 **安全：** * 将凭据存储在环境变量中 * 对所有 OAuth 流程使用 HTTPS * 实现CSRF保护 * 验证状态参数 * 定期轮换秘密 ## 故障排除 **重定向 URI 不匹配：** * 在提供商控制台中验证 URL 的精确匹配 * 检查尾部斜杠 * 验证协议（http 与 https） * 确认环境配置 **无效的客户凭证：** * 验证客户端ID和密码是否正确 * 检查凭证中的空格 * 确保凭证与环境匹配 * 如果受到损害则重新生成 **范围授权失败：** * 验证提供商支持范围 * 检查提供商API版本 * 验证范围语法 * 如果需要，请求应用程序审核（某些提供商） **代币交换错误：** * 验证授权码是否有效 * 检查令牌端点 URL * 验证代码验证器（PKCE） * 确保及时的代币交换 **用户配置文件检索失败：** * 验证访问令牌是否有效 * 检查配置文件端点权限 * 验证配置文件访问范围 * 处理速率限制 ** ** **插件：** clerk **版本：** 1.0.0 **类别：** 身份验证 **技能类型：** 配置 **支持的提供商：** 19+

Oauth 提供者

包含技能