diff --git a/docs/_sidebar.md b/docs/_sidebar.md index ae891c27c52cfd58c0d316a1b2b279947ef63273..bb8b58736d9d754e57b86e5cda93b0d60c7aab1f 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -22,8 +22,8 @@ - [√ 钉钉登录](oauth/dingtalk.md) - [√ 开源中国登录](oauth/oschina.md) - [淘宝登录](oauth/taobao.md) - - [Google登录](oauth/google.md) - - [Facebook登录](oauth/facebook.md) + - [√ Google登录](oauth/google.md) + - [√ Facebook登录](oauth/facebook.md) - [抖音登录](oauth/douyin.md) - [√ 领英登录](oauth/linkedin.md) - [微软登录](oauth/microsoft.md) diff --git a/docs/oauth/doc/media/oauth/065ebc6b.png b/docs/oauth/doc/media/oauth/065ebc6b.png new file mode 100644 index 0000000000000000000000000000000000000000..38174c3ccaef28a7b5e2f515294cd580ca27a59e Binary files /dev/null and b/docs/oauth/doc/media/oauth/065ebc6b.png differ diff --git a/docs/oauth/doc/media/oauth/0df639e4.png b/docs/oauth/doc/media/oauth/0df639e4.png new file mode 100644 index 0000000000000000000000000000000000000000..c57ba96864c756c2e9a1aeaa57f9187fa60aff92 Binary files /dev/null and b/docs/oauth/doc/media/oauth/0df639e4.png differ diff --git a/docs/oauth/doc/media/oauth/658dcf45.png b/docs/oauth/doc/media/oauth/658dcf45.png new file mode 100644 index 0000000000000000000000000000000000000000..faa5ca457cd56bf53e812e0dd971286eb48d7c7e Binary files /dev/null and b/docs/oauth/doc/media/oauth/658dcf45.png differ diff --git a/docs/oauth/doc/media/oauth/a2efba1a.png b/docs/oauth/doc/media/oauth/a2efba1a.png new file mode 100644 index 0000000000000000000000000000000000000000..6e5f7b7e0d7a62fdb3f61d9427ba21861e189c88 Binary files /dev/null and b/docs/oauth/doc/media/oauth/a2efba1a.png differ diff --git a/docs/oauth/doc/media/oauth/f3d0395a.png b/docs/oauth/doc/media/oauth/f3d0395a.png new file mode 100644 index 0000000000000000000000000000000000000000..1713782c4c858407a5edfb7618ad78379a566ddb Binary files /dev/null and b/docs/oauth/doc/media/oauth/f3d0395a.png differ diff --git a/docs/oauth/doc/media/oauth/f5bf4cd3.png b/docs/oauth/doc/media/oauth/f5bf4cd3.png new file mode 100644 index 0000000000000000000000000000000000000000..e9f2b6b60a1bd6244d5331a5a5ba2c8b7b2a2019 Binary files /dev/null and b/docs/oauth/doc/media/oauth/f5bf4cd3.png differ diff --git a/docs/oauth/facebook.md b/docs/oauth/facebook.md new file mode 100644 index 0000000000000000000000000000000000000000..c7089f41f98cf1b0bd3804526e438bc12e19ce9a --- /dev/null +++ b/docs/oauth/facebook.md @@ -0,0 +1,172 @@ +## 1. 申请应用 + +### 1.1 创建第三方授权应用 + +1. 登录 Facebook 开发者中心:[Facebook 开发者中心](https://developers.facebook.com/) +2. 进入“我的应用”管理页面 +3. 点击“添加新应用”,在弹窗中选择“用于其他用途” +![](doc/media/oauth/f5bf4cd3.png) +4. 按照提示,创建应用编号 +![](doc/media/oauth/065ebc6b.png) +5. 在应用详情页面,选择“Facebook 登录” +![](doc/media/oauth/658dcf45.png) +6. 配置“Facebook 登录”的回调地址 +![](doc/media/oauth/f3d0395a.png) +7. 获取`Client ID`和`Client Secret` +点击左侧菜单“设置 - 基本”即可看到认证密钥 +![](doc/media/oauth/a2efba1a.png) + + +记录以下三个信息:`Client ID`、`Client Secret`和`回调地址`,后面我们会用到。 + +**重要提示:“应用密钥”可保护你应用程序的安全,因此请确保其不会泄露!也不要与任何人共享你的“应用密钥”!!!** + +## 2. 集成JustAuth + +### 2.1 引入依赖 + +```xml + + me.zhyd.oauth + JustAuth + ${latest.version} + +``` + +`${latest.version}`表示当前最新的版本,可以在[这儿](https://github.com/justauth/JustAuth/releases)获取最新的版本信息。 + +### 2.2 创建Request + +```java +AuthRequest authRequest = new AuthFacebookRequest(AuthConfig.builder() + .clientId("Client ID") + .clientSecret("Client Secret") + .redirectUri("应用回调地址") + // 针对国外平台配置代理 + .httpConfig(HttpConfig.builder() + .timeout(15000) + // host 和 port 请修改为开发环境的参数 + .proxy(new Proxy(Proxy.Type.HTTP, new InetSocketAddress("127.0.0.1", 10080))) + .build()) + .build()); +``` + +### 2.3 生成授权地址 + +我们可以直接使用以下方式生成第三方平台的授权链接: +```java +String authorizeUrl = authRequest.authorize(AuthStateUtils.createState()); +``` +这个链接我们可以直接后台重定向跳转,也可以返回到前端后,前端控制跳转。前端控制的好处就是,可以将第三方的授权页嵌入到iframe中,适配网站设计。 + + +### 2.4 以上完整代码如下 + +```java +import me.zhyd.oauth.config.AuthConfig; +import me.zhyd.oauth.request.AuthFacebookRequest; +import me.zhyd.oauth.model.AuthCallback; +import me.zhyd.oauth.request.AuthRequest; +import me.zhyd.oauth.utils.AuthStateUtils; +import org.springframework.web.bind.annotation.PathVariable; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; + +import javax.servlet.http.HttpServletResponse; +import java.io.IOException; +import java.net.InetSocketAddress; +import java.net.Proxy; + + +@RestController +@RequestMapping("/oauth") +public class RestAuthController { + + @RequestMapping("/render") + public void renderAuth(HttpServletResponse response) throws IOException { + AuthRequest authRequest = getAuthRequest(); + response.sendRedirect(authRequest.authorize(AuthStateUtils.createState())); + } + + @RequestMapping("/callback") + public Object login(AuthCallback callback) { + AuthRequest authRequest = getAuthRequest(); + return authRequest.login(callback); + } + + private AuthRequest getAuthRequest() { + return new AuthFacebookRequest(AuthConfig.builder() + .clientId("Client ID") + .clientSecret("Client Secret") + .redirectUri("回调地址") + // 针对国外平台配置代理 + .httpConfig(HttpConfig.builder() + .timeout(15000) + // host 和 port 请修改为开发环境的参数 + .proxy(new Proxy(Proxy.Type.HTTP, new InetSocketAddress("127.0.0.1", 10080))) + .build()) + .build()); + } +} +``` +授权链接访问成功后会看到以下页面内容: + +![](doc/media/oauth/0df639e4.png) + +点击“连接”即可完成百度的 OAuth 登录。 + +## 3. 授权结果 + +注:数据已脱敏 + +```json +{ + "code":2000, + "data":{ + "avatar":"https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=27692792&width=400&ext=1595947235&hash=AeS4-5s-I7w4xQq6", + "gender":"UNKNOWN", + "nickname":"张亚东", + "rawUserInfo":{ + "name":"张亚东", + "id":"27692792", + "picture":{ + "data":{ + "is_silhouette":false, + "width":480, + "url":"https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=27692792&width=400&ext=1595947235&hash=AeS4-5s-I7w4xQq6", + "height":480 + } + } + }, + "source":"FACEBOOK", + "token":{ + "accessToken":"", + "expireIn":5183884, + "tokenType":"bearer" + }, + "username":"张亚东", + "uuid":"27692792" + } +} + +``` + +## 3. 推荐 + +官方推荐使用 [JustAuth-demo](https://github.com/justauth/JustAuth-demo) 示例项目进行测试。 + +使用步骤: +1. clone: [https://github.com/justauth/JustAuth-demo.git](https://github.com/justauth/JustAuth-demo.git) +2. 将上面申请的应用信息填入到`RestAuthController#getAuthRequest`方法的对应位置中: +![](doc/media/oauth/e1a40945.png) +3. 启动项目,访问 [http://localhost:8443](http://localhost:8443) +4. 选择对应的平台进行授权登录 +![](doc/media/oauth/da2bc692.png) +5. 登录完成后,可以访问[http://localhost:8443/users](http://localhost:8443/users)查看已授权的用户 +![](doc/media/oauth/dbe6bcae.png) + +注: +1. 如果直接使用 JustAuth-demo 项目进行测试,那么在配置测试应用的“回调地址”时要严格按照以下格式配置:`http://localhost:8443/oauth/callback/{平台名}` +2. 平台名参考 `JustAuthPlatformInfo` 枚举类 `names` + +