flask _QQ第三方登录

最新推荐文章于 2020-12-19 07:29:53 发布

chouzong1708

最新推荐文章于 2020-12-19 07:29:53 发布

阅读量192

点赞数

文章标签： python 前端 json ViewUI

原文链接：https://my.oschina.net/u/4161332/blog/3072216

版权

flask _QQ第三方登录

采用js sdk,详情可参考腾讯开发平台

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-callback="true" data-appid="APPID" data-redirecturi="回调地址" charset="utf-8"></script>
</head>

<body>
    <a href="https://graph.qq.com/oauth2.0/authorize?client_id=101536330&response_type=token&scope=all&redirect_uri=回调地址" title="QQ登陆" class="login100-social-item bg2">
     <i class="fa fa-qq"></i>
     </a>

<script src="{{ url_for('static',filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>

<script type="text/javascript"> //加上setTimeout是为了防止qq回调时，还未初始化完成就调用qq的API setTimeout(function () { //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数，因此paras中没有参数 var paras = {}; //用js SDK调用OpenAPI QC.api("get_user_info", paras) //指定接口访问成功的接收函数，s为成功返回Response对象 .success(function (s) { //成功回调，通过s.data获取OpenAPI的返回数据 QC.Login.getMe(function (openId, accessToken) { qq_Login(s, openId, accessToken); //对应JS的qq_Login()的方法 }); }) //指定接口访问失败的接收函数，f为失败返回Response对象 .error(function (f) { //失败回调 alert("使用QQ登录失败"); }); }, 200); // 使用ajax向后台传递需要的参数 function qq_Login(s, openId, accessToken) { //后台需要的参数 var params = { 'openId': openId, 'nickName': s.data.nickname, 'avatar': s.data.figureurl_qq_1, 'sex': s.data.gender = "男" ? 1 : 0 }; $.post("{{ url_for('cms.login') }}", params, function (result) { if (result.dealFlag = '1') { alert("欢迎登陆" + s.data.nickname); // 登录成功后跳转到验证通过后的界面 window.location.href = "{{ url_for('cms.myindex') }}"; } else { alert("登陆失败"); window.location.href = "{{ url_for('cms.login') }}" } }) } </script>
</body>
</html>

后台路由应该与回调地址的路由一致

# 后台视图获取ajax传递的参数值,进行数据库的操作
data = request.form.get('nickName')
openId = request.form.get('openId')
avatar = request.form.get('avatar')
# return 渲染回调函数所在的界面html
return render_template('xxxx.html')

# 返回登录成功的标识
return json.dumps({"dealFlag ": "1"})
# 前端ajax根据接收的json数据进行跳转
 if (result.dealFlag = '1') {
    alert("欢迎登陆" + s.data.nickname);
	// 登录成功后跳转到验证通过后的界面
    window.location.href = "{{ url_for('cms.myindex') }}";
  } else {
    alert("登陆失败");
    window.location.href = "{{ url_for('cms.login') }}"
            }

前端界面的渲染

1. 可以根据获取的参数值直接传递到对应的前端页面进行渲染

2. 使用flask-login将用户信息注册到session中,在页面中直接根据{{ current_user.数据库字段名 }

后台处理

# 路由设置为回调地址路由
@cms_bp.route('/afterlogin.do', methods=['POST', 'GET'])
def login():
    form = LoginForm(request.form)
    if request.method == "POST":
        # 接收前端传递回来的数据
        data = request.form.get('nickName')
        openId = request.form.get('openId')
        avatar = request.form.get('avatar')
        if data:
            user = db.session.query(User).filter(User.username == data).first()
            if not user:
                user = User()
                user.username = data
                user.password = openId
                user.status = avatar
                db.session.add(user)
                db.session.commit()
            user = db.session.query(User).filter(User.username == data).first()
            # 将用户注册到flask_login中,可以直接使用current_user将数据渲染到前端页面
            login_user(user)
            if user:
                # 返回json数据,前端接收后进行跳转判断
                return json.dumps({"dealFlag ": "1"})

转载于:https://my.oschina.net/u/4161332/blog/3072216

chouzong1708

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flask _QQ第三方登录

flask _QQ第三方登录采用js sdk,详情可参考腾讯开发平台 <!DOCTYPE html><html lang="zh-CN"><head> <script type="text/javascript" src=...
复制链接

扫一扫