Flet examples用户认证教程GitHub OAuth登录与多用户Web应用开发的5个关键步骤【免费下载链接】examplesFlet sample applications项目地址: https://gitcode.com/gh_mirrors/examples28/examples本教程基于 Flet 示例应用仓库Flet examples中的python/apps/authentication/认证样例代码用 5 个步骤教你如何在 Flet 中完成 GitHub OAuth 登录、登录态持久化并构建支持多用户访问的 Web 应用。无需手写复杂的认证协议Python 新手也能快速跑通一套完整的 Flet 用户认证流程。为什么选 GitHub OAuth 登录来做 Flet 用户认证很多新手做 Flet 多用户 Web 应用时第一反应是自己写注册表单 密码存储既麻烦又容易踩安全坑。Flet 内置了 OAuth 支持flet.auth.providers模块直接提供了开箱即用的GitHubOAuthProvider甚至可以用通用的OAuthProvider对接 LinkedIn 等第三方平台。相比自研登录它有三个明显优势免写密码体系用户用 GitHub 账号一键登录不存在密码泄露风险天然多用户每次登录都会拿到唯一的用户 ID 和访问令牌天然区分不同用户代码量极少核心逻辑只有几十行本教程 5 个步骤全部跑通5 步搭建 Flet 用户认证流程步骤1创建 GitHub OAuth 凭据并配置环境变量在 GitHub 开发者设置里创建 OAuth App拿到client_id和client_secret再通过环境变量注入不要硬编码在代码里GITHUB_CLIENT_IDGitHub OAuth 应用的客户端 IDGITHUB_CLIENT_SECRET对应的客户端密钥MY_APP_SECRET_KEYFlet 令牌加密用的应用密钥步骤4会用样例中用os.getenv()读取环境变量并配了assert断言——缺少凭据时程序会立即报错提示这是很实用的防御式写法。⚠️ 注意OAuth 回调地址redirect_url要和你启动应用时的端口保持一致样例统一使用8550端口。步骤2配置 GitHubOAuthProvider 并触发登录Flet 用户认证的核心就两行创建 provider调用page.login(provider)。最简版本见 basic-auth.pyprovider GitHubOAuthProvider( client_idGITHUB_CLIENT_ID, client_secretGITHUB_CLIENT_SECRET, redirect_urlhttp://localhost:8550/api/oauth/redirect, ) def login_click(e): page.login(provider)点击按钮后Flet 会自动跳转 GitHub 授权页用户同意授权后浏览器自动跳回你的应用page.auth就会拿到用户信息和访问令牌access token。如果你希望登录时额外申请权限比如读取仓库可以给page.login传scope参数如scope[public_repo]。步骤3监听登录登出事件按认证状态切换界面判断当前是否已登录的依据是page.auth是否为None。把这套逻辑抽成一个切换函数登录/登出后调用即可完整示例见 check-auth-results-and-toggle-ui.pydef toggle_login_buttons(): login_button.visible page.auth is None # 未登录显示登录按钮 logout_button.visible page.auth is not None # 已登录显示登出按钮 page.update()同时注册两个事件回调page.on_login登录成功/失败回调失败时e.error非空建议直接raise把错误暴露出来page.on_logout登出回调把界面切回登录状态登出只需调用page.logout()非常干净。步骤4加密令牌存客户端存储实现记住我登录态每次刷新页面都要重新登录体验很差。Flet 提供了client_storage对应浏览器 localStorage可以把令牌加密后存起来下次访问自动恢复登录态。完整示例见 github-oauth-with-listing-repos.py流程是登录成功时page.auth.token.to_json()序列化令牌用flet.security.encrypt()加密后存入client_storage页面加载时从client_storage读出密文decrypt()解密再调用page.login(provider, saved_token...)静默恢复会话登出时client_storage.remove(key)删掉密文并调用page.logout()from flet.security import decrypt, encrypt ejt encrypt(page.auth.token.to_json(), secret_key) page.client_storage.set(AUTH_TOKEN_KEY, ejt) 加密密钥MY_APP_SECRET_KEY也建议放环境变量。生产环境还可以把令牌改存服务端数据库实现跨设备登录。步骤5用访问令牌调用 GitHub API构建多用户页面登录成功后page.auth.token.access_token就是调用 GitHub API 的通行证。带上Authorization: Bearer token请求头即可拉取当前登录用户的私有数据——不同用户看到的内容自然不同多用户 Web 应用就成立了。以列出该用户的 GitHub 仓库为例同上文件第57-73行headers { User-Agent: Flet, Authorization: Bearer {}.format(page.auth.token.access_token), } repos_resp httpx.get(https://api.github.com/user/repos, headersheaders)把结果渲染成ft.ListViewft.ListTile界面就能动态展示每个用户自己的仓库列表。页面骨架参考顶部Row放问候语和登录/登出按钮下方ListView(expandTrue)放数据区。进阶异步版本 github-oauth-with-listing-repos-async.py 使用async/awaithttpx.AsyncClient并发拉取数据是更推荐的生产写法。想登录 LinkedIn通用OAuthProvider只需填授权/令牌/用户三个端点即可见 linkedin-login.py。认证样例文件速查表文件路径解决的问题basic-auth.py最小可用的 GitHub OAuth 登录basic-auth-async.py异步版的极简登录check-auth-results-and-toggle-ui.py登录/登出事件与按钮状态切换github-oauth-with-listing-repos.py令牌加密持久化 拉取用户仓库本教程主示例github-oauth-with-listing-repos-async.py全异步版本生产推荐linkedin-login.py用通用 OAuthProvider 对接 LinkedIn常见问题速答Q1登录成功后page.auth还是None检查redirect_url的端口是否与ft.app(targetmain, port8550, ...)启动端口一致回调地址不通是最常见的坑。Q2on_login里为什么要判断e.error用户拒绝授权或凭据错误时不会抛异常而是把错误放进事件对象里静默返回不判断的话很难排查。Q3Flet 桌面端和 Web 端的用户认证有区别吗核心 API 相同。Web 端建议用viewft.WEB_BROWSER启动client_storage对应浏览器存储桌面端存储位置由 Flet 自动管理代码无需修改。写在最后掌握 GitHub OAuth 登录只是起点。Flet examples 仓库里还有计数器、待办事项、聊天室等完整应用可参考——把本教程的 5 步流程套用到 todo、greeter 等样例上你就能快速交付一个带完整用户认证体系的多用户 Web 应用。【免费下载链接】examplesFlet sample applications项目地址: https://gitcode.com/gh_mirrors/examples28/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考