Flutter应用内实现无浏览器跳转的Github登录与认证方案问询

完全可以实现，核心是通过应用内WebView加载Github OAuth授权页面，全程操作都在App内部完成，具体实现步骤如下：

前置准备 #

• 先在Github开发者后台创建OAuth应用，记下生成的client_id和client_secret，同时配置自定义回调Schema，比如your_app_schema://github_auth_callback，不要用http/https开头的回调地址，方便后续WebView拦截
• 在Flutter项目的pubspec.yaml中引入官方维护的webview_flutter依赖，用于加载授权页面

核心实现流程 #

• 拼接Github授权页地址：https://github.com/login/oauth/authorize?client_id=替换为你的client_id&scope=需要的权限范围比如user,repo&redirect_uri=替换为你配置的回调地址
• 新建一个全屏的WebView页面加载上述拼接好的地址，同时开启WebView的导航拦截功能
• 监听WebView的跳转请求，一旦检测到请求地址是你之前配置的回调Schema，就停止跳转，从回调地址的参数中提取code值
• 把获取到的code传给你的后端服务，由后端携带client_id、client_secret、code请求Github的token接口换取access_token，这里必须走后端交互，绝对不能把client_secret放在前端代码中，否则会有严重的密钥泄露风险
• 后端将获取到的access_token返回给前端后，你就可以用这个token请求Github的用户信息接口，拿到用户的头像、昵称等信息，完成整个登录流程，之后关闭WebView页面即可

注意事项 #

Github的token接口设置了CORS限制，前端直接请求会被跨域拦截，所以必须走后端中转换取token，这一步是不可省略的

• 安卓和iOS端需要分别在原生配置文件中注册你自定义的回调Schema，避免WebView无法识别拦截
• 拿到的access_token建议通过flutter_secure_storage存储在本地安全区域，不要明文存储在普通缓存中
• 可以给WebView添加加载动画、错误重试等交互，优化用户使用体验

内容的提问来源于stack exchange，提问作者Ankan Sharma