配置自定义社会化登录

    1

    创建自定义社会化登录连接

    2

    在 Authing 创建一个应用

    3

    测试连接

    4

    开始开发接入

    创建自定义社会化登录连接

    填写应用基本信息

    进入 Authing 控制台 > 连接身份源 > 社会化登录，在最下方找到「连接自定义社会化登录」，点击右侧的加号。

    在弹出的抽屉中，首先填写一些基本的连接信息，连接标志符、显示名称，你可以上传一个应用 Logo。

    填写身份源基本信息

    接下来填写一些外部社会化登录提供商的基本信息，你可以从外部 OAuth2.0 身份提供商的文档中找到相关的 URL 端点，包括授权端点、Token 端点、Scope 可选值。还要填写外部 OAuth2.0 社会化登录身份源的应用 ID 和应用密钥，这些信息你可以在外部 OAuth2.0 社会化登录身份源处找到。

    虽然 scope 在这里的表单中是可选的，但某些外部 OAuth2.0 社会化登录身份源可能要求 scope 参数必传，建议在这里填写相应的配置。

    授权链接模板是一个字符串模板，你可以使用 ${authEndPoint}、${tokenEndPoint}、${scope}、${clientId}、${clientSecret} 这些宏。

    宏与表单项的对应关系如下表：

    宏 表单项
    ${authEndPoint} 授权 URL
    ${tokenEndPoint} Token URL
    ${scope} scope
    ${clientId} 应用 ID
    ${clientSecret} 应用密钥

    示例：

    如果授权链接模板填写：

    ${authEndPoint}?client_id=${clientId}&response_type=code&state=4634641&scope=${scope}&redirect_uri=https://core.authing.cn/connections/oauth2/5fa91b0f50315451dc86086d/callback

    将来会生成以下授权 URL：

    https://login.microsoftonline.com/8f909eb1-99fe-4f75-b4e0-2f7ab37815c6/oauth2/v2.0/authorize?client_id=fc52a7ab-4172-4db3-9292-e51f85a1576e&response_type=code&state=4634641&scope=openid profile&redirect_uri=https://core.authing.cn/connections/oauth2/5fa91b0f50315451dc86086d/callback

    上传自定义代码片段

    最后，也是最关键的部分，你需要上传自定义代码片段完成 Code 换 Token 和 Token 换用户信息并进行字段对齐的功能。

    Authing 已经为你提供了模板代码：

    你可以在函数中使用 request-promise (opens new window) 库发送网络请求。

    codeToToken 函数

    以下是 codeToToken 函数的模板代码，函数的第一个参数 code 是授权码，你需要用这个 code 从外部 OAuth2.0 社会化登录身份提供商的 Token 端点换取的 AccessToken。

    async function codeToToken(code, connection) {
  const options = {
    method: 'POST',
    uri: '外部 OAuth2.0 IdP Token 端点',
    form: {
      client_id: '外部 OAuth2.0 IdP 的应用 ID',
      client_secret: '外部 OAuth2.0 IdP 的应用密钥',
      grant_type: 'authorization_code',
      redirect_uri: 'https://core.authing.cn/connections/oauth2/{连接 ID}/callback',
      code,
    },
    json: true,
  };
  const resp = await request(options);

  // 在这里返回 AccessToken 的字符串值
  return resp.access_token;
}

    tokenToUserInfo 函数

    以下是 tokenToUserInfo 函数的模板代码，函数的第一个参数 accessToken 是上一个函数 codeToToken 函数的返回值（本例中为 resp.access_token），你需要用 accessToken 从外部 OAuth2.0 社会化登录身份提供商的用户信息端点换取用户信息，并完成字段对齐。返回值是一个对象，内容必须为符合 Authing 数据格式的用户信息字段，且必须包含 userIdInIdp 字段，该字段内容为用户在外部身份提供商中的唯一标识符，也就是用户 ID。

    async function tokenToUserInfo(accessToken, connection) {
  const options = {
    method: 'POST',
    uri: '外部 OAuth2.0 IdP 用户信息端点',
    form: {
      access_token: accessToken,
    },
    json: true,
  };
  const resp = await request(options);

  // 进行字段对齐
  const profile = {
    // 必须包含 userIdInIdp 字段
    userIdInIdp: resp.sub,
    name: resp.name,
    familyName: resp.family_name,
    givenName: resp.given_name,
    photo: resp.picture,
  };
  return profile;
}

    请将用户信息对齐到以下字段，即 tokenToUserInfo 函数返回的内容必须为一个对象，且这个对象中的 key 必须存在于下表中的字段名，Authing 用户信息字段含义表：

    字段名 格式 含义
    username string 用户名
    email string 邮箱
    emailVerified boolean 邮箱是否验证
    phone string 手机号
    phoneVerified boolean 手机号是否验证
    birthdate string 生日
    familyName string 姓氏
    gender string 性别
    locale string 生日
    middleName string 中间名
    givenName string 名
    nickname string 昵称
    photo string 头像链接
    profile string 个人资料页链接
    preferredUsername string 喜欢的用户名
    updatedAt Date 更新日期
    website string 个人网站
    zoneinfo string 时区

    最后点击「保存」。到此自定义外部社会化登录的设置就全部完成了，接下来我们来体验一下使用自定义社会化登录连接进行认证。

    回到列表