Oauth2.0 QQ&微信&微博实现第三方登陆

Posted 2020-10-20 梦飞扬~

一、写在前面

       目前对于大多数的App或Web网站都支持有第三方登陆这个功能，用户可使用 QQ/ 微信/ 微博 帐号快速登录你的网站，降低注册门槛，为你的网站带来海量新用户。最近在新项目上刚好用到了，在自己做的同时也将其实现过程记录下来，方便与大家一同交流学习！   （2018-01-18 21：23 更新）

 

二、准备工作

1. 各大平台开发者注册基本信息填写

• 开发者名称
• 所在地区（身份证地址）
• 详细地址（身份证地址）
• 邮政编码
• 手机号码
• 电子邮箱
• 聊天工具（QQ）
• 身份证号码
• 身份证正面照片（JPG/PNG）
• 本人手持身份证照（清晰，JPG，1M以内）
• 紧急联系人
• 紧急联系人电话

2. 各大开放平台网站信息填写

• 网站应用名称
• 应用分类：网页应用
• 网站简介（不超过80字）
• 网站英文简介（不超过80字）
• 网站域名（微博开发平台仅支持后缀为 .com 和 .cn 的安全域名，域名需要备案）
• 网站回调域（用户授权登陆成功后的跳转链接）
• 域名提供方：阿里云(万网)/腾讯云/百度云或其他
• 域名备案号
• （微信）网站信息登记表扫描件：《Website_Information_form.doc》，先下载填写打印，并盖章后上传扫描件。（支持JPG、PNG、BMP格式，不超过2MB）
  
• 腾讯QQ互联开发平台网站图标：64x64(px)、100x100(px)
• 新浪微博开发平台网站图标：16*16(px)、80*80(px)、120*120(px)（2M以内，支持JPG、PNG）
• 新浪微博开发平台网站应用介绍图片：450*300(px)（这里需要上传3张，1M以内，支持JPG、PNG）
• 微信开发平台网站图标：28*28（px，仅支持PNG格式，大小不超过300KB）、108*108（px，仅支持PNG格式，大小不超过300KB）
• 在此献上个人整理的《QQ/微信/微博开发平台所需提交材料》

 

三、了解 Oauth2.0 授权机制 

要了解 Oauth2.0 在各大平台的授权机制，一个很好的方法就是查看各平台自己提供的API说明。

例如：  

• 微博 WIKI Oauth2.0 授权机制说明：《微博 API 授权机制说明》
• 腾讯QQ互联WIKI Oauth2.0介绍：《QQ 互联 Oauth2.0介绍》
  

 

四、开发者注册

首先到 QQ、微信、微博各开放平台注册账户并且登陆，为获取 AppKey 和 AppSecret 做准备，各开放平台接入操作步骤如下：

1. 腾讯QQ开放平台：https://connect.qq.com/

• 登陆到QQ互联开放平台，在这里你可以根据个人需要去选择 移动应用/网站应用 填写基本信息，等待审核（一般在36小时内出结果）      

1. 填写个人基本信息
    开发者类型： 个人开发者/公司
    名称： 
    联系地址： 
    手机号码：
    电子邮箱： 
    身份证号码： 
    上传个人身份证照： （2MB以内，JPG/PNG，双手持身份证正面照，身份证信息清晰可见）

View Code

• 开发者注册完成并通过审核后，点击 “应用管理” 按钮创建应用并填写相关信息 >>参考
• SDK 下载

2. 填写网站信息
    网站名称： 
    网站类别： 
    网站简介： （80字以内）
    网站图标： （64x64px、100x100px各一张，PNG/JPG，2M以内）
    网站域名： 
    网站回调域： （见文档）
    网站域名提供商： 
    网站备案号： 

View Code

• 等待审核通过后，参见 网站开发流程 一步步实施即可。

 

2. 微信开放平台：https://open.weixin.qq.com/

• 登陆到微信·开放平台，填写个人基本信息并完成相关认证
• 点击管理中心>>网站应用>>创建网站应用
• 接着是填写网站应用信息 

　　微信开放平台由于网站信息登记表扫描件没有盖章，审核未通过，暂且搁置。

 

3. 新浪微博开放平台：http://open.weibo.com/

• 登陆到微博·开放平台，点击微连接>>网站接入注册成为开发者，邮箱验证。
• 身份认证（真实姓名、身份证号码、上传身份证照片、手机验证等）

    由于我的域名后缀是 .club 的，微博开放平台不支持（仅支持 .com 和 .cn 的），所以就没有继续下去了。

这里说一下，如域名后缀符合申请，那么得先在你的应用程序中实现微博点赞、分享、关注等按钮（微博组件），

附上链接：http://open.weibo.com/widget/like.php