web网站java实现QQ第三方登录

秒速五厘米 2022-04-14 06:06 448阅读 0赞

### 最近一段时间实现了微博微信qq的第三方登录功能，现在写出来与大家分享一下 ###

# QQ #

首先贴出qq官方文档

[http://wiki.connect.qq.com/%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c\_oauth2-0][http_wiki.connect.qq.com_e5_87_86_e5_a4_87_e5_b7_a5_e4_bd_9c_oauth2-0]

**第一步当然是获取appid和secret，这点就不赘述了**

**第二步，qq给出了自己的js sdk，可以直接调用js获取用户基本信息。**

文档：[http://wiki.connect.qq.com/sdk%e4%b8%8b%e8%bd%bd][http_wiki.connect.qq.com_sdk_e4_b8_8b_e8_bd_bd]

**而你如果使用了这种操作方式，就会有一定的局限性（见下图）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxOTI5OTMx_size_16_color_FFFFFF_t_70][]

**红框内的意思是一旦给页面上的某个元素绑定了事件之后，当你点击该元素，就会元素后面出现一个按钮，再次点击才会跳转到qq登录授权页面。然后才能进行之后的步骤，而这一极大的导致了用户的体验（包括点击两次和页面多出按钮）**

鉴于这种方式可能官方都觉得不太靠谱，下面又给出了另一种方式，见下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxOTI5OTMx_size_16_color_FFFFFF_t_70 1][]

**该方法确实可以使用户在点击按钮时直接跳到登录授权页面，并且不限于id（当同一页面内有多个id需要绑定）。但是该方法也有缺点，那就是使用这个方式会弹出新页面，或许你会说无所谓，但是在某些极端情况下，如下图**

![20181125124325641.png][]

当用户想要绑定qq时，点击弹出新页面，用户授权了还好说，按钮已经选上了，用户没有授权的话，关闭授权页面，这里已经勾选了，会给用户带来歧义。

如果你还是选择这种方式登录，那么文档下面的所有api你都可以使用了（见下图）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxOTI5OTMx_size_16_color_FFFFFF_t_70 2][]

qq解除授权可以使用signOUt；

回调页面检测是否登录使用check

check完之后使用getMe获取个人信息；

鉴于业务需求我放弃了js sdk，采取了前端获取code，后台获取其余信息，js只是调用授权登录，代码如下

var url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" + qqAppId + "&redirect_uri=" + encodeURIComponent(qqRedirectURI) + "&state=1"
    window.location.href=url;

采用直接访问url 使用时将qqAppId和qqRedirectURI换为自己的就行了，至于后面的state是回调页面的参数，可以做一些小操作

然后用户授权成功后，会跳回回调地址页，返回code和state。如果授权失败，不会返回code。

之后就是把code传到后台获取token和后面的等等

具体可以参考[https://blog.csdn.net/a992970569/article/details/82107899][https_blog.csdn.net_a992970569_article_details_82107899]，里面有很详细的接口详细说明。

**总的来说就是授权登录获取到code，根据code获取Access Token，根据token就可以调接口获取openId（用户唯一标识）和用户信息了**

**另外，web网站在手机上打开会直接调用手机qq登录（很方便，不像微信）**

**以上图片都在qq官方文档中有详细说明；**

**移步**[http://wiki.connect.qq.com/%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c\_oauth2-0][http_wiki.connect.qq.com_e5_87_86_e5_a4_87_e5_b7_a5_e4_bd_9c_oauth2-0]

**关于web网站的分享功能，在除了微信和qq内部，我们可以使用将当前页面url生成二维码提示用户扫码分享；在微信qq内部可以提示点击右上角分享，如何判断对应环境可以查看我的另外一篇文章-->[链接][Link 1]**

[http_wiki.connect.qq.com_e5_87_86_e5_a4_87_e5_b7_a5_e4_bd_9c_oauth2-0]: http://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0
[http_wiki.connect.qq.com_sdk_e4_b8_8b_e8_bd_bd]: http://wiki.connect.qq.com/sdk%E4%B8%8B%E8%BD%BD
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxOTI5OTMx_size_16_color_FFFFFF_t_70]: /images/20220414/39b7aa91b13e4497af8e916d5cb1e626.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxOTI5OTMx_size_16_color_FFFFFF_t_70 1]: /images/20220414/85f23712375149f19123fd173fe8ca3a.png
[20181125124325641.png]: /images/20220414/86810cd4f8d7406ea6c503b80ea87dd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxOTI5OTMx_size_16_color_FFFFFF_t_70 2]: /images/20220414/574d4401ecb545b6ab2a06f7cf99602c.png
[https_blog.csdn.net_a992970569_article_details_82107899]: https://blog.csdn.net/a992970569/article/details/82107899
[Link 1]: https://blog.csdn.net/qq_31929931/article/details/84488121