flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录
开发背景:我们在使用flutter开发的时候,第一版都基于安卓设备开发的,所以登录功能,也都只适配了安卓设备。第一版完成后,就由我适配在IOS设备上的登录模块,因为安卓的登录模块不是我开发的,所以修改别人的代码,还尽量不影响原先的逻辑着实让我头疼。呕心沥血完成后,赶紧做个记录。我们APP登录方式很多:QQ登录、微信登录、自动识别手机号一键登录、手机号验证码登录、apple登录除了手机号验证码登录,
flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录
开发背景:
我们在使用flutter开发的时候,第一版都基于安卓设备开发的,所以登录功能,也都只适配了安卓设备。
第一版完成后,就由我适配在IOS设备上的登录模块,因为安卓的登录模块不是我开发的,所以修改别人的代码,还尽量不影响原先的逻辑
着实让我头疼。 呕心沥血完成后,赶紧做个记录。
我们APP登录方式很多:
QQ登录、微信登录、自动识别手机号一键登录、手机号验证码登录、apple登录
除了手机号验证码登录,其他4种方式我都得重新适配。
下面是我们app的登录页面:
一、QQ登录
使用的第三方库:
tencent_kit
git地址:https://github.com/RxReader/tencent_kit
原先 使用的第三方库是:flutter_qq (https://github.com/marekchen/flutter_qq),在安卓上登录没有问题。
可是这个在IOS始终有个问题:调用登录方法,可以跳到QQ应用授权后,返回到我的APP,但是拿不到回调后的返回值。
因为始终解决不了,我就换了第三方库。而且你在github上可以看到 tencent_kit 星级比flutter_qq 高。
具体操作方法:
1、配置 Universal Links
QQ登录和微信登录都必须配置这个
具体配置方法请看:https://blog.csdn.net/zl18603543572/article/details/119966184
我理解的这个东西是:配置完这个链接后,在网页中输入链接,就可以跳转到我们APP。主要用于第三方登录授权后,从外部跳转回我们APP的时候,用到它。
配置好之后,在xcode中填到Domains选项中。(QQ登录和微信登录,都必须填这一步)
2、QQ互联官网,对APP的资料填写完整。
因为之前只填写了安卓的资料,这个时候,也要在QQ互联里配置IOS项目资料,有包名、appstoreID、以及配置好的Universal Links 等信息。
资料确认无误后,得到QQ互联上项目 APPID
3、在xcode的info里 配置一些信息
(1)在xcode -> info -> url types 中配置 tencent ,url Schemes 那一栏填:tencent+你的QQ互联里的appid(如tencent10234234)
(2)xcode->info 里添加QQ相关的白名单
4、引入第三方插件包
我这里是直接引git地址的方式 导包的。
5、完成以上配置后,就可以编写代码了。
在.dart文件里,写自己的登录逻辑。 我这里只展示 主要的方法代码
//注册QQ信息
Tencent.instance.registerApp(appId: "QQ互联里的APPID");
//跳转去登录QQ
Tencent.instance.login(
scope: <String>[TencentScope.GET_SIMPLE_USERINFO],
) ;
//监听登录成功后的回调
void _listenLogin(BaseResp resp) {
if (resp is LoginResp) {
_loginResp = resp;
final String content = 'login: ${resp.openid} - ${resp.accessToken}';
print( content);
if(resp.openid!=null && resp.accessToken!=null){
//登录成功了
//在这里就可有拿到回调的openid,去执行自己业务的操作了。
}
} else if (resp is ShareMsgResp) {
final String content = 'share: ${resp.ret} - ${resp.msg}';
}
}
final StreamSubscription<BaseResp> _respSubs =Tencent.instance.respStream().listen(_listenLogin);
自己的话:
对于我这种IOS开发纯小白的人员,感觉用flutter实现IOS上的QQ登录 ,可以说就不是在写代码,几乎全部时间都在搞各种配置和资料填写,简直蒙圈,各种ID的填写都是试探的心态,一步一坑。
比如: (1)在填写QQ互联里的资料的时候,它用到appstoreID,我就找了好久,它其实是apple开发者后台里,在你项目的信息里。(如果你开发第一版还没创建项目就没有这个ID,你必须先创建项目)
(2)在填写QQ互联的资料里,它需要填URL Scheme:
它的生成方法很奇葩:
二、微信登录
使用的第三方库
fluwx
git地址:https://github.com/OpenFlutter/fluwx
具体操作方法:
微信的配置 方法和步骤跟QQ很像。
1、配置 Universal Links
这一步配置我已经在做QQ登录的时候,已经配置过了。所以不再赘述。
1、 在微信开放平台里填写完整资料,拿到它在微信平台里的APPID
3、在xcode的info里 上配置一些信息
这里也跟QQ登录所需要配置的地方一样,但是填的内容不一样。
(1)url Types,填写weixin ,URL Schemas 填写:wx+你微信平台的APPID
(2)xcode->info 里添加微信相关的白名单
4、引入第三发插件包
5、完成以上配置后,就可以编写代码了。
核心代码如下:
//微信初始化
bool isAnroid = true;
bool isIos = true;
if(regwx){
return;
}
regwx=await registerWxApi(
appId: "你的WeixinAPPID",
doOnAndroid: isAnroid,
doOnIOS: isIos,
universalLink: "你上面第一步配置的universalLink");
//判断是否安装微信
isWeChatInstalled.then((value){
})
//授权登录
sendWeChatAuth(scope: 'snsapi_userinfo', state:"wechat_sdk_demo_test")
.then((data) {
}).catchError((e) {
});
三、apple账号登录
使用的第三方库
sign_in_with_apple
示例地址:https://pub.dev/packages/sign_in_with_apple/example
具体操作方法:
1、引入第三方插件库
2、编写代码
//核心就这一个方法,去获取登录用户信息
final credential = await SignInWithApple.getAppleIDCredential(
scopes: [
AppleIDAuthorizationScopes.email,
AppleIDAuthorizationScopes.fullName,
],
);
if (credential != null) {
//获取的信息
}
四、自动识别手机号一键登录
这个跟公司购买合作的平台有关。
我们公司是用的闪验平台
git地址:https://github.com/253CL/CLShanYan_Flutter
因为每个平台不一样,我这里就不细讲他是怎么配置了。
我想简单讲一下我的感受和认识, 它的实现方式是,又封装了一套自己的UI组件集成了自己API,然后来生成页面。
可以这么理解:flutter的存在,是flutter自己底层封装了生成安卓和iOS的代码。 而闪验 是基于flutter又封装了 自己的UI和事件,可以生成它自己的UI效果。 简单的看一下它提供的使用方法吧:下面是截的一部分图。
五、扫一扫 会分享编程教程和资料,让我们一起成长
更多推荐
所有评论(0)