nCalendar 第三方登录：微信篇type
status
date
slug
summary
category
tags
create_time
Jun 21, 2025 08:56 AM
icon
password
my_create_time
📝 背景简介
nCalendar 是一个集成 Notion 模板、日历与本地提醒的自动化时间管理工具。
通过引入「微信快捷登录」后，用户可直接使用熟悉的微信身份快速进入 nCalendar，而无需再次注册或输入账号密码，大幅减少新手流失并提升移动端体验。
为提升用户体验并支持统一认证体系，我们选择通过 Dex 实现 OAuth 登录，使用 Dex 集中处理所有身份接入。
Dex 是一款开源的 OIDC 身份提供平台，可对接 GitHub、Google 等多个身份源，nCalendar 则作为 OIDC 客户端，通过 Dex 实现各种第三方 OAuth 登录接入。
🧩 前提条件
在正式集成微信登录前，请确保以下条件已满足：
- 拥有已认证的 微信开放平台账号（可参考文章《微信登录之开发者资质申请指南》）
- 有备案的 HTTPS 网站域名（含 ICP 备案号），注意网站需使用个体户或企业备案
- 已创建微信网站应用并审核通过（可参考文章《微信登录之创建网站应用》）
- 熟悉 OAuth 2.0 授权流程（code → access_token → userinfo）
🖼️ 微信登录流程图
流程其实跟 Github 等第三方OAuth2没太大区别
⚙️ 集成步骤
1️⃣ 生成 AppSecret
在微信开放平台创建网站应用审核通过后，即可生成AppSecret，需要保存好该值。
2️⃣ 创建 Dex 微信 Connector
微信也是使用的OAuth2协议，可参考官方文档，创建对应的 Connector 处理逻辑。
主要关注3个接口：
1、跳转登录页面接口
这个接口是用于跳转到微信扫一扫或快捷登录页面
参数说明：
- APPID：生成AppSecret页面可查看
- REDIRECT_URI：创建网站应用时设置的回调域名，可添加子级目录，如申请时填写的是auth.lusyoe.com，这里可以填写auth.lusyoe.com/callback，注意需要URL编码。
- SCOPE：固定值 snsapi_login
- state：随机生成的一串字符，防止csrf攻击
2、获取access_token接口
当用户通过扫一扫或快捷登录完成后，微信会携带
Code回调我们的REDIRECT_URI地址，我们需要通过返回的Code再去调微信这个接口获取token。参数说明：
- APPID：生成AppSecret页面可查看
- SECRET：生成的AppSecret
- CODE：登录成功后微信回调我们
callback接口带上的Code
3、获取用户信息接口
当获取到access_token之后，我们就可以通过token去调该接口获取用户更多信息了。
参数说明：
- ACCESS_TOKEN：通过Code交换获取到的token
- OPENID：微信用户的唯一标识，在获取token时会一并返回。
3️⃣ 配置dex connector和client
在 Dex 的配置文件
config.yaml 中添加 Wechat Connector：添加 Client 配置
这一步是确保登录成功后 Dex 会自动跳回我们的应用内。
4️⃣ 添加登录入口
在我们的统一认证页面添加微信登录的入口，需构建登录页面的URL。
这里就需要用到上面介绍的第一个接口，确保能跳转到微信的登录页面。
5️⃣ 处理登录业务逻辑
最后就是登录成功后 nCalendar 处理的业务逻辑了，包括判断是首次登录，需要设置用户名、邮箱和密码信息。
这是因为微信的安全措施，我们无法获取到微信号、邮箱和密码，但是这些是我们登录日历必须需要的，因此只能手动设置一次了。
由于修改了用户名信息，还需要再重新登录一次。
✅ 总结
通过上述步骤，我们已成功为 nCalendar 添入微信扫码登录能力，带来以下好处：
- 🚪 一键登录：用户无需注册账户，扫码即可访问
- 📱 移动友好：提升移动端用户体验
- 🔐 更安全：避免重复管理密码，授权可控
- 📊 提高转化率：尤其适用于开放注册或团队协作场景
📎 参考文章
有关文章的任何疑问，欢迎您在底部评论区留言，一起交流~
若文章对您有帮助，欢迎 请我喝杯咖啡~
- 作者:lusyoe
- 链接:https://blog.lusyoe.com/article/ncalendar-wechat-login
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
