web三方绑定的那些坑

2022-10-26 13:54:51 浏览数 (1)

三方绑定,就是将第三方账号(如qq,微信,微博)等绑定到自己的账号系统

设计思路

  1. 创建一个user_bind表,用来存储第三方账号的id,三方账号类型,和自己账号的id
  2. 通过查user_bind表来确定三方账号有没有被绑定过,进而完成绑定或者解绑的功能
  3. 绑定功能:
    • 存储三方id,三方类型,和自己账号id
    • 到自己的user_info(用户信息表)中查询相关数据
    • 存储到session中
  4. 解绑功能:
    • 如果在user_bind(绑定表)中有三方id记录,说明该账号已被绑定过
    • 删除该条记录
  5. 绑定其实就是调用第三方的授权系统,校验第三方账号,获得用户信息授权(对第三方平台的依赖其实和第三方登录逻辑一样)

关键代码(用QQ举例)

  • 这不是直接拿来复制粘贴就能用的代码
  • 只是提供一下参考思路

html

代码语言:javascript复制
                <li class="bind-item">
                    <label>QQ</label>
                    {%if !empty($qq) && $qq==1%}
                    <b class="no-bind">已绑定</b>
                    <a class="bind-btn js_unbind_qq">
                        取消绑定
                    </a>
                    {%else%}
                    <b class="no-bind">未绑定</b>
                    <a href="/auth/qq/?type=bind" class="bind-btn">
                        绑定账号
                    </a>
                    {%/if%}
                </li>

调取三方授权的php

代码语言:javascript复制
class AuthController extends BaseController
{
    public function qqAction()
    {
        $type = $this->_request->getQuery('type', '', 'trim');

        Yaf_Loader::import('ApiLogin/QQ.php');
        $QQ = new QQ($type);
        $url = $QQ->getRequestCodeURL();
        $this->redirect($url);
    }
}

绑定的php逻辑

代码语言:javascript复制
    public function qqAction()
    {
        $code = $this->_request->getQuery('code');
        Yaf_Loader::import('ApiLogin/QQ.php');
        $qq = new QQ("bind");
        $token = $qq->getAccessToken($code);
        $bind_id = $qq->getOpenId($token);
        $result = Service_User_InfoModel::checkIsFirst(TYPE_QQ, $bind_id);
        if (empty($result)) {
            $this->renderLogin($this->_loginUserId, TYPE_QQ, $bind_id);
        } else {
            $this->redirect("/info/bind/?msg=" . "绑定失败,该账号已被其他实车用户绑定");
        }

    }

绑定的js(基于seajs框架)

代码语言:javascript复制
define('module/ucenter/bind_account.js', ['libs/form'], function (require, exports, module) {
    var form = require('libs/form.js');

    var _dom = {
        btn_qq: $('.js_unbind_qq'),
    }

    var _url = {
        post_submit: '/info/unbind/',
        success_url: '/info/bind/',
    }

    // 绑定类型 1:微信 2:QQ 3:微博
    _dom.btn_weixin.on('click', function () {
        var data = {
            type: 1,
        };
        postData(data);
    });

    function postData(data) {
        requestUrl(_url.post_submit, data, function () {
            location.href = _url.success_url;
        });
    }

    function init() {
        if (msg != 'empty') {
            $.dialog.successTips(msg);
        }
    }

    init();

});

0 人点赞