zibll子比主题第三方社交帐号登录接入教程[V9.0有更新]

第三方登录可以让用户使用 QQ、微信、微博、GitHub、Google 等账号快速登录网站。子比主题已内置多种社交登录方式,站长只需要在对应服务商平台创建应用,获取 AppID / Client IDAppKeyAppSecret / Client Secret 等信息,并填写到子比主题后台即可。

目前子比主题支持的全部登录方式:

  • Wechat Social插件
  • 彩虹聚合登录
  • Zibll代理登录
  • QQ登录
  • 微信登录(公众号模式)
  • 微信登录(开放平台模式)
  • 微博登录
  • 码云(gitee)登录
  • 百度登录
  • 支付宝登录
  • GitHub登录
  • Google登录
  • Facebook登录
  • Microsoft登录
  • Twitter登录
  • Apple登录

接入前准备

在开始配置前,请先确认以下条件:

  1. 网站已正确安装并启用子比主题。
  2. 网站已配置 HTTPS,建议全站启用 SSL。
  3. WordPress 固定链接正常。

不同版本菜单名称可能略有差异,以实际后台显示为准。

配置流程

大多数第三方登录的接入流程类似:

  1. 注册并登录对应开放平台。
  2. 创建网站应用或网页应用。
  3. 填写网站名称、网站地址、应用图标、备案信息等。
  4. 填写授权回调地址。
  5. 获取应用的 AppIDAppKeyClient IDClient Secret 等参数。
  6. 回到子比主题后台,启用对应登录方式并保存参数。
  7. 前台测试登录是否正常。

需要特别注意:回调地址必须和服务商平台填写的地址完全一致,包括协议 https://、域名、路径、末尾斜杠等。

开始配置

进入主题设置-用户互动-第三方登录,在这个页面就可以看到全部的第三方登录方式了,按照您的需要开始接入即可

图片[1]-zibll子比主题第三方社交帐号登录接入教程[V9.0有更新]-WordPress主题模板-zibll子比主题

QQ 登录

QQ 登录需要前往 QQ 互联创建网站应用。

微信登录:公众号模式

微信公众号登录支持认证或未认证的公众号登录,详细请查看以下教程。

微信登录:开放平台模式

微信开放平台模式适合 PC 网站扫码登录,用户可通过微信扫码完成登录。

接入教程:

  1. 登录微信开放平台。
  2. 完成开发者资质认证。
  3. 创建“网站应用”。
  4. 填写网站名称、网站地址、应用图标、介绍等信息。
  5. 配置授权回调域。
  6. 提交审核。
  7. 审核通过后获取 AppIDAppSecret
  8. 回到子比主题后台,选择微信登录开放平台模式。
  9. 填写 AppIDAppSecret
  10. 保存并测试 PC 端扫码登录。

注意事项:

  • 微信开放平台网站应用通常需要企业资质和审核。
  • 公众号模式和开放平台模式不是一回事。
  • PC 网站扫码登录一般使用开放平台模式。

微博登录

微博登录需要在微博开放平台创建网页应用。

接入教程:

  1. 登录微博开放平台。
  2. 创建网站接入应用。
  3. 填写应用名称、网站地址、应用介绍、图标等信息。
  4. 设置 OAuth 回调地址。
  5. 获取 App KeyApp Secret
  6. 回到子比主题后台,开启微博登录。
  7. 填写 App KeyApp Secret
  8. 保存并测试登录。

注意事项:

  • 微博登录需要正确配置授权回调页。
  • 应用资料不完整可能影响审核。
  • 网站域名需要和应用配置保持一致。

码云 Gitee 登录

Gitee 登录适合技术类网站、开发者社区或资源站。

接入教程:

  1. 登录 Gitee。
  2. 进入个人设置或开发者应用管理。
  3. 创建第三方应用。
  4. 填写应用名称、应用主页、应用描述。
  5. 填写子比主题提供的 Gitee 回调地址。
  6. 创建后获取 Client IDClient Secret
  7. 回到子比主题后台,开启 Gitee 登录。
  8. 填写 Client IDClient Secret
  9. 保存并测试。

注意事项:

  • 回调地址必须完整填写。
  • Gitee 登录更适合面向开发者用户的网站。

百度登录

百度登录需要在百度开发者平台创建应用。

接入教程:

  1. 登录百度开发者平台。
  2. 创建应用。
  3. 选择网页应用或 OAuth 相关应用类型。
  4. 填写应用名称、网站地址、应用说明。
  5. 配置授权回调地址。
  6. 获取 API KeySecret Key
  7. 回到子比主题后台,开启百度登录。
  8. 填写相关参数。
  9. 保存并测试。

注意事项:

  • 百度平台通常使用 API KeySecret Key
  • 应用配置里的域名、回调地址要与网站保持一致。

支付宝登录

支付宝登录适合电商、会员付费、虚拟商品等网站。

教程内容:

  1. 登录支付宝开放平台。
  2. 创建网页应用。
  3. 添加“支付宝会员授权”或相关用户授权能力。
  4. 配置应用网关、授权回调地址等信息。
  5. 生成或配置应用公钥、支付宝公钥。
  6. 获取应用 APPID
  7. 回到子比主题后台,开启支付宝登录。
  8. 按主题要求填写 APPID、应用私钥、支付宝公钥等参数。
  9. 保存并测试登录。

注意事项:

  • 支付宝登录通常涉及密钥配置,比普通 OAuth 稍复杂。
  • 私钥不要泄露,也不要放在公开页面。
  • 如果同时使用支付宝支付,要区分登录授权和支付接口配置。
  • 由于支付宝登录不支持手机端的网页,所以只会在 PC 端显示登录按钮。

GitHub 登录

GitHub 登录通过 OAuth App 接入。GitHub 官方文档说明,创建 OAuth App 时需要填写应用主页地址和授权回调地址,并在创建后获得客户端凭据。

Google 登录

Google 登录需要在 Google Cloud Console 创建 OAuth 客户端。Google 官方文档说明,Web 应用需要创建 OAuth 凭据,并配置授权重定向 URI。参考:Google OAuth Web Server 文档

教程内容:

  1. 进入 Google Cloud Console。
  2. 创建或选择一个项目。
  3. 配置 OAuth 同意屏幕。
  4. 创建 OAuth 客户端 ID。
  5. 应用类型选择 Web application。
  6. 在授权重定向 URI 中填写子比主题提供的 Google 回调地址。
  7. 创建后获取 Client IDClient Secret
  8. 回到子比主题后台,开启 Google 登录。
  9. 填写 Client IDClient Secret
  10. 保存后测试。

注意事项:

  • Google 登录通常要求 HTTPS。
  • 如果应用对外公开,可能需要完善 OAuth 同意屏幕信息。
  • 部分敏感权限可能触发 Google 审核,但普通登录一般只需基础资料权限。

Facebook 登录

Facebook 登录需要在 Meta for Developers 创建应用并启用 Facebook Login。

教程内容:

  1. 登录 Meta for Developers。
  2. 创建应用。
  3. 添加 Facebook Login 产品。
  4. 选择 Web 平台。
  5. 填写网站 URL。
  6. 在 OAuth 设置中填写有效 OAuth 回调地址。
  7. 获取 App IDApp Secret
  8. 回到子比主题后台,开启 Facebook 登录。
  9. 填写 App IDApp Secret
  10. 保存并测试。

注意事项:

  • 应用上线前需要切换为 Live 模式。
  • 站点隐私政策 URL 通常需要填写。
  • 普通登录建议只申请基础资料和邮箱权限。

Microsoft 登录

Microsoft 登录需要在 Microsoft Entra 管理中心注册应用。微软文档说明,注册应用时需要配置重定向 URI。参考:Microsoft 注册应用文档

教程内容:

  1. 进入 Microsoft Entra 管理中心。
  2. 创建应用注册。
  3. 填写应用名称。
  4. 选择支持的账户类型。
  5. 平台选择 Web。
  6. 填写子比主题提供的 Microsoft 回调地址。
  7. 创建后复制 Application Client ID
  8. 创建客户端密码并复制 Client Secret
  9. 回到子比主题后台,开启 Microsoft 登录。
  10. 填写 Client IDClient Secret
  11. 保存并测试。

注意事项:

  • 客户端密码只会完整显示一次,创建后请及时保存。
  • 账户类型会影响哪些 Microsoft 用户可以登录。

Twitter / X 登录

Twitter 现为 X,登录通常通过 X Developer Platform 的 OAuth 能力接入。参考:X OAuth 文档入口

教程内容:

  1. 登录 X Developer Platform。
  2. 创建 Project 和 App。
  3. 启用用户认证设置。
  4. 选择 OAuth 2.0 或 OAuth 1.0a,具体以子比主题支持方式为准。
  5. 填写网站地址和回调地址。
  6. 获取 Client IDClient Secret,或 API KeyAPI Secret
  7. 回到子比主题后台,开启 Twitter 登录。
  8. 填写对应参数。
  9. 保存并测试。

注意事项:

  • X 开发者平台权限和套餐政策可能变化较频繁。
  • 如果主题后台要求 API Key / API Secret,就按 OAuth 1.0a 应用参数填写。
  • 如果要求 Client ID / Client Secret,则按 OAuth 2.0 应用参数填写。

Apple 登录

Apple 登录需要 Apple Developer 账号,并配置 Sign in with Apple。Apple 官方文档说明,网页登录需要创建 Services ID,并配置网站域名和返回地址。参考:Apple 网页登录配置文档

教程内容:

  1. 登录 Apple Developer。
  2. 进入 Certificates, Identifiers & Profiles。
  3. 创建或选择支持 Sign in with Apple 的 App ID。
  4. 创建 Services ID。
  5. 在 Services ID 中启用 Sign in with Apple。
  6. 配置网站域名和 Return URLs。
  7. 创建 Sign in with Apple 私钥。
  8. 获取 Services IDTeam IDKey ID 和私钥文件内容。
  9. 回到子比主题后台,开启 Apple 登录。
  10. 按主题要求填写相关参数。
  11. 保存并测试。

注意事项:

  • Apple 登录配置项较多,常见字段包括 Client ID / Services IDTeam IDKey ID、私钥。
  • Return URL 必须和子比主题回调地址一致。
  • Apple Developer 账号通常需要付费开发者资格。

建议接入顺序

第三方社交账号登录并不是接入的越多越好,一般我们会根据自己网站的类型选择性进行接入。如果是国内站点,建议优先接入:

  1. QQ 登录
  2. 微信登录
  3. 微博登录
  4. 支付宝登录
  5. Gitee 登录

如果是技术类或国际化站点,建议接入:

  1. GitHub 登录
  2. Google 登录
  3. Microsoft 登录
  4. Apple 登录
  5. Facebook / Twitter 登录

其他方式或插件

除了主题自带的这些第三方登录接口之外,同时主题还支持接入彩虹聚合登录以及Wechat Social登录插件。如果你不想自己一个一个的申请的话,可以用这两种方式进行接入。

zibll代理登录

子比代理登录是针对有多个网站都使用的是子比主题的话,那么你只需要在一个网站上配置第三方登录即可,其他的子比主题网站使用子比带笔登录功能即可接入同一套第三方社交账号登录,极大地方便并简化了配置流程,且解决了第三方社交账号登录不能设置多个回调的问题。

海外平台接入提醒

由于国内网络限制,如果你启用了海外社交平台登录,那么需要你的服务器及用户端网络都能正常连接对应平台,才能正常使用对应的登录功能。例如您开启了谷歌账户登录,那么需要您的服务器能够正常访问谷歌,以及用户端也能够正常访问谷歌,才可以使用。

© 版权声明
THE END
文章不错?点个赞呗
点赞51赞赏 分享