阿里云一键登录flutter-plugin

项目背景

  为了方便用户登录，需要一键登录的功能，经过调研，比较成熟的是极光公司提供的号码验证flutter插件JVerification，集成了联通、移动、电信三大运营商SDK，使用非常方便，但是这次开发却没有使用它，而是采用的阿里云号码认证服务。
  相比于阿里云，极光号码认证服务费用更高，更主要原因，公司一直是使用的阿里云的服务，处于维护方面考虑，所以一键登录功能仍然采用阿里云服务，而阿里云并没有提供flutter插件，需要自己开发个flutter plugins集成Android 以及 IOS SDK。

插件开发

1、获取SDK秘钥
首先需要去控制台下载SDK，需要开通企业认证的账号，个人账号是无法进入的，然后购买认证方案，获取App android、ios的SDK秘钥。

2、flutter插件

Android studio新建一个flutter plugins项目ali_auth，然后在pubspec.yaml引入

dependencies:
ali_auth:
    path: lib/plugins/ali_auth

ali_auth.dart注册一些调用方法

import 'dart:async';

import 'package:flutter/services.dart';

class AliAuthPlugin {
  static const MethodChannel _channel = const MethodChannel('ali_auth');

  // 初始化SDK
  static Future<dynamic> initSdk(String sk) async {
    Map<String, String> params = {'sk': sk};
    return await _channel.invokeMethod("init", params);
  }

  /// SDK判断网络环境是否支持
  static Future<bool> get checkVerifyEnable async {
    return await _channel.invokeMethod("checkVerifyEnable");
  }
  
  // 一键登录
  static Future<dynamic> get login async {
    return await _channel.invokeMethod('login');
  }
  
  // 预取号
  static Future<dynamic> get preLogin async {
    return await _channel.invokeMethod('preLogin');
  }
}

3、集成android SDK

获取android 原生的context，activity

   @Override
    public void onAttachedToEngine(@NonNull FlutterPluginBinding flutterPluginBinding) {
        channel = new MethodChannel(flutterPluginBinding.getFlutterEngine().getDartExecutor(), "ali_auth");

        mContext = flutterPluginBinding.getApplicationContext();
        channel.setMethodCallHandler(this);
    }

  @Override
    public void onAttachedToActivity(@NonNull ActivityPluginBinding activityPluginBinding) {
        activity = activityPluginBinding.getActivity();
    }

有些App可能获取到的值都是null，这与App插件注册方式有关，需要在registerWith方法内获取

    public static void registerWith(Registrar registrar) {
        mContext = registrar.context();
        activity = registrar.activity();
        final MethodChannel channel = new MethodChannel(registrar.messenger(), "ali_auth");
        channel.setMethodCallHandler(new AliAuthPlugin());
    }

下载SDK的时候，提供了demo，先把demo跑起来，如果是用android studio开发，可以在demo内阅读详细的Android SDK提供的方法，照着demo开发就好了，这里不解释。

注册一些方法，用于flutter与 android通信

 @Override
    public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
        switch (call.method) {
            case "init":
                init(call, result);
                break;
            case "preLogin":
                preLogin(call, result);
                break;
            case "login":
                login(call, result);
                break;
            case "checkVerifyEnable":
                checkVerifyEnable(call, result);
                break;
            default:
                throw new IllegalArgumentException("Unkown operation" + call.method);

        }
    }

通过获取token回调，可以获取各种SDK返回码，做相应处理即可

mTokenListener = new TokenResultListener() {
            @Override
            public void onTokenSuccess(final String ret) {
                activity.runOnUiThread(new Runnable() {

                    @Override
                    public void run() {
                        Log.e("xxxxxx", "onTokenSuccess:" + ret);
                        TokenRet tokenRet = null;

                        try {
                            tokenRet = JSON.parseObject(ret, TokenRet.class);
                        } catch (Exception e) {
                            e.printStackTrace();
                        }

                        JSONObject jsonObject = new JSONObject();

                        if (tokenRet != null && ("600024").equals(tokenRet.getCode())) {
                            jsonObject.put("returnCode", tokenRet.getCode());
                            jsonObject.put("returnMsg", "终端自检成功！");
                            jsonObject.put("returnData", "");
                        }

                        if (tokenRet != null && ("600001").equals(tokenRet.getCode())) {
                            jsonObject.put("returnCode", tokenRet.getCode());
                            jsonObject.put("returnMsg", "唤起授权页成功！");
                            jsonObject.put("returnData", "");
                        }

                        if (tokenRet != null && ("600000").equals(tokenRet.getCode())) {
                            token = tokenRet.getToken();
                            mAlicomAuthHelper.quitLoginPage();
                            jsonObject.put("returnCode", tokenRet.getCode());
                            jsonObject.put("returnMsg", "获取token成功！");
                            jsonObject.put("returnData", token);

                            if (loginResult != null) {
                                loginResult.success(jsonObject);
                            }
                        }
                    }
                });
            }

            @Override
            public void onTokenFailed(final String ret) {
                activity.runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Log.e("xxxxxx", "onTokenFailed:" + ret);

                        TokenRet tokenRet = null;

                        try {
                            tokenRet = JSON.parseObject(ret, TokenRet.class);
                        } catch (Exception e) {
                            e.printStackTrace();
                        }

                        // 处理飞行模式、获取token失败、手机欠费、运营商服务异常、IO异常、等特殊情况
                        if (tokenRet != null && !(("700000").equals(tokenRet.getCode()))) {
                            token = tokenRet.getToken();
                            JSONObject jsonObject = new JSONObject();
                            jsonObject.put("returnCode", "600002");
                            jsonObject.put("returnMsg", tokenRet.getMsg());
                            jsonObject.put("returnData", "");
                            if (loginResult != null) {
                                loginResult.success(jsonObject);
                            }
                        }
                    }
                });
            }
        };

监听授权页内的点击

 // 监听点击授权页UI
    public void listenUIClick(final MethodCall call, final MethodChannel.Result methodResult) {
        mAlicomAuthHelper.setUIClickListener(new AuthUIControlClickListener() {
            @Override
            public void onClick(String code, Context context, JSONObject jsonObj) {
                JSONObject jsonObject = new JSONObject();
                if (code == "700001") {
                    jsonObject.put("returnCode", code);
                    jsonObject.put("returnMsg", "用户切换其他登录方式");
                    jsonObject.put("returnData", "");
                    mAlicomAuthHelper.quitLoginPage();
                    methodResult.success(jsonObject);
                }
            }
        });
    }

4、集成ios SDK

需要配置ali_auth.podspec，文件的目录与配置项要对应

#
# To learn more about a Podspec see http://guides.cocoapods.org/syntax/podspec.html.
# Run `pod lib lint ali_auth.podspec' to validate before publishing.
#
Pod::Spec.new do |s|
  s.name             = 'ali_auth'
  s.version          = '0.0.1'
  s.summary          = 'A new Flutter plugin.'
  s.description      = <<-DESC
A new Flutter plugin.
                       DESC
  s.homepage         = 'http://example.com'
  s.license          = { :file => '../LICENSE' }
  s.author           = { 'Your Company' => 'email@example.com' }
  s.source           = { :path => '.' }
  s.source_files = 'Classes/**/*'
  s.public_header_files = 'Classes/**/*.h'
  s.dependency 'Flutter'
  s.platform = :ios, '8.0'
  s.vendored_frameworks = 'libs/ATAuthSDK.framework'
  # Flutter.framework does not contain a i386 slice. Only x86_64 simulators are supported.
  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES', 'VALID_ARCHS[sdk=iphonesimulator*]' => 'x86_64' }
end

插件具体源码代码见github -> ali_auth

一些总结：

1、app调整到授权页，有一个类似跳转到外部的App的过程，通过didChangeAppLifecycleState生命周期是可以监控到的，可以做一些toast的取消操作。

2、移动卡会出现闪退问题，需要在pods -> TARGETS -> ali_auth -> Build Settings -> Linking -> Other Linker Flags 里面加上 -ObjC（因为AuthSDK是通过pod依赖进去的，所有对应的target里面要加这个配置，不然移动网络会crash） ，打包的时候一定要注意，否则问题很严重。

3、IOS的SDK是通过pod依赖进去的， Runner -> Frameworks（文件）下面的 ATAuthSDK.framework是没有必要引入的，-ObjC也没必要加。


4、android 的协议页会出现黑边问题
在application的节点添加android:theme="@style/LaunchTheme"，并在styles.xml取消黑边显示。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    </style>
</resources>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,961评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,444评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,009评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,082评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,101评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,271评论 1赞 278
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,738评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,395评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,539评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,434评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,481评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,160评论 3赞 317
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,749评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,816评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,038评论 1赞 256
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,548评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,140评论 2赞 341