flutter Web QQ登录

目前flutter插件库里面的QQ登录并不支持web端，所以这一块的代码必须自己实现

首先需要在腾讯开放平台注册一个网页应用，然后拿到appid

一、引入QQ登录sdk

web工程下面的index.html中添加以下代码

<body>
...
<script src="https://connect.qq.com/qc_jssdk.js" data-appid="获取到的QQappid"data-redirecturi="登录成功后的回调地址"></script>
...
</body>

二、添加登录桥接代码

1.dart代码方面

//解决编译冲突写法
import 'package:test/web/js.dart'
// ignore: uri_does_not_existif (dart.library.html) 'dart:js' as js;
import 'package:tencent_kit/tencent_kit.dart';openQQ() async {if (AppConfig.isWeb) {//网页端登录js.context.callMethod("tencentLogin");} else {//原生端登录// MyUtils.showToast('QQ登录');var result = await Tencent.instance.isQQInstalled();if (!result) {MyUtils.showToast("无法打开QQ 请检查是否安装了QQ");return;}Tencent.instance.login(scope: <String>[TencentScope.GET_SIMPLE_USERINFO,TencentScope.GET_USER_INFO],);}}

js.dart文件


WebContext context = WebContext();class WebContext  {// void callMethod(String str) {}void callMethod(String str,[List? args]) {}operator [](Object? key) {// TODO: implement []throw UnimplementedError();}void operator []=(key, value) {// TODO: implement []=}}

2.web中index.html文件中添加js方法给dart调用


<body>
...
<script type="text/javascript">
function tencentLogin() {QC.Login.showPopup({appId: "网页应用的appid",redirectURI: "回调地址", //登录成功后会自动跳往该地址});
};</script></body>

写完这里就可以成功调起QQ登录了

三、处理登录成功后的回调，在回调页面的initState里面添加如下代码

//这里需要在pubspec.yaml中添加   universal_html: ^2.0.8 跨平台html库
import 'package:universal_html/html.dart' as html;@overridevoid initState() {super.initState();if (AppConfig.isWeb && html.window.location.href.contains("access_token")) {String paramsStr = html.window.location.href.substring(html.window.location.href.indexOf("?#") + 2);List<String> params = paramsStr.split("&");Map<String, String> paramsMap = {};for (String value in params) {List<String> values = value.split("=");paramsMap[values[0]] = values[1];}}//这里也可以用Get这个库获取parameters来拉取参数值 }

写完这里后就可以获取到access_token和openid，大功告成。

另外建议使用openid去获取UnionID来绑定用户，以便多端的QQ登录保持一致，获取UnionID和userinfo的代码建议后端来提供，h5端调用腾讯的api会有跨域问题

flutter Web QQ登录相关推荐

flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录
flutter在IOS上的登录实现--QQ登录.微信登录.自动识别手机号一键登录.apple登录一.QQ登录使用的第三方库: 具体操作方法: 1.配置 Universal Links 2.QQ互联 ...
html输入QQ自动获取QQ头像,我在开发web版使用第三方QQ登录网站的时候，发现引入的QQ头像登录（如下图）很戳，我想问一下这个样式怎么调？...
2. pageEncoding="utf-8"%> /p> "http://www.w3.org/TR/html4/loose.dtd"> 美 ...
QQ登录协议php,QQ登录 - web版
[![](http://static.phpgrace.com/statics/images/downcode.png)](http://www.phpgrace.com/tools/download ...
django web网站实现第三方QQ登录
第一步:成为开发者成为QQ互联的开发者,审核通过才可实现:审核通过后要创建应用,即获取本项目对应与QQ互联的应用ID. QQ登录开发文档:http://wiki.connect.qq.com/准备工 ...
java判断用户是否在某一个区域登录_Java实现QQ登录和微博第三方登录
来源:http://www.cnblogs.com/liuxianan转自公众号:Java后端 1. 前言个人网站最近增加了评论功能,为了方便用户不用注册就可以评论,对接了 QQ 和微博这 2 大常 ...
如何使用自定义端口运行 Flutter Web
如何使用自定义端口运行 Flutter Web 默认情况下,每次在localhost上启动 Flutter web 时,它都会有一个不同的端口.但是,在某些情况下,您需要设置一个固定端口(例如,当您想 ...
python实现qq登录_在django中实现QQ登录
在服务器端做qq登录的流程: 1.放置QQ登录按钮,这个去QQ的网站上下,把这个按钮的连接指向 https://graph.qq.com/oauth2.0/authorize?response_typ ...
java加按钮_如何从零开始对接第三方登录(Java版)：QQ登录和微博登录
阅读本文约需要8分钟大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了HashMap和TreeMap的知识,今天跟大家分享下对 ...
java仿qq登录界面设计,Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEcl ...

flutter Web QQ登录

flutter Web QQ登录相关推荐

最新文章

热门文章