網站接入QQ登陸-騰訊開放平臺

完成開發者認證

申請騰訊開放平臺

使用qq登陸完成實名認證，點擊建立應用

建立網站應用

填寫相關信息

回調域填寫很重要若是填寫錯誤掃碼會出現 100010
【QQ登陸】登陸常見錯誤碼

前端

這是目前網站接入的qq登陸,
注意點

1.其中關於涉及到**appkey**的接口的貌似經過客戶端提交不過去，我猜是由於，騰訊覺的**appkey**放在前端去調用不安全，得采用後臺去調用。
2.獲取**access_token**的時候前端能夠經過**window.location.href** = '騰訊獲取access_token的url地址',騰訊會把**access_token**返回到html上，可是很差去獲取，固然也能夠去用正則匹配到，但我覺的這樣獲取到的姿式是否是不對,我目前的作法把獲取到**access_token**放到了服務端去獲取，而後返回到客戶端。

// 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
    })
}

後端

服務端在獲取時候到沒有遇到什麼多大問題，正常發起請求網絡請求，都一切正常

//後臺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);
    }