{"id":17137763,"url":"https://github.com/xuexb/web-oauth-app","last_synced_at":"2025-04-13T09:51:01.087Z","repository":{"id":29778106,"uuid":"122754079","full_name":"xuexb/web-oauth-app","owner":"xuexb","description":"第三方登录服务 Web OAuth 示例","archived":false,"fork":false,"pushed_at":"2023-09-03T04:22:40.000Z","size":224,"stargazers_count":37,"open_issues_count":6,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T01:12:25.456Z","etag":null,"topics":["baidu","github","oauth","oauth2","passport","qq","weibo"],"latest_commit_sha":null,"homepage":"https://web-oauth-app.xuexb.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xuexb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-24T15:47:30.000Z","updated_at":"2024-05-20T01:35:52.000Z","dependencies_parsed_at":"2022-08-17T20:55:34.263Z","dependency_job_id":null,"html_url":"https://github.com/xuexb/web-oauth-app","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuexb%2Fweb-oauth-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuexb%2Fweb-oauth-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuexb%2Fweb-oauth-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xuexb%2Fweb-oauth-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xuexb","download_url":"https://codeload.github.com/xuexb/web-oauth-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695300,"owners_count":21146952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["baidu","github","oauth","oauth2","passport","qq","weibo"],"created_at":"2024-10-14T20:07:53.034Z","updated_at":"2025-04-13T09:51:01.056Z","avatar_url":"https://github.com/xuexb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 第三方登录服务 Web OAuth 示例\n\n## 声明\n\n该项目只是用户走通整个第三方的流程，并写出对应的思路，代码不提供参考价值。\n\n## 使用技术\n\n- 后端基于 [Node.js v7.8+](http://nodejs.org/) + [ThinkJS v3](http://thinkjs.org/)\n- 数据库基于 MySQL\n- 前端样式基于 [Bootstrap v4](https://v4.bootcss.com/)\n- 代码托管于 [GitHub@xuexb/web-oauth-app](https://github.com/xuexb/web-oauth-app)\n- 示例链接 \u003chttps://web-oauth-app.xuexb.com\u003e\n\n## 数据库\n\n\u003e 请注意修改 `src/config/adapter.js` 中 MySQL 数据库配置。\n\n```sql\nSET NAMES utf8mb4;\nSET FOREIGN_KEY_CHECKS = 0;\n\n-- ----------------------------\n--  Table structure for `oauth`\n-- ----------------------------\nDROP TABLE IF EXISTS `oauth`;\nCREATE TABLE `oauth` (\n  `id` int(11) NOT NULL AUTO_INCREMENT,\n  `type` char(50) NOT NULL COMMENT '类型，有 qq、github、weibo',\n  `uid` varchar(255) NOT NULL COMMENT '唯一标识',\n  `info` varchar(255) DEFAULT '' COMMENT '其他信息，JSON 形式',\n  `user_id` int(11) NOT NULL COMMENT '用户ID',\n  `create_time` bigint(13) NOT NULL COMMENT '创建时间',\n  `name` varchar(255) DEFAULT NULL COMMENT '显示名称',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;\n\n-- ----------------------------\n--  Table structure for `user`\n-- ----------------------------\nDROP TABLE IF EXISTS `user`;\nCREATE TABLE `user` (\n  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',\n  `username` varchar(255) NOT NULL COMMENT '用户名',\n  `password` varchar(255) NOT NULL COMMENT '密码',\n  `create_time` bigint(13) NOT NULL COMMENT '创建时间',\n  `update_time` bigint(13) NOT NULL COMMENT '更新时间',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4;\n\nSET FOREIGN_KEY_CHECKS = 1;\n```\n\n## 第三方登录说明\n\n- 每个用户必须拥有自己的用户名和密码。\n- 每个用户可以绑定不同的第三方帐户系统。\n- 用户可以对第三方绑定进行管理。\n- 用户可以通过已绑定的任意第三方帐户系统进行登录。\n- 用户授权表中需要存放第三方系统的唯一标识、显示名称，唯一标识用来和用户、第三方系统进行关联。\n- 基于 oAuth2.0 进行授权认证。\n- 第三方登录回调成功后，判断当前是否登录：\n    - 已登录，刷新绑定信息。\n    - 未登录，记录授权信息，在登录、注册成功后绑定信息。\n\n当然你可以根据自己实际项目需求修改，比如：\n\n- 第三方登录后判断当前是否已登录，如果已登录且绑定的对应平台不是当前帐号，则提示是否更新绑定，或者登录失败\n- 第三方登录后判断是否绑定过，如果没有绑定过则自动生成一个用户自动绑定\n- 一个帐户只允许绑定一个第三方平台\n- 等等\n\n### GitHub\n\n1. 跳转到授权页 `https://github.com/login/oauth/authorize?`\n1. 认证通过后自动跳转到回调地址，并携带 `code`\n2. 使用 `code` 请求 `https://github.com/login/oauth/access_token` 来获取 `access_token` ，有个小坑是，在想使用 JSON 返回值时，需要在请求头里添加 `'Accept': 'application/json'`\n3. 使用 `access_token` 请求 `https://api.github.com/` 获取用户信息：\n    - `id` - 唯一标识\n    - `name` - 显示名称\n    - `avatar_url` - 用户头像\n\n参考链接：\u003chttps://developer.github.com/apps/building-oauth-apps/authorization-options-for-oauth-apps/\u003e\n\n### QQ\n\n1. 跳转到授权页 `https://graph.qq.com/oauth2.0/show?which=Login\u0026display=` ，需要区分下 PC 端和移动端传，参数 `display` 不一样，需要单独处理下\n1. 认证通过后自动跳转到参数 `redirect_uri` 中，并携带 `code`\n2. 使用 `code` 请求 `https://graph.qq.com/oauth2.0/token?` 获取 `access_token` ，有个大坑是成功时返回 `access_token=xxx` ，错误时返回 `callback( {code: xxx} )` ，好尴尬。。。\n3. 使用 `access_token` 请求 `https://graph.qq.com/oauth2.0/me?` 获取 `openid` ，而这里又是返回个 `callback({\"openid\": \"1\"})`\n4. 使用 `access_token` 和 `openid` 请求 `https://graph.qq.com/user/get_user_info` 来获取用户信息，最终为：\n    - `openid` - 唯一标识\n    - `nickname` - 显示名称\n    - `figureurl_qq_2` - 用户头像\n\n参数链接：[http://wiki.connect.qq.com/开发攻略_server-side](http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side)\n\n### 微博\n\n1. 跳转到授权页 `https://api.weibo.com/oauth2/authorize`\n1. 认证通过后自动跳转到参数 `redirect_uri` 中，并携带 `code`\n2. 使用 `code` 请求 `https://api.weibo.com/oauth2/access_token?` 获取 `access_token`\n3. 使用 `access_token` 请求 `https://api.weibo.com/2/users/show.json` 获取用户信息，最终为：\n    - `access_token` - 唯一标识\n    - `screen_name` - 显示名称\n    - `avatar_hd` - 用户头像\n\n参考链接：[http://open.weibo.com/wiki/授权机制说明](http://open.weibo.com/wiki/%E6%8E%88%E6%9D%83%E6%9C%BA%E5%88%B6%E8%AF%B4%E6%98%8E)\n\n### 百度\n\n1. 跳转到授权页面 `http://openapi.baidu.com/oauth/2.0/authorize?` ，需要区分下 PC 端和移动端传，参数 `display` 不一样，需要单独处理下\n2. 认证通过后自动跳转到参数 `redirect_uri` 中，并携带 `code`\n1. 使用 `code` 请求 `https://openapi.baidu.com/oauth/2.0/token` 获取 `access_token`\n2. 使用 `access_token` 请求 `https://openapi.baidu.com/rest/2.0/passport/users/getInfo` 来获取用户信息，最终为：\n    - `userid` - 唯一标识\n    - `username` - 显示名称\n    - `http://tb.himg.baidu.com/sys/portrait/item/${userinfo.portrait}` - 用户头像\n\n参考链接：\u003chttp://developer.baidu.com/wiki/index.php?title=docs/oauth/application\u003e\n\n## 隐私声明\n\n- 本项目只是演示示例，登录、注册的密码通过 MD5 加密后存储于 MySQL 中。\n- 第三方登录相关信息不会对外暴露。\n- 所有数据不定期的进行删除。\n\n## 本地开发\n\n```bash\n# 导入 MySQL 数据\n...\n\n# 申请第三方开发平台\n...\n\n# 克隆代码\ngit clone https://github.com/xuexb/web-oauth-app.git \u0026\u0026 cd web-oauth-app\n\n# 修改数据库配置\nvi src/config/adapter.js\n\n# 修改配置信息\nvi src/config/config.js\n\n# 安装依赖\nyarn install\n\n# 本地开发\nyarn start\n```\n\n### Docker 运行\n\n```bash\n# 构建\ndocker build --no-cache -t demo/web-oauth-app:latest .\n\n# 命令式运行\ndocker run \\\n    -p 8080:8080 \\\n    -d \\\n    --name web-oauth-app \\\n    --env MYSQL_USER=root \\\n    --env MYSQL_PASSWORD=123456 \\\n    --env MYSQL_DATABASE=app \\\n    --env MYSQL_HOST=locaclhost \\\n    --env MYSQL_PORT=3306 \\\n    --env OAUTH_GITHUB_CLIENT_ID= \\\n    --env OAUTH_... \\\n    demo/web-oauth-app:latest\n\n# 配置文件式运行\ndocker run \\\n    -p 8080:8080 \\\n    -d \\\n    --name web-oauth-app \\\n    -v \"$(pwd)/config.js\":/usr/src/app/src/config/config.js \\\n    -v \"$(pwd)/adapter.js\":/usr/src/app/src/config/adapter.js \\\n    demo/web-oauth-app:latest\n```\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuexb%2Fweb-oauth-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxuexb%2Fweb-oauth-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuexb%2Fweb-oauth-app/lists"}