flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录

开发背景：我们在使用flutter开发的时候，第一版都基于安卓设备开发的，所以登录功能，也都只适配了安卓设备。第一版完成后，就由我适配在IOS设备上的登录模块，因为安卓的登录模块不是我开发的，所以修改别人的代码，还尽量不影响原先的逻辑着实让我头疼。呕心沥血完成后，赶紧做个记录。我们APP登录方式很多：QQ登录、微信登录、自动识别手机号一键登录、手机号验证码登录、apple登录除了手机号验证码登录，

Pang Yu

7803人浏览 · 2021-11-11 21:28:27

Pang Yu · 2021-11-11 21:28:27 发布

flutter在IOS上的登录实现——QQ登录、微信登录、自动识别手机号一键登录、apple登录

一、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效果。简单的看一下它提供的使用方法吧：下面是截的一部分图。

在这里插入图片描述