懒猫微服进阶心得（十）：本地开发，如何接入懒猫微服的 OpenID Connect (OIDC)

我们知道懒猫的 OpenID Connect (OIDC) 无需在后台申请，商店里的应用在运行的时候会自动申请，但是本地测试的时候就不太方便。

一般是需要用其他的 IDP 作为测试环境，因为 OIDC 的协议是通用的，不像 OAuth 这么百花齐放。

以我的“家庭任务通知”APP 为例，讲解下在开发模式下接入懒猫微服的 OpenID Connect (OIDC)。

---

### 添加 OIDC 登录逻辑

首先前端需要有一个 OIDC 的登录按钮，然后做好 OIDC 的逻辑：

![image-20250626104429835](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250626104429835.png)

---

### 使用懒猫 ENV 查看器导出本地配置

从应用商店安装我写的“懒猫 ENV 查看器”，导出 `env.example` 文件，导出项目之后重命名为 `.env`。这样就可以把商店里的 ENV 复制到本地的开发环境。

不过需要注意的是：**应用名字和回调函数还是原来的，不要轻易去改。遇到问题再手动调试。**


https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.env



---
![Snipaste_2025-06-26_13-41-30](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/Snipaste_2025-06-26_13-41-30.png)

###  登录后出现回调 URL 报错

登录之后我们就看到了这个页面：

![image-20250626104445501](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250626104445501.png)

点击“授予权限”，会报错。这个是由于回调 URL 不匹配的问题，还是会访问 ENV 查看器的 URL：

![image-20250626104502680](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250626104502680.png)

---

### 手动修改回调 URL

然后我们手动把上边的 URL 改成我们自己的回调路由就可以了，如果想自动化，你也可以写一个油猴脚本。


![image-20250626104618044](https://raw.githubusercontent.com/cloudsmithy/picgo-imh/master/image-20250626104618044.png)

---

这样就可以完成本地的 OIDC 授权流程啦。开发的时候不用搭 IDP，也能走懒猫的登录流程。是不是很方便？