网站应用接入qq登录,实现免注册原理

以你之姓@ 2023-01-07 01:22 144阅读 0赞

去qq互联：[https://connect.qq.com/index.html][https_connect.qq.com_index.html]

创建一个wen网站类型的应用,如下过程，这个过程可能比较久

### 前提条件 ###

###### 1、网站域名已经备案成功并且网站可以访问，然后再来申请接入网站应用 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]

然后需要用到备案信息，否则就会收到邮件通知你审核不通过  
如下信息：框出来的信息需要用到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 2]  
填入网站主页即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 3]  
注意回调域，这个在后面获取access\_token需要用到，它会将用户登录后的这个字段通过url的code返回。就是下面的这一串信息是后面需要用到的

![在这里插入图片描述][20210115014931683.png]

### 假设你已经审核通过了，获取到了appid 和 appkey ###

管理页面：[https://connect.qq.com/manage.html\#/][https_connect.qq.com_manage.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 4]

### 第一步获取CODE ###

一般的是通过js另外开启一个窗口，窗口的访问地址是  
有四个字段要填，其中的第三个参数就是上面的appid  
第四个参数是回调地址，也就是当你点击qq头像登录成功后会将CODE返回到这个回调域的参数上（注意需要进行URL编码）  
第一个参数是固定的，第二个参数可以好好利用

https://graph.qq.com/oauth2.0/authorize?response_type=code
    &state=200
    &client_id=APP的ID，例如：101814107
    &redirect_uri=http%3A%2F%2Fwww.huashengshu.top%2Flogin

更详细的看文档：[https://wiki.connect.qq.com/使用authorization\_code获取access\_token][https_wiki.connect.qq.com_authorization_code_access_token]

##### 返回给redirect\_uri地址的CODE有效期是十分钟 #####

### 第二步获取AccessToken ###

appkey和id在这里需要用到对应下面的 client\_secret的值  
appid对应client\_id的值

https://graph.qq.com/oauth2.0/token?grant_type=authorization_code
    &client_id=APP_ID
    &client_secret=APP_KEY
    &redirect_uri=http%3A%2F%2Fwww.huashengshu.top%2Flogin
    &code=得到的code

返回的信息如下

access_token=0CXXXXXXXXXXXXXXXXXXXXX84&expires_in=7776000&refresh_token=9C27XXXXXXXXXXXXXXFF53E09E88

### 第三步获取openid ###

传入AccessToken即可

https://graph.qq.com/oauth2.0/me?fmt=json&access_token=0CXXXXXXXXXXXXXXXXXXXXX84

返回信息,下面的openid就是我们需要的

{ 
        "client_id": "101814107",
        "openid": "38XXXXXXXXXXXXXXXXXXXXXXX2A"
    }

### 第四步获取来自qq用户的详细信息 ###

需要：

1.  access\_token
2.  appid
3.  openid

https://graph.qq.com/user/get_user_info?
    access_token=0C4FD33E4E958D52A6B4EB2466FE4984
    &oauth_consumer_key=101814107
    &openid=3847BE0F5841C1C9ED69B7E71F24B72A

然会就会返回用户信息  
这个时候就相当于平常点击完qq登录后，我们可以利用这些信息给用户设置默认信息，  
例如：figureurl表示头像，最后面的数字表示图片宽高  
nickname：可以作为用户的初始用户名  
城市、出生年都可以作为新用户的初始信息，这里没有用户的qq号。

{ 
      "ret": 0,
      "msg": "",
      "is_lost": 0,
      "nickname": "qq名称",
      "gender": "性别",
      "gender_type": 1,
      "province": "省",
      "city": "城市",
      "year": "出生年",
      "constellation": "",
      "figureurl": "http://qzapp.qlogo.cn/qzapp/101814107/3847BE0F5841C1C9ED69B7E71F24B72A/30",
      "figureurl_1": "http://qzapp.qlogo.cn/qzapp/101814107/3847BE0F5841C1C9ED69B7E71F24B72A/50",
      "figureurl_2": "http://qzapp.qlogo.cn/qzapp/101814107/3847BE0F5841C1C9ED69B7E71F24B72A/100",
      "figureurl_qq_1": "http://thirdqq.qlogo.cn/g?b=oidb&k=7U8C6Hu6jiaAj3vSicqa56wA&s=40&t=1588659967",
      "figureurl_qq_2": "http://thirdqq.qlogo.cn/g?b=oidb&k=7U8C6Hu6jiaAj3vSicqa56wA&s=100&t=1588659967",
      "figureurl_qq": "http://thirdqq.qlogo.cn/g?b=oidb&k=7U8C6Hu6jiaAj3vSicqa56wA&s=640&t=1588659967",
      "figureurl_type": "1",
      "is_yellow_vip": "0",
      "vip": "0",
      "yellow_vip_level": "0",
      "level": "0",
      "is_yellow_year_vip": "0"
    }

[https_connect.qq.com_index.html]: https://connect.qq.com/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20221119/ba34aa76939542e5a78f4faccda4d88e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 1]: /images/20221119/4af1738b50e94fbfb7bf8a1a298058ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 2]: /images/20221119/4cecacf003c44f5eb11f7aa09bc87909.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 3]: /images/20221119/16017d13c3164338bdb669ab47a86db3.png
[20210115014931683.png]: /images/20221119/d8a78f411e114d1392c8120b850a580c.png
[https_connect.qq.com_manage.html]: https://connect.qq.com/manage.html#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 4]: /images/20221119/f82ae8e229484d9799a6644167007c51.png
[https_wiki.connect.qq.com_authorization_code_access_token]: https://wiki.connect.qq.com/%E4%BD%BF%E7%94%A8authorization_code%E8%8E%B7%E5%8F%96access_token