能否将SuperTokens与LinkedIn OAuth2.0集成作为第三方登录？求实现方案及文档

SuperTokens 本身没有内置 LinkedIn 作为官方支持的第三方登录提供商，但可以通过其自定义第三方登录功能实现集成，以下是具体步骤和示例代码：

核心思路 #

利用 SuperTokens 的自定义 OAuth2 提供商能力，对接 LinkedIn 的 OAuth2 流程，主要分为三个部分：

• 在 LinkedIn 开发者平台创建应用，获取客户端 ID 和密钥
• 配置 SuperTokens 识别自定义的 LinkedIn 提供商
• 处理授权回调、用户信息获取及会话创建

步骤与示例代码 #

1. LinkedIn 应用配置 #

先在 LinkedIn 开发者后台创建应用，设置重定向 URI（需指向你的 SuperTokens 回调端点，比如 /auth/callback/linkedin），并记录下 CLIENT_ID 和 CLIENT_SECRET。

2. 后端配置（Node.js 示例） #

在 SuperTokens 后端初始化代码中，添加自定义 OAuth2 提供商配置：

const SuperTokens = require("supertokens-node");
const ThirdParty = require("supertokens-node/recipe/thirdparty");

SuperTokens.init({
    framework: "express",
    supertokens: {
        connectionURI: "http://localhost:3567",
    },
    appInfo: {
        appName: "你的应用名称",
        apiDomain: "http://localhost:3001",
        websiteDomain: "http://localhost:3000",
    },
    recipeList: [
        ThirdParty.init({
            signInAndUpFeature: {
                providers: [
                    // 自定义 LinkedIn 提供商
                    {
                        id: "linkedin",
                        name: "LinkedIn",
                        config: {
                            authorizationEndpoint: "https://www.linkedin.com/oauth/v2/authorization",
                            tokenEndpoint: "https://www.linkedin.com/oauth/v2/accessToken",
                            clientId: "YOUR_LINKEDIN_CLIENT_ID",
                            clientSecret: "YOUR_LINKEDIN_CLIENT_SECRET",
                            scope: ["r_liteprofile", "r_emailaddress"],
                            authorizationEndpointQueryParams: {
                                response_type: "code",
                            },
                            getProfileInfo: async (authCodeResponse) => {
                                // 获取用户信息
                                const accessToken = authCodeResponse.access_token;
                                const profileRes = await fetch("https://api.linkedin.com/v2/me", {
                                    headers: { Authorization: `Bearer ${accessToken}` }
                                });
                                const profileData = await profileRes.json();
                                const emailRes = await fetch("https://api.linkedin.com/v2/emailAddress?q=members&projection=(elements*(handle~))", {
                                    headers: { Authorization: `Bearer ${accessToken}` }
                                });
                                const emailData = await emailRes.json();
                                return {
                                    id: profileData.id,
                                    email: {
                                        id: emailData.elements[0]["handle~"].emailAddress,
                                        isVerified: true
                                    },
                                    name: `${profileData.localizedFirstName} ${profileData.localizedLastName}`
                                };
                            }
                        }
                    }
                ]
            }
        })
    ]
});

3. 前端配置（React 示例） #

在前端添加 LinkedIn 登录按钮，调用 SuperTokens 的第三方登录方法：

import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";

function LoginPage() {
    return (
        <ThirdPartyPreBuiltUI
            signInAndUpFeature={{
                providers: [
                    {
                        id: "linkedin",
                        name: "LinkedIn"
                    }
                ]
            }}
        />
    );
}

注意事项 #

• 确保 LinkedIn 应用的重定向 URI 与后端配置的回调地址完全匹配
• 按需调整 LinkedIn 的权限 scope，如需更多用户信息，需申请相应权限并在 scope 中添加
• 处理可能的错误情况，比如授权失败、用户信息获取失败等

内容的提问来源于stack exchange，提问作者Roberto Espinoza