网站接入QQ登录-腾讯开放平台

文章正文还需 2 分钟

完成开发者认证

使用qq登录完成实名认证，点击创建应用

创建网站应用

填写相关信息

回调域填写很重要如果填写错误扫码会出现 100010
【QQ登录】登录常见错误码

前端

这是目前网站接入的qq登录,
注意点
1.其中关于涉及到appkey的接口的貌似通过客户端提交不过去，我猜是因为，腾讯觉的appkey放在前端去调用不安全，得采用后台去调用。
2.获取access_token的时候前端可以通过window.location.href = '腾讯获取access_token的url地址',腾讯会把access_token返回到html上，但是不好去获取，当然也可以去用正则匹配到，但我觉的这样获取到的姿势是不是不对,我目前的做法把获取到access_token放到了服务端去获取，然后返回到客户端。

javascript 复制代码

// qq登录完整代码
import {token,qquserinfo} from '@servers/qq';
import {qqlogin} from '@servers/login/login.js';
import jsonp from 'jsonp';
const app_cinfig = {
    appid: ******,
    appkey: '*********************',
    redirecturi: 'https://www.vipbic.com/qq.html',
    state: '******',
    url : 'https://graph.qq.com/oauth2.0',
    scope:'******',
    client_id:'',
    openid:'',
}
let home = '/index.html'
let code = window.globalSelf.utils.getQueryString('code');
// code 等于空,说明第一次进来
if(!code){
    let url = app_cinfig.url + '/authorize?response_type=code&client_id='+app_cinfig.appid+'&redirect_uri='+app_cinfig.redirecturi+'&state='+app_cinfig.state+'&scope='+app_cinfig.scope;
    window.location.href = url // qq会携带code返回到域名上 类似这样 https://www.vipbic.com/qq.html?code=3FC4EDAEADC5668A549317C8CDEE946E
}else{
    token({code})
    .then((res)=>{
        // jsonp 是git上一个开源库，做跨域请求非常方便
        jsonp(app_cinfig.url + '/me?access_token='+res, { name: 'callback' }, function (err, data) {
            if (err) throw err;
            let {client_id,openid} = data;
            app_cinfig.client_id = client_id;
            app_cinfig.openid = openid;
            qquserinfo({token:res,openid})
            .then((res)=>{
                let data = JSON.parse(res);
                console.log(data) //打印出qq个人信息
            })
        });
    })
    .catch(()=>{
        window.location.href = home
    })
}

后端

服务端在获取时候到没有遇到什么多大问题，正常发起请求网络请求，都一切正常

php 复制代码

 //后台qq登录
 public function __construct(Request $request = null)
    {
        $this->url = config('qq.url');
        $this->appid = config('qq.appid');
        $this->redirecturi = config('qq.redirecturi');
        $this->appkey = config('qq.appkey');
        $this->state = config('qq.state');
        parent::__construct($request);
    }

    // 发起url访问
    protected function url_get($url){
        return file_get_contents($url, false);
    }

    // 获取 access_token
    public function token(){
        $code = input('code');
        $url = $this->url.'/token?grant_type=authorization_code&client_id='.$this->appid.'&client_secret='.$this->appkey.'&code='.$code.'&state='.$this->state.'&redirect_uri='.$this->redirecturi;
        $res = $this->url_get($url);
        $data = (explode('=', (explode('&',$res))[0]))[1]; // &分割字符串成数组
        return keyShow($data);
    }

    // 获取qq用户信息
    public function qquserinfo(){
        $token = input('token');
        $openid = input('openid');
        $url = 'https://graph.qq.com/user/get_user_info?access_token='.$token.'&oauth_consumer_key='.$this->appid.'&openid='.$openid;
        $data = $this->url_get($url);
        return keyShow($data);
    }