Docker>> web-oauth-app>> 返回
项目作者： xuexb

项目描述 ：
第三方登录服务 Web OAuth 示例
高级语言： JavaScript
项目地址: git://github.com/xuexb/web-oauth-app.git
创建时间： 2018-02-24T15:47:30Z
项目社区：https://github.com/xuexb/web-oauth-app
开源协议：MIT License
下载


第三方登录服务 Web OAuth 示例

声明

该项目只是用户走通整个第三方的流程，并写出对应的思路，代码不提供参考价值。

使用技术

数据库

请注意修改 src/config/adapter.js 中 MySQL 数据库配置。

  1. SET NAMES utf8mb4;
  2. SET FOREIGN_KEY_CHECKS = 0;
  4. -- ----------------------------
  5. --  Table structure for `oauth`
  6. -- ----------------------------
  7. DROP TABLE IF EXISTS `oauth`;
  8. CREATE TABLE `oauth` (
  9.   `id` int(11) NOT NULL AUTO_INCREMENT,
  10.   `type` char(50) NOT NULL COMMENT '类型，有 qq、github、weibo',
  11.   `uid` varchar(255) NOT NULL COMMENT '唯一标识',
  12.   `info` varchar(255) DEFAULT '' COMMENT '其他信息，JSON 形式',
  13.   `user_id` int(11) NOT NULL COMMENT '用户ID',
  14.   `create_time` bigint(13) NOT NULL COMMENT '创建时间',
  15.   `name` varchar(255) DEFAULT NULL COMMENT '显示名称',
  16.   PRIMARY KEY (`id`)
  17. ) ENGINE=InnoDB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8mb4;
  19. -- ----------------------------
  20. --  Table structure for `user`
  21. -- ----------------------------
  22. DROP TABLE IF EXISTS `user`;
  23. CREATE TABLE `user` (
  24.   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  25.   `username` varchar(255) NOT NULL COMMENT '用户名',
  26.   `password` varchar(255) NOT NULL COMMENT '密码',
  27.   `create_time` bigint(13) NOT NULL COMMENT '创建时间',
  28.   `update_time` bigint(13) NOT NULL COMMENT '更新时间',
  29.   PRIMARY KEY (`id`)
  30. ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4;
  32. SET FOREIGN_KEY_CHECKS = 1;

第三方登录说明

  • 每个用户必须拥有自己的用户名和密码。
  • 每个用户可以绑定不同的第三方帐户系统。
  • 用户可以对第三方绑定进行管理。
  • 用户可以通过已绑定的任意第三方帐户系统进行登录。
  • 用户授权表中需要存放第三方系统的唯一标识、显示名称，唯一标识用来和用户、第三方系统进行关联。
  • 基于 oAuth2.0 进行授权认证。
  • 第三方登录回调成功后，判断当前是否登录：
    • 已登录，刷新绑定信息。
    • 未登录，记录授权信息，在登录、注册成功后绑定信息。

当然你可以根据自己实际项目需求修改，比如：

  • 第三方登录后判断当前是否已登录，如果已登录且绑定的对应平台不是当前帐号，则提示是否更新绑定，或者登录失败
  • 第三方登录后判断是否绑定过，如果没有绑定过则自动生成一个用户自动绑定
  • 一个帐户只允许绑定一个第三方平台
  • 等等

GitHub

  1. 跳转到授权页 https://github.com/login/oauth/authorize?
  2. 认证通过后自动跳转到回调地址，并携带 code
  3. 使用 code 请求 https://github.com/login/oauth/access_token 来获取 access_token ，有个小坑是，在想使用 JSON 返回值时，需要在请求头里添加 'Accept': 'application/json'
  4. 使用 access_token 请求 https://api.github.com/ 获取用户信息：
    • id - 唯一标识
    • name - 显示名称
    • avatar_url - 用户头像

参考链接：https://developer.github.com/apps/building-oauth-apps/authorization-options-for-oauth-apps

QQ

  1. 跳转到授权页 https://graph.qq.com/oauth2.0/show?which=Login&display= ，需要区分下 PC 端和移动端传，参数 display 不一样，需要单独处理下
  2. 认证通过后自动跳转到参数 redirect_uri 中，并携带 code
  3. 使用 code 请求 https://graph.qq.com/oauth2.0/token? 获取 access_token ，有个大坑是成功时返回 access_token=xxx ，错误时返回 callback( {code: xxx} ) ，好尴尬。。。
  4. 使用 access_token 请求 https://graph.qq.com/oauth2.0/me? 获取 openid ，而这里又是返回个 callback({"openid": "1"})
  5. 使用 access_token 和 openid 请求 https://graph.qq.com/user/get_user_info 来获取用户信息，最终为：
    • openid - 唯一标识
    • nickname - 显示名称
    • figureurl_qq_2 - 用户头像

参数链接：http://wiki.connect.qq.com/开发攻略_server-side

微博

  1. 跳转到授权页 https://api.weibo.com/oauth2/authorize
  2. 认证通过后自动跳转到参数 redirect_uri 中，并携带 code
  3. 使用 code 请求 https://api.weibo.com/oauth2/access_token? 获取 access_token
  4. 使用 access_token 请求 https://api.weibo.com/2/users/show.json 获取用户信息，最终为：
    • access_token - 唯一标识
    • screen_name - 显示名称
    • avatar_hd - 用户头像

参考链接：http://open.weibo.com/wiki/授权机制说明

百度

  1. 跳转到授权页面 http://openapi.baidu.com/oauth/2.0/authorize? ，需要区分下 PC 端和移动端传，参数 display 不一样，需要单独处理下
  2. 认证通过后自动跳转到参数 redirect_uri 中，并携带 code
  3. 使用 code 请求 https://openapi.baidu.com/oauth/2.0/token 获取 access_token
  4. 使用 access_token 请求 https://openapi.baidu.com/rest/2.0/passport/users/getInfo 来获取用户信息，最终为：
    • userid - 唯一标识
    • username - 显示名称
    • http://tb.himg.baidu.com/sys/portrait/item/${userinfo.portrait} - 用户头像

参考链接：http://developer.baidu.com/wiki/index.php?title=docs/oauth/application

隐私声明

  • 本项目只是演示示例，登录、注册的密码通过 MD5 加密后存储于 MySQL 中。
  • 第三方登录相关信息不会对外暴露。
  • 所有数据不定期的进行删除。

本地开发

  1. # 导入 MySQL 数据
  2. ...
  4. # 申请第三方开发平台
  5. ...
  7. # 克隆代码
  8. git clone https://github.com/xuexb/web-oauth-app.git && cd web-oauth-app
  10. # 修改数据库配置
  11. vi src/config/adapter.js
  13. # 修改配置信息
  14. vi src/config/config.js
  16. # 安装依赖
  17. yarn install
  19. # 本地开发
  20. yarn start

Docker 运行

  1. # 构建
  2. docker build --no-cache -t demo/web-oauth-app:latest .
  4. # 命令式运行
  5. docker run \
  6.     -p 8080:8080 \
  7.     -d \
  8.     --name web-oauth-app \
  9.     --env MYSQL_USER=root \
  10.     --env MYSQL_PASSWORD=123456 \
  11.     --env MYSQL_DATABASE=app \
  12.     --env MYSQL_HOST=locaclhost \
  13.     --env MYSQL_PORT=3306 \
  14.     --env OAUTH_GITHUB_CLIENT_ID= \
  15.     --env OAUTH_... \
  16.     demo/web-oauth-app:latest
  18. # 配置文件式运行
  19. docker run \
  20.     -p 8080:8080 \
  21.     -d \
  22.     --name web-oauth-app \
  23.     -v "$(pwd)/config.js":/usr/src/app/src/config/config.js \
  24.     -v "$(pwd)/adapter.js":/usr/src/app/src/config/adapter.js \
  25.     demo/web-oauth-app:latest

License

MIT