完成开发者认证
使用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);
}
