欢迎来到友儿の博客 
以qq调用第三方api登录为例子来说明
- 前端点击事件
- 根据app_id拼接授权地址并且跳转至授权页面
- 根据填写和请求的一致回调地址获取code和state
- 把code和state传递给第三方接口返回登录数据存储并赋值给页面
- 关闭浏览器窗口
- 检测刷新页面
- 显示登陆数据
前端点击授权窗口代码
<div onclick="toLogin();"></div>
<script>
function toLogin()
{
//以下为按钮点击事件的逻辑。注意这里要重新打开窗口
//否则后面跳转到QQ登录，授权页面时会直接缩小当前浏览器的窗口，而不是打开新窗口
var mywin = window.open("https://xxxx.com/api/v1/qqlogin","TencentLogin", "width=650,height=500,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1,top=400,left=400");
var loop = setInterval(function() {
if(mywin.closed) {
clearInterval(loop);
parent.location.reload();
}
},300);
}
</script>后端处理代码
public function qqlogin()
{
$app_id = "xxxxxx";
//【成功授权】后的回调地址，即此地址在腾讯的信息中有储存
$my_url = "https://xxxx.com/api/v1/qqcallback";
//state参数用于防止CSRF攻击，成功授权后回调时会原样带回
$_SESSION['qq_state'] = md5(uniqid(rand(), TRUE));
//拼接URL
$dialog_url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" . $app_id . "&redirect_uri=" . urlencode($my_url) . "&state=" . $_SESSION['qq_state'];
echo("<script>top.location.href='" . $dialog_url . "'</script>");
}
public function qqcallback()
{
if (isset($_GET['code']) && isset($_GET['state'])) {
$url = 'http://xxxxx.com/api/v2/login';
$data = [
'third_code' => $_GET['code'],
'state' => $_GET['state'],
//其他参数
];
$res = curl($url,'post', $data);
$data = json_decode($res, true);
if (isset($data['code']) && $data['code'] == 200) {
setcookie('user_info', json_encode($data['data']), 0, '/', '.xxxx.com');
echo("<script>window.opener = null; window.open('', '_self'); window.close();</script>");
}
}
}
4 comments
不错
棒
谢谢
好