# 第三方社交账号配置 ## 第三方社交账号登录配置 * 只需修改配置文件即可 ~~~ # 第三方社交登录配置 social: # 前端回调登录地址 callbackFeUrl: http://127.0.0.1:9999/login # 前端绑定账号回调地址 callbackFeRelateUrl: http:/127.0.0.1:9999/relate # github github: clientId: 你的clientId clientSecret: 你的clientSecret callbackUrl: http://127.0.0.1:8888/Tceon-PERFOOT /social/github/callback # qq qq: appId: 你的appId appKey: 你的appKey callbackUrl: http://127.0.0.1:8888/Tceon-PERFOOT /social/qq/callback # weibo weibo: appKey: 你的appKey appSecret: 你的appSecret callbackUrl: http://127.0.0.1:8888/Tceon-PERFOOT /social/weibo/callback # wechat wechat: appId: 你的appId appSecret: 你的appSecret callbackUrl: http://127.0.0.1:8888/Tceon-PERFOOT /social/wechat/callback # dingding dingding: # 扫码登录应用 appId: 你的appId appSecret: 你的appSecret callbackUrl: http://127.0.0.1:8888/Tceon-PERFOOT /social/dingding/callback # 企业微信 workwechat: appId: 企业的CorpID agentId: 应用ID appSecret: 应用Secret callbackUrl: http://127.0.0.1:8888/Tceon-PERFOOT /social/workwechat/callback ~~~ * 相关应用id和key去各社交网站开放平台申请即可，除微信收取300认证费用，其他无需审核通过即可开始开发，本地测试时主页和回调地址填上面地址即可，上线后更换`127.0.0.1`或`localhost`为你部署的域名 ## 申请示例 * 下面简单带大家申请配置填写，关键是回调链接的填写 * Github * 申请地址 [https://github.com/settings/applications/new](https://github.com/settings/applications/new) * QQ * 申请地址 [https://connect.qq.com/manage.html#/appcreate/web](https://connect.qq.com/manage.html#/appcreate/web) * 微博 * 申请地址 [http://open.weibo.com/connect](http://open.weibo.com/connect) * 基本信息应用主页可填`http://127.0.0.1:9999/login` * 微信 * 申请地址 [https://open.weixin.qq.com/cgi-bin/index](https://open.weixin.qq.com/cgi-bin/index) * 基本信息应用主页可填`http://127.0.0.1:9999/login` * 注意回调只填写域名即可，如`qq.com`，非完整链接路径  * 钉钉 * 注册账号登录管理后台 [https://oa.dingtalk.com/#/login](https://oa.dingtalk.com/#/login) * 进入钉钉开放平台顶部“应用开发”-左侧“移动应用接入”-“登录”创建扫码登录应用授权 [https://open-dev.dingtalk.com/#/loginMan](https://open-dev.dingtalk.com/#/loginMan)  * 企业微信 * 注册企业微信登录后台进入“应用管理-应用”页面，在“自建应用”中创建新的应用 [https://work.weixin.qq.com/wework\_admin/frame#apps](https://work.weixin.qq.com/wework_admin/frame#apps) * 进入新创建的应用，点击底部“企业微信授权登录"进入设置  * 在“Web网页”一栏设置授权回调域  * 进入应用详情可获得agentId和appSecrect；进入“我的企业-企业信息”页面最下方可获得企业ID（appId） [https://work.weixin.qq.com/wework\_admin/frame#profile](https://work.weixin.qq.com/wework_admin/frame#profile) ## 扩展开发 > 接入其他第三方社交账号请参考已有接入代码，如`socail`模块下的`GithubController`等，大致流程如下： * 参考`GithubController`编写`Controller` * 配置文件添加相应配置（如appId、appSecret等），修改Controller中对应配置 * 修改Controller中常量`STATE`（state前缀）和`TYPE`（类型） * 修改相应授权接口地址完成`login()`方法 * 根据相应官方文档实现接口开发完成`callback()`方法 * 根据所需参数拼接返回授权地址 * 完成相应回调接口，通过令牌获取授权用户信息并做持久化存储等 * 修改`RelateController` * `relate()`方法中添加你的社交平台名称判断 * 修改`SocialController`与`RelateUserInfo` * `getRelateUserInfo`方法中添加获取你的社交平台用户信息回显 * 前端 * 修改前端`socialManage.vue`增添`TabPane`如`<TabPane label="企业微信" name="5"></TabPane>` * 修改登录页面`login.vue`和`own-space.vue`添加你的社交平台实现相应业务逻辑