admin管理员组文章数量:1656454
目前flutter插件库里面的QQ登录并不支持web端，所以这一块的代码必须自己实现
首先需要在腾讯开放平台注册一个网页应用，然后拿到appid
一、引入QQ登录sdk
web工程下面的index.html中添加以下代码
<body>
...
<script src="https://connect.qq/qc_jssdk.js" data-appid="获取到的QQappid"
data-redirecturi="登录成功后的回调地址"></script>
...
</body>二、添加登录桥接代码
1.dart代码方面
//解决编译冲突写法
import 'package:test/web/js.dart'
// ignore: uri_does_not_exist
if (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;
@override
void 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登录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729738470a1211638.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论