Complete developer certification

Apply for Tencent open platform

Use qq login to complete the realName authentication, click to create application

Create site app

Fill in relevant information

It is very important to fill in the callback field. If you fill in the wrong code, you will see 100010
[QQ login] login common error code

Front end

This is the qq login of the current website access,
Attention points

1. It seems that the interface involving * * appkey * * can't be submitted through the client. I guess it's because it's not safe for Tencent's * * appkey * * to be called in the front end, so it has to be called in the background.
2. When obtaining * * access UU token * *, the front end can use * * window.location.href * * = 'Tencent gets the url address of access UU token'. Tencent will return * * access UU token * * to html, but it's not easy to get it. Of course, it can also use regular matching, but I don't think it's right to get it. My current practice puts the * * access UU token * * to the server to get it Fetch and return to the client.

// qq login complete code
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 is empty, indicating the first time in
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 will carry the code back to the domain name, like this https://www.vipbic.com/qq.html?code=3FC4EDAEADC5668A549317C8CDEE946E
}else{
    token({code})
    .then((res)=>{
        // jsonp is an open source library on git, which is very convenient for cross domain requests
        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) //Print out qq personal information
            })
        });
    })
    .catch(()=>{
        window.location.href = home
    })
}

back-end

The server does not encounter any major problems when obtaining the data. It normally requests the network, and everything is normal

 //Background qq login
 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);
    }

    // Initiate url access
    protected function url_get($url){
        return file_get_contents($url, false);
    }

    // Get 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]; // &Split string into array
        return keyShow($data);
    }

    // Get qq user information
    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);
    }