多姿态免费聚合登录 对接个人静态站点无后端实现方案

多姿态免费聚合登录支持标准OAuth2.0协议，本篇讲解纯静态站点无后端对接的完整操作流程，全程无需付费。

第一步 进入控制台完成应用创建

打开浏览器访问多姿态免费聚合登录的专属控制台login.duozitai.com，用手机号注册登录后，在左侧菜单栏找到「应用管理」板块，点击「新建应用」按钮。应用名称填你站点的实际名称，回调地址必须填你静态站配置登录后跳转的全路径地址，比如https://你的域名/callback.html，其他备注项可以留空。提交后系统会自动生成对应应用的Client ID和Client Secret，这两个参数要单独复制存到本地记事本，不要对外泄露。多姿态免费聚合登录该部分服务永久免费，没有额外调用次数限制，也不需要提前提交站点资质审核。

第二步 静态站登录跳转页代码配置

在你静态站点的导航栏登录按钮位置，直接拼接跳转链接，拼接规则为固定前缀https://login.duozitai.com/oauth2/authorize?后面跟三个必填参数：client_id填刚才生成的Client ID，response_type固定取值为code，redirect_uri填你之前提交的回调地址的URL编码结果。把拼接好的完整链接绑定到登录按钮的点击事件上，用户点击后会直接跳转到对应第三方平台的授权页面，不需要在本地写任何后端逻辑。举个示例，若你的Client ID是123456，回调地址是https://abc.com/callback.html，拼接后的完整链接为https://login.duozitai.com/oauth2/authorize?client_id=123456&response_type=code&redirect_uri=https%3A%2F%2Fabc.com%2Fcallback.html。

第三步 回调页无后端鉴权实现

在你提前配置的callback.html页面里，写入纯JS鉴权代码，代码逻辑为首先获取浏览器地址栏里的code参数，然后直接调用公开接口https://api.duozitai.com/oauth2/token，传入client_id、client_secret、刚才获取的code三个参数，接口会直接返回用户的昵称、头像、第三方唯一标识字段，不需要你部署后端服务做中转。接口返回格式为标准HTTP+JSON，你直接在前端JS里把返回的用户信息写入浏览器本地存储，就可以完成登录态留存。成功判断标准为：用户授权后自动跳回你的回调页，浏览器控制台能打印出完整的用户信息字段，没有报错即为配置成功。

全场景报错排查方案

• 跳转授权页提示应用不存在：排查拼接链接里的client_id是否和控制台生成的完全一致，不要多打空格或者特殊字符，修正后重新跳转即可恢复正常。
• 回调后接口返回403：检查传入接口的code参数是否为空，code参数单次有效，重复使用会直接返回鉴权失败，用户刷新页面重新发起授权就能生成新的有效code。
• 第三方授权后跳转400：检查拼接跳转链接时的redirect_uri是否和控制台填写的回调地址完全一致，包括http/https前缀、端口号、路径后缀，任何字符差异都会导致授权失败，修改为完全一致的地址即可解决。

整个对接流程全程使用多姿态提供的标准OAuth2.0能力，所有已接入的QQ、微信、微博等第三方渠道不需要你单独申请资质，全部可以直接调用，无额外付费项。