A New Flutter Plugin for Quichlogin

号码认证

直连三大运营商,一步校验手机号与当前 SIM 卡号一致性。优化注册/登录/支付等场景验证流程

平台支持(兼容性)

AndroidiOS
适用版本区间:4.4以上适用版本区间:9 - 14

环境准备

CocoaPods安装教程

资源引入/集成

在 pubspec.yaml 中添加

dependencies:
    quickpass_yidun_flutter: ^1.1.6

项目开发配置

1.0.3 版本之前需要在 flutter 工程对应的 android/app/build.gradle 文件的 android 域中添加

repositories {
    flatDir {
        dirs project(':quickpass_yidun_flutter').file('libs')
    }
}

release 包需要添加混淆规则

-dontwarn com.cmic.sso.sdk.**
-keep class com.cmic.sso.**{*;}
-dontwarn com.sdk.**
-keep class com.sdk.** { *;}
-keep class cn.com.chinatelecom.account.**{*;}
-keep public class * extends android.view.View
-keep class com.netease.nis.quicklogin.entity.**{*;}
-keep class com.netease.nis.quicklogin.listener.**{*;}
-keep class com.netease.nis.quicklogin.QuickLogin{
    public <methods>;
    public <fields>;
}
-keep class com.netease.nis.quicklogin.helper.UnifyUiConfig{*;}
-keep class com.netease.nis.quicklogin.helper.UnifyUiConfig$Builder{
     public <methods>;
     public <fields>;
 }
-keep class com.netease.nis.quicklogin.utils.LoginUiHelper$CustomViewListener{
     public <methods>;
     public <fields>;
}
-keep class com.netease.nis.basesdk.**{
    public *;
    protected *;
}

调用示例

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final QuickpassFlutterPlugin quickLoginPlugin = new QuickpassFlutterPlugin();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('易盾一键登录'),
        ),
        body: _buildContent(),
      ),
    );
  }

  Widget _buildContent() {
    return Center(
      widthFactor: 2,
      child: new Column(
        children: <Widget>[
          new Container(
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new FlatButton(
                    onPressed: () {
                      isInitSuccess();
                    },
                    child: Text("初始化"))
              ],
            ),
          ),
          new Container(
            child: SizedBox(
              child: new FlatButton(
                  onPressed: () {
                    preLogin();
                  },
                  child: Text("预取号")),
              width: double.infinity,
            ),
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
          ),
          new Container(
            child: SizedBox(
              child: new FlatButton(
                onPressed: () {
                  quickLogin();
                },
                child: Text("调起授权页"),
              ),
              width: double.infinity,
            ),
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
          ),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      ),
    );
  }

  /// sdk 初始化是否完成
  void isInitSuccess() {
    quickLoginPlugin.init("易盾业务id", 4).then((map) {
      bool result = map['success'];
    });
  }

  /// 预取号
  void preLogin() async {
    Map map = await quickLoginPlugin.preFetchNumber();
    if (map['success'] == true) {
      var ydToken = map['token'];
    } else {
      var ydToken = map['token'];
      var errorMsg = map['errorMsg'];
    }
  }

  void quickLogin() {
    var configMap;
    var param = "";
    String file = "";
    if (Platform.isIOS) {
      file = "asserts/ios-light-config.json";
    } else if (Platform.isAndroid) {
      file = "asserts/android-light-config.json";
    }
    rootBundle.loadString(file).then((value) async {
      configMap = {"uiConfig": json.decode(value)};
      quickLoginPlugin.setUiConfig(configMap);
      Map map = await quickLoginPlugin.onePassLogin();
      if (map["success"]) {
        var accessToken = map["accessToken"];
        quickLoginPlugin.closeLoginAuthView();
      } else {
        var errorMsg = map["msg"];
        quickLoginPlugin.closeLoginAuthView();
      }
    });
  }	

更多使用场景请参考 demo

SDK方法说明

1. 创建对象

代码说明:

import 'package:quickpass_yidun_flutter/quickpass_flutter_plugin.dart'
QuickpassFlutterPlugin quickLoginPlugin = new QuickpassFlutterPlugin();

2. 是否具备一键登录能力

代码说明:

quickLoginPlugin.checkVerifyEnable().then((map) {
    bool result = map['success'];
});

参数说明:

回调参数说明:

回调参数类型描述
successBoolean是否具备一键登录能力

3. 初始化

代码说明:

quickLoginPlugin.init(String businessId, int timeout).then((map) {
    bool result = map['success'];
});

参数说明:

入参说明:

参数类型是否必填默认值描述
businessIdString易盾分配的业务 id
isDebugbooleanfalse是否打开日志开关
timeoutint3运营商预取号和授权登录接口的超时时间,单位秒

回调参数说明:

回调参数类型描述
successBoolean初始化是否成功

4. 预取号

代码说明:

Map map = await quickLoginPlugin.preFetchNumber();
if (map['success'] == true) {
    var ydToken = map['token'];
} else {
    var ydToken = map['token'];
    var errorMsg = map['errorMsg'];
}

参数说明:

回调参数说明:

回调参数类型描述
successBoolean预取号是否成功
tokenString如果预取号成功则返回易盾 token,否则无此字段
errorMsgString如果预取号失败,返回错误详情

5. 自定义授权页面

在工程目录下新建asserts文件夹添加json配置文件,可配置项参考下面说明

代码说明:

String file = "";
if (Platform.isIOS) {
    file = "asserts/ios-light-config.json";
} else if (Platform.isAndroid) {
    file = "asserts/android-light-config.json";
}
rootBundle.loadString(file).then((value) async {
    configMap = {"uiConfig": json.decode(value)};
    quickLoginPlugin.setUiConfig(configMap);
});

参数说明:

基础参数:

参数类型是否必填默认值描述
configMap自定义配置项

config 可配置项说明: android版


 

安卓规范示意图 自定义展示图

状态栏

配置项说明
statusBarColor:String设置状态栏背景颜色,十六进制RGB值,如 "#ff0000"
isStatusBarDarkColor:boolean设置状态栏字体图标颜色是否为暗色(黑色)

导航栏

配置项说明
navBackIcon:String导航栏图标,图标放在 android drawable 下,这里配置图标名字
navBackIconWidth:int设置导航栏返回图标的宽度,单位 dp
navBackIconHeight:int设置导航栏返回图标的高度,单位 dp
navBackIconGravity:int设置导航栏返回图标位置,居左 3,居右 5,默认居左
isHideBackIcon:boolean设置是否隐藏导航栏返回按钮
navBackgroundColor:String设置导航栏背景颜色,十六进制RGB值,如 "#ff0000"
navHeight:int设置导航栏高度,单位 dp
navTitle:String设置导航栏标题
navTitleColor:String设置导航栏标题颜色,十六进制RGB值,如 "#ff0000"
navTitleSize:int设置导航栏标题大小,单位 sp
isNavTitleBold:boolean设置导航栏标题是否为粗体
isHideNav:boolean设置是否隐藏导航栏

应用 Logo

配置项说明
logoIconName:String应用 logo 图标,图标放在 android drawable 下,这里配置图标名字
logoWidth:int设置应用logo宽度,单位dp
logoHeight:int设置应用 logo 高度,单位 dp
logoTopYOffset:int设置 logo 顶部 Y 轴偏移,单位 dp
logoBottomYOffset:int设置 logo 距离屏幕底部偏移,单位 dp
logoXOffset:int设置 logo 水平方向的偏移,单位 dp
isHideLogo:boolean设置是否隐藏 logo

手机掩码

配置项说明
maskNumberColor:String设置手机掩码颜色,十六进制RGB值,如 "#ff0000"
maskNumberSize:int设置手机掩码字体大小,单位 px
maskNumberXOffset:int设置手机掩码水平方向的偏移,单位 dp
maskNumberDpSize:int设置手机掩码字体大小,单位 dp
maskNumberTopYOffset:int设置手机掩码顶部Y轴偏移,单位 dp
maskNumberBottomYOffset:int设置手机掩码距离屏幕底部偏移,单位 dp

认证品牌

配置项说明
sloganSize:int设置认证品牌字体大小,单位 px
sloganDpSize:int设置认证品牌字体大小,单位 dp
sloganColor:String设置认证品牌颜色,十六进制RGB值,如 "#ff0000"
sloganTopYOffset:int设置认证品牌顶部 Y 轴偏移,单位 dp
sloganBottomYOffset:int设置认证品牌距离屏幕底部偏移,单位 dp
sloganXOffset:int设置认证品牌水平方向的偏移,单位 dp

登录按钮

配置项说明
loginBtnText:String设置登录按钮文本
loginBtnTextSize:int设置登录按钮文本字体大小,单位 px
loginBtnTextDpSize:int设置登录按钮文本字体大小,单位 dp
loginBtnTextColor:String设置登录按钮文本颜色,十六进制RGB值,如 "#ff0000"
loginBtnWidth:int设置登录按钮宽度,单位 dp
loginBtnHeight:int设置登录按钮高度,单位 dp
loginBtnBackgroundRes:String设置登录按钮背景图标,图标放在 android drawable 下,这里配置图标名字
loginBtnTopYOffset:int设置登录按钮顶部Y轴偏移,单位 dp
loginBtnBottomYOffset:int设置登录按钮距离屏幕底部偏移,单位 dp
loginBtnXOffset:int设置登录按钮水平方向的偏移,单位 dp

隐私协议

配置项说明
privacyTextColor:String设置隐私栏文本颜色,不包括协议 ,如若隐私栏协议文案为:登录即同意《中国移动认证条款》且授权 QuickLogin 登录, 则该API对除协议‘《中国移动认证条款》’区域外的其余文本生效
privacyProtocolColor:String设置隐私栏协议颜色 。例如:登录即同意《中国移动认证条款》且授权 QuickLogin 登录 , 则该 API 仅对‘《中国移动认证条款》’文案生效
privacySize:int设置隐私栏区域字体大小,单位 px
privacyDpSize:int设置隐私栏区域字体大小,单位 dp
privacyTopYOffset:int设置隐私栏顶部Y轴偏移,单位 dp
privacyBottomYOffset:int设置隐私栏距离屏幕底部偏移,单位 dp
privacyTextMarginLeft:int设置隐私栏复选框和文字内边距,单位 dp
privacyMarginLeft:int设置隐私栏水平方向的偏移,单位 dp
privacyMarginRight:int设置隐私栏右侧边距,单位 dp
privacyState:boolean设置隐私栏协议复选框勾选状态,true 勾选,false 不勾选
isHidePrivacyCheckBox:boolean设置是否隐藏隐私栏勾选框
isPrivacyTextGravityCenter:boolean设置隐私栏文案换行后是否居中对齐,如果为true则居中对齐,否则左对齐
checkBoxGravity:int设置隐私栏勾选框与文本协议对齐方式,可选择顶部(48),居中(17),底部(80)等
checkBoxWith:int设置隐私栏复选框宽度,单位 dp
checkBoxHeight:int设置隐私栏复选框高度,单位 dp
checkedImageName:String设置隐私栏复选框选中时的图片资源,图标放在 android drawable 下,这里配置图标名字
unCheckedImageName:String设置隐私栏复选框未选中时的图片资源,图标放在 android drawable 下,这里配置图标名字
privacyTextStart:String设置隐私栏声明部分起始文案 。如:隐私栏声明为"登录即同意《隐私政策》和《中国移动认证条款》且授权易盾授予本机号码",则可传入"登录即同意"
isHidePrivacySmh:boolean是否隐藏运营商协议书名号
protocolText:String设置隐私栏协议文本
protocolLink:String设置隐私栏协议链接
protocol2Text:String设置隐私栏协议 2 文本
protocol2Link:String设置隐私栏协议 2 链接
protocol3Text:String设置隐私栏协议 3 文本
protocol3Link:String设置隐私栏协议 3 链接
privacyTextEnd:String设置隐私栏声明部分尾部文案。如:隐私栏声明为"登录即同意《隐私政策》和《中国移动认证条款》且授权易盾授予本机号码",则可传入"且授权易盾授予本机号码"

协议详情 Web 页面导航栏

配置项说明
protocolNavTitle:String设置协议 Web 页面导航栏标题,如果需要根据不同运营商设置不同标题
protocolNavBackIcon:String设置协议 Web 页面导航栏返回图标,图标放在 android drawable 下,这里配置图标名字
protocolNavColor:String设置协议Web页面导航栏颜色
protocolNavHeight:int设置协议 Web 页面导航栏高度
protocolNavTitleSize:int设置协议Web页面导航栏标题大小,单位 px
protocolNavTitleDpSize:int设置协议 Web 页面导航栏标题大小,单位 dp
protocolNavBackIconWidth:int设置协议 Web 页面导航栏返回按钮宽度,单位 dp
protocolNavBackIconHeight:int设置协议 Web 页面导航栏返回按钮高度,单位 dp

其他

配置项说明
backgroundImage:String设置登录页面背景,图片放在 android drawable 下,这里配置图片名字
backgroundGif:String设置登录页面背景为 Gif,Gif 资源需要放置到android drawable 目录下,传入资源名称即可
backgroundVideo:String设置登录页面背景为视频,视频放在android res/raw 文件夹下,这里配置视频文件名字。必须同时配置 backgroundVideo
backgroundVideoImage:String设置视频背景时的预览图,图片放在 android drawable 下,这里配置图标名字,配合 backgroundVideo 使用
enterAnimation:String设置授权页进场动画,enterAnimation 进场动画xml无后缀文件名。放置在 android anim目录下
exitAnimation:String设置授权页退出动画,exitAnimation 进场动画xml无后缀文件名。放置在 android anim目录下
isLandscape:boolean是否横屏
isDialogMode:boolean是否弹窗模式
dialogWidth:int授权页弹窗宽度,单位 dp
dialogHeight:int授权页弹窗高度,单位 dp
dialogX:int授权页弹窗 X 轴偏移量,以屏幕中心为原点
dialogY:int授权页弹窗 Y 轴偏移量,以屏幕中心为原点
isBottomDialog:boolean授权页弹窗是否贴于屏幕底部
true:显示在屏幕底部,dialogY 失效
false:不显示在屏幕底部,以 dialogY 参数为准
isProtocolDialogMode:boolean协议详情页是否开启弹窗模式
isPrivacyDialogAuto:boolean协议未勾选弹窗点击是否自动登录
isShowPrivacyDialog:boolean是否显示协议未勾选默认弹窗
privacyDialogText:String协议未勾选弹窗自定义message
privacyDialogSize:Double协议未勾选弹窗文本字体大小

自定义view

配置项说明
widgets:JsonArray自定义view数组
 ∟ viewId:String控件 id
 ∟ type:String控件类型,可选值为 TextView、Button、ImageView
 ∟ top:int控件距离顶部的偏移,单位 dp
 ∟ left:int控件距离左侧的偏移,单位 dp
 ∟ right:int控件距离右侧的偏移,单位 dp
 ∟ bottom:int控件距离底部的偏移,和top互斥,单位 dp
 ∟ width:int控件宽度,单位 dp
 ∟ height:int控件高度,单位 dp
 ∟ text:String控件文本,单位 dp
 ∟ font:int控件文本大小,单位 sp
 ∟ textColor:String控件文本颜色,十六进制颜色码
 ∟ clickable:boolean控件是否可点击,单位 sp
 ∟ backgroundColor:String控件背景颜色,十六进制颜色码
 ∟ backgroundImgPath:String控件背景图片,图片放在 android drawable 下,这里配置图片名字
 ∟ positionType:int添加控件的位置类型,1表示位于导航栏部分,0表示位于导航栏下方的body部分,默认为0
 ∟ action:String设置可点击控件的点击事件,在监听中回调。详见事件监听

config 可配置项说明: iOS版

设计规范概览
iOS设计规范 自定义展示图

基础配置

属性说明
presentDirectionTypepresentDirectionType = 1 表示从底部弹出
backgroundColor设置授权页面背景颜色
authWindowPop设置窗口类型
0 表示全屏模式
1 表示窗口在屏幕的中间
2 表示窗口在屏幕的底部(不支持横屏)
faceOrientation设置授权页面方向
0 表示设备方向未知
1 表示设置保持直立
2 表示设备上下颠倒
3 表示设备向左旋转
4 表示设备向右旋转
bgImage设置授权转背景图片,例如 :"图片名.后缀"
contentMode设置背景图片显示模式 0 表示 UIViewContentModeScaleToFill,1表示UIViewContentModeScaleAspectFit ,2表示UIViewContentModeScaleAspectFill

转场动画

属性说明
modalTransitionStyle设置授权转场动画
0 表示下推
1 表示翻转
2 表示淡出

自定义控件

属性说明
widgets设置授权界面自定义控件
例如 : "widgets": [
{ 
"type": "UIButton", 
"UIButtonType": 0, 
"image": "static/weixin.png", 
"title": "", 
"titleColor": "#000000", 
"titleFont": 12, 
"cornerRadius": 20, 
"action": "handleCustomEvent1", 
"frame": {"mainScreenLeftDistance":100,"mainScreenTopDistance":360,"width":32,"height":32}, 
"backgroundImage":"static/yidun_logo.png" 
}, 
{ 
"type": "UIButton", 
"UIButtonType": 0, 
"image": "static/qq.png", 
"title": "", 
"titleColor": "#FFFFFF", 
"titleFont": 12, 
"cornerRadius": 20, 
"action": "handleCustomEvent2", 
"frame": {"mainScreenCenterXWithLeftDistance":0,"mainScreenTopDistance":360,"width":32,"height":32}, 
"backgroundImage": "static/yidun_logo.png" 
}] 

背景设置视频

属性说明
localVideoFileName设置视频本地名称 例如xx.mp4*
isRepeatPlay设置是否重复播放视频,YES 表示重复播放,NO 表示不重复播放
videoURL设置网络视频的地址

背景设置 Gif

属性说明
animationRepeatCount设置动画重复的次数 -1无限重复
animationImages设置图片数组
animationDuration设置动画的时长

状态栏

属性说明
statusBarStyle设置状态栏样式
iOS13之前 0表示文字黑色,1表示文字白色
iOS13之后 0表示自动选择黑色或白色,3 表示文字黑色,2 表示文字白色

导航栏

属性说明
navBarHidden导航栏是否隐藏
navBgColor设置导航栏背景颜色
navText设置导航栏标题
navTextFont设置导航栏标题字体大小
navTextColor设置导航栏标题字体颜色
navTextHidden设置导航栏标题是否隐藏,默认不隐藏
navReturnImg设置导航返回图标,例如:"back-1"
navReturnImgLeftMargin设置导航返回图标距离屏幕左边的距离,默认0
navReturnImgBottomMargin设置导航返回图标距离屏幕底部的距离,默认0
navReturnImgWidth设置导航返回图标的宽度,默认44
navReturnImgHeight设置导航返回图标的高度 , 默认44

应用 Logo

属性说明
logoImg设置logo图片, 例如 :"图片名.后缀"]
logoWidth设置logo图片宽度
logoHeight设置logo图片高度
logoOffsetTopY设置logo图片沿Y轴偏移量, logoOffsetTopY为距离屏幕顶部的距离 ,默认为20
logoOffsetX设置logo图片沿X轴偏移量,logoOffsetX = 0居中显示
logoHidden设置logo图片是否隐藏,默认不隐藏

手机掩码

属性说明
numberColor设置手机号码字体颜色
numberFont设置手机号码字体大小, 默认18
numberOffsetTopY设置手机号码沿Y轴偏移量, numberOffsetTopY为距离屏幕顶部的距离 ,默认为100
numberOffsetX设置logo图片沿X轴偏移量,logoOffsetX = 0居中显示
numberHeight设置手机号码框的高度 默认27
numberBackgroundColor设置手机号码的背景颜色
numberCornerRadius设置手机号码的控件的圆角
numberLeftContent设置手机号码的左边描述内容,默认为空
numberRightContent设置手机号码的右边描述内容,默认为空色

认证品牌

属性说明
brandColor设置认证服务品牌文字颜色
brandBackgroundColor设置认证服务品牌背景颜色
brandFont设置认证服务品牌文字字体 默认12
brandWidth设置认证服务品牌的宽度, 默认200
brandHeight设置认证服务品牌的高度, 默认16
brandOffsetX设置认证服务品牌X偏移量 ,brandOffsetX = 0居中显示
brandOffsetTopY设置认证服务品牌Y偏移量, brandOffsetTopY为距离屏幕顶部的距离 ,默认为150
brandHidden设置是否隐藏认证服务品牌,默认显示

登录按钮

属性说明
logBtnText设置登录按钮文本
logBtnTextFont设置登录按钮字体大小
logBtnTextColor设置登录按钮文本颜色
logBtnOffsetTopY设置登录按钮Y偏移量 ,logBtnOffsetTopY为距离屏幕顶部的距离 ,默认为200
logBtnRadius设置登录按钮圆角,默认8
logBtnUsableBGColor设置登录按钮背景颜色
logBtnEnableImg设置登录按钮可用状态下的背景图片
logBtnHighlightedImg登录按钮高亮状态下的背景图片
logBtnOriginLeft登录按钮的左边距 ,横屏默认40 ,竖屏默认260
logBtnOriginRight设置登录按钮的左边距,横屏默认40 ,竖屏默认260
logBtnHeight设置登录按钮的高度,默认44

隐私协议

若勾选框需要展示,请务必设置勾选框的选中态图片与未选中态图片 协议未勾选时,登录按钮是否可点击可以自定义设置,弹窗提示的样式也可以自定义

属性说明
unCheckedImageName例如:static/图片名.后缀
checkedImageName例如:static/图片名.后缀
checkboxWH设置复选框大小(只能正方形) ,默认 12
privacyState设置复选框默认状态 默认:NO
checkBoxAlignment设置隐私条款check框位置
0 表示相对协议顶对齐
1 表示相对协议中对齐
2 表示相对协议下对齐 默认顶对齐
checkedSelected设置复选框勾选状态,YES:勾选,NO:取消勾选状态
checkBoxMargin设置复选框距离隐私条款的边距 默认 8
appPrivacyOriginLeftMargin设置隐私条款距离屏幕左边的距离 默认 60
appPrivacyOriginRightMargin设置隐私条款距离屏幕右边的距离 默认 40
appPrivacyOriginBottomMargin设置隐私条款距离屏幕的距离 默认 40
privacyNavReturnImg设置用户协议界面,导航栏返回图标,默认用导航栏返回图标
appPrivacyText设置隐私的内容模板:全句可自定义但必须保留"《默认》"字段表明SDK默认协议,否则设置不生效。必设置项(参考SDK的demo)appPrivacyText设置内容:登录并同意《默认》和易盾协议1、网易协议2登录并支持一键登录,展示:登录并同意中国移动条款协议和易盾协议1、网易协议2登录并支持一键登录
appFPrivacyText设置开发者隐私条款协议名称(第一个协议)
appFPrivacyURL设置开发者隐私条款协议url(第一个协议)
appSPrivacyText设置开发者隐私条款协议名称(第二个协议)
appSPrivacyURL设置开发者隐私条款协议url(第二个协议)
shouldHiddenPrivacyMarks设置是否隐藏"《默认》" 两边的《》,默认不隐藏
privacyColor设置隐私条款名称颜色
privacyFont设置隐私条款字体的大小
protocolColor设置协议条款协议名称颜色
appPrivacyLineSpacing设置隐私协议的行间距, 默认是1
appPrivacyWordSpacing设置隐私协议的字间距, 默认是0
progressColor设置用户协议界面,进度条颜色

弹窗模式

属性说明
popBackgroundColor设置窗口模式的背景颜色
authWindowWidth设置弹窗的宽度,竖屏状态下默认是 300,横屏状态下默认是 335
authWindowHeight设置弹窗高度,竖屏状态下默认是335, 横屏状态下默认是300 ⚠️底部半屏弹窗模式的高度可通过修改 authWindowHeight,调整高度 默认335pt
closePopImg设置弹窗模式下关闭按钮的图片,⚠️(必传)
closePopImgWidth设置弹窗模式下关闭按钮图片的宽度 默认20*
closePopImgHeight设置弹窗模式下关闭按钮图片的高度 默认20
closePopImgOriginY设置关闭按钮距离顶部的距离,默认距离顶部10,距离 = 10 + closePopImgOriginY
closePopImgOriginX设置关闭按钮距离父视图右边的距离,默认距离为10,距离 = 10 + closePopImgOriginX
authWindowCenterOriginY设置居中弹窗沿Y轴移动的距离。例如 :authWindowCenterOriginY = 10 表示中间点沿Y轴向下偏移10个像素
authWindowCenterOriginX设置居中弹窗沿X轴移动的距离。例如 :authWindowCenterOriginX = 10 表示中间点沿X轴向右偏移10个像素
popCenterCornerRadius设置居中弹窗模式下,弹窗的圆角,默认圆角为16
popBottomCornerRadius设置底部弹窗模式下,弹窗的圆角,默认圆角为16,注:只可修改顶部左右二边的值
isOpenSwipeGesture设置底部弹窗模式下,是否开启轻扫手势,向下轻扫关闭弹窗。默认关闭

6. 调起授权页面

代码说明:

// 拉起授权页面
Map map = await quickLoginPlugin.onePassLogin(animated: true);
if (map["success"]) {
    var accessToken = map["accessToken"];
} else {
    var errorMsg = map["msg"];
}

参数说明:

入参说明:

参数类型是否必填默认值描述
animatedbooltrue授权页弹出是否有动画

回调参数说明:

回调参数类型描述
successBoolean授权是否成功
accessTokenString如果取号成功返回运营商授权码,否则无此字段
msgString如果取号失败,返回错误详情

7. 事件监听

代码说明:

var eventChannel = const EventChannel("yd_quicklogin_flutter_event_channel");
@override
void initState() {
    super.initState();
    initPlatformState();
    eventChannel.receiveBroadcastStream().listen(_onData, onError: _onError);
}
void _onData(response) {
    if (response is Map) {
      var action = (response as Map)["action"];
    }
}

action 参数说明:

回调参数类型描述
actionStringauthViewDidLoad 表示正在加载授权页
authViewWillAppear 表示授权页已经出现
authViewWillDisappear 表示授权页将要消失
authViewDidDisappear表示授权页已经消失
authViewDealloc 表示授权页销毁
appDPrivacy 表示点击了默认协议
appFPrivacy 表示点击了议第一个协议点击
appSPrivacy 表示点击了第二个协议
loginAction 表示点击了登录按钮,data.checked = true 表示在点击登录按钮时复选框选已选中反之
checkedAction 表示点击了复选框,data.checked = true 表示复选框已选中反之
其他自定义的action

8. 关闭授权页面

代码说明:

quickLoginPlugin.closeLoginAuthView();

9. 本机校验

在初始化之后执行,本机校验和一键登录可共用初始化,本机校验界面需自行实现

代码说明

quickLoginPlugin.verifyPhoneNumber(String businessId,String phoneNumber).then(map){
    if (map["success"]) {
        var accessToken = map["accessToken"];
    } else {
        var errorMsg = map["msg"];
    }
    var ydToken = map["ydToken"];
}

参数说明

入参说明:

参数类型是否必填默认值描述
businessIdString业务id
phoneNumberString待校验手机号

回调参数说明:

回调参数类型描述
successBoolean本机校验是否成功
accessTokenString如果本机校验成功返回运营商授权码,否则无此字段
ydTokenString易盾token,用于排查问题
msgString如果取号失败,返回错误详情

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add quickpass_yidun_flutter

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  quickpass_yidun_flutter: ^1.2.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:quickpass_yidun_flutter/quickpass_flutter_plugin.dart'; 

example/lib/main.dart

import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';
import 'package:quickpass_yidun_flutter/quickpass_flutter_plugin.dart';

void main() => runApp(new MaterialApp(
      title: "demo",
      theme: new ThemeData(primaryColor: Colors.white),
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  /// 统一 key
  final String f_result_key = "success";

  String phoneNumber;

  String _platformVersion = 'Unknown';
  String _result = "token=";
  final QuickpassFlutterPlugin quickLoginPlugin = new QuickpassFlutterPlugin();
  bool _loading = false;

  var eventChannel = const EventChannel("yd_quicklogin_flutter_event_channel");

  @override
  void initState() {
    super.initState();
    initPlatformState();
    eventChannel.receiveBroadcastStream().listen(_onData, onError: _onError);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('易盾一键登录'),
        ),
        body: ModalProgressHUD(child: _buildContent(), inAsyncCall: _loading),
      ),
    );
  }

  void _onData(response) {
    if (response is Map) {
      var action = (response as Map)["action"];
      if (action == "handleCustomEvent1") {
        print("点击微信");
      } else if (action == "handleCustomEvent2") {
        print("点击QQ");
      } else if (action == "handleCustomEvent3") {
        print("点击微博");
      } else if (action == "handleCustomLabel") {
        print("点击其他登录方式");
      } else if (action == "authViewWillDisappear") {
        print("授权页将要消失");
      } else if (action == "authViewDidDisappear") {
        print("授权页已经消失");
      } else if (action == "authViewDealloc") {
        print("授权页销毁");
      } else if (action == "authViewDidLoad") {
        print("加载授权页");
      } else if (action == "authViewWillAppear") {
        print("授权页将要出现");
      } else if (action == "authViewDidAppear") {
        print("授权页已经出现");
      } else if (action == "backAction") {
        print("点击返回按钮");
      } else if (action == "loginAction") {
        print("点击登录按钮");
      } else if (action == "checkedAction") {
        print("点击复选框");
      } else if (action == "appDPrivacy") {
        print("点击默认协议");
      } else if (action == "appFPrivacy") {
        print("点击第一个协议");
      } else if (action == "appSPrivacy") {
        print("点击第二个协议");
      }
    }
  }

  _onError(Object error) {
    PlatformException exception = error;
  }

  Widget _buildContent() {
    return SingleChildScrollView(
      child: new Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.all(20),
            color: Colors.white,
            child: Text(_result),
            width: 300,
            height: 100,
          ),
          new Container(
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new CustomButton(
                    onPressed: () {
                      isInitSuccess();
                    },
                    title: "初始化状态"),
                new Text("   "),
                Expanded(
                    child: new CustomButton(
                  onPressed: () {
                    checkVerifyEnable();
                  },
                  title: "网络环境是否支持",
                )),
              ],
            ),
          ),
          new Container(
            child: SizedBox(
              child: new CustomButton(
                onPressed: () {
                  preLogin();
                },
                title: "预取号",
              ),
              width: double.infinity,
            ),
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
          ),
          new Container(
            child: SizedBox(
              child: new CustomButton(
                onPressed: () {
                  quickLogin();
                },
                title: "一键登录",
              ),
              width: double.infinity,
            ),
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
          ),
          new TextField(
            keyboardType: TextInputType.phone,
            maxLines: 1,
            autofocus: false,
            cursorColor: Colors.blue,
            maxLength: 11,
            maxLengthEnforced: true,
            onChanged: (text) {
              phoneNumber = text;
              print("phone=$text");
            },
            decoration: InputDecoration(
              hintText: "请输入手机号码",
              labelText: "手机号",
              // 未获得焦点下划线设为灰色
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),
          ),
          new Container(
            child: SizedBox(
              child: new CustomButton(
                onPressed: () {
                  verifyPhoneNumber();
                },
                title: "本机校验",
              ),
              width: double.infinity,
            ),
            margin: EdgeInsets.fromLTRB(40, 5, 40, 5),
          ),
        ],
        mainAxisAlignment: MainAxisAlignment.start,
      ),
    );
  }

  /// sdk 初始化是否完成
  void isInitSuccess() {
    quickLoginPlugin
        .init("易盾业务id", 4, true)
        .then((map) {
      bool result = map[f_result_key];
      setState(() {
        if (result) {
          _result = "sdk 初始换成功";
        } else {
          _result = "sdk 初始换失败";
        }
      });
    });
  }

  /// 判断当前网络环境是否可以发起认证
  void checkVerifyEnable() {
    quickLoginPlugin.checkVerifyEnable().then((map) {
      bool result = map[f_result_key];
      setState(() {
        if (result) {
          _result = "当前网络环境【支持认证】!";
        } else {
          _result = "当前网络环境【不支持认证】!";
        }
      });
    });
  }

  /// 登录预取号
  void preLogin() async {
    setState(() {
      _loading = true;
    });
    Map map = await quickLoginPlugin.preFetchNumber();
    if (map['success'] == true) {
      var ydToken = map['token'];
      setState(() {
        _loading = false;
        _result = "token = $ydToken";
      });
    } else {
      var ydToken = map['token'];
      var errorMsg = map['errorMsg'];
      setState(() {
        _loading = false;
        _result = "$errorMsg";
      });
    }
  }

  void quickLogin() {
    var configMap;
    var param = "";
    String file = "";
    if (Platform.isIOS) {
      file = "asserts/ios-light-config.json";
    } else if (Platform.isAndroid) {
      file = "asserts/android-light-config.json";
    }
    rootBundle.loadString(file).then((value) async {
      configMap = {"uiConfig": json.decode(value)};
      quickLoginPlugin.setUiConfig(configMap);
      Map map = await quickLoginPlugin.onePassLogin();
      if (map["success"]) {
        var accessToken = map["accessToken"];
        setState(() {
          _result = "取号成功, 运营商授权码:" + accessToken;
        });
        quickLoginPlugin.closeLoginAuthView();
      } else {
        var errorMsg = map["msg"];
        setState(() {
          _result = "取号失败, 出错原因:" + errorMsg;
        });
        quickLoginPlugin.closeLoginAuthView();
      }
    });
  }

  void verifyPhoneNumber() {
    quickLoginPlugin
        .verifyPhoneNumber("易盾业务id", phoneNumber)
        .then((map) {
      if (map["success"]) {
        var accessToken = map["accessToken"];
        print("运营商token$accessToken");
      } else {
        var errorMsg = map["msg"];
        print("错误信息$errorMsg");
      }
      var ydToken = map["ydToken"];
      print("易盾token$ydToken");
    });
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;

    setState(() {
      _platformVersion = platformVersion;
    });
  }
}

/// 封装 按钮
class CustomButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String title;

  const CustomButton({@required this.onPressed, this.title});

  @override
  Widget build(BuildContext context) {
    return new FlatButton(
      onPressed: onPressed,
      child: new Text(
        "$title",
        style: TextStyle(fontSize: 13),
      ),
      color: Colors.blue,
      highlightColor: Color(0xff888888),
      splashColor: Color(0xff888888),
      textColor: Colors.white,
      padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
    );
  }
} 

Download Details:

Author: 

Source Code: https://pub.dev/packages/quickpass_yidun_flutter

#flutter #android #ios 

What is GEEK

Buddha Community

A New Flutter Plugin for Quichlogin

Google's Flutter 1.20 stable announced with new features - Navoki

Flutter Google cross-platform UI framework has released a new version 1.20 stable.

Flutter is Google’s UI framework to make apps for Android, iOS, Web, Windows, Mac, Linux, and Fuchsia OS. Since the last 2 years, the flutter Framework has already achieved popularity among mobile developers to develop Android and iOS apps. In the last few releases, Flutter also added the support of making web applications and desktop applications.

Last month they introduced the support of the Linux desktop app that can be distributed through Canonical Snap Store(Snapcraft), this enables the developers to publish there Linux desktop app for their users and publish on Snap Store.  If you want to learn how to Publish Flutter Desktop app in Snap Store that here is the tutorial.

Flutter 1.20 Framework is built on Google’s made Dart programming language that is a cross-platform language providing native performance, new UI widgets, and other more features for the developer usage.

Here are the few key points of this release:

Performance improvements for Flutter and Dart

In this release, they have got multiple performance improvements in the Dart language itself. A new improvement is to reduce the app size in the release versions of the app. Another performance improvement is to reduce junk in the display of app animation by using the warm-up phase.

sksl_warm-up

If your app is junk information during the first run then the Skia Shading Language shader provides for pre-compilation as part of your app’s build. This can speed it up by more than 2x.

Added a better support of mouse cursors for web and desktop flutter app,. Now many widgets will show cursor on top of them or you can specify the type of supported cursor you want.

Autofill for mobile text fields

Autofill was already supported in native applications now its been added to the Flutter SDK. Now prefilled information stored by your OS can be used for autofill in the application. This feature will be available soon on the flutter web.

flutter_autofill

A new widget for interaction

InteractiveViewer is a new widget design for common interactions in your app like pan, zoom drag and drop for resizing the widget. Informations on this you can check more on this API documentation where you can try this widget on the DartPad. In this release, drag-drop has more features added like you can know precisely where the drop happened and get the position.

Updated Material Slider, RangeSlider, TimePicker, and DatePicker

In this new release, there are many pre-existing widgets that were updated to match the latest material guidelines, these updates include better interaction with Slider and RangeSliderDatePicker with support for date range and time picker with the new style.

flutter_DatePicker

New pubspec.yaml format

Other than these widget updates there is some update within the project also like in pubspec.yaml file format. If you are a flutter plugin publisher then your old pubspec.yaml  is no longer supported to publish a plugin as the older format does not specify for which platform plugin you are making. All existing plugin will continue to work with flutter apps but you should make a plugin update as soon as possible.

Preview of embedded Dart DevTools in Visual Studio Code

Visual Studio code flutter extension got an update in this release. You get a preview of new features where you can analyze that Dev tools in your coding workspace. Enable this feature in your vs code by _dart.previewEmbeddedDevTools_setting. Dart DevTools menu you can choose your favorite page embed on your code workspace.

Network tracking

The updated the Dev tools comes with the network page that enables network profiling. You can track the timings and other information like status and content type of your** network calls** within your app. You can also monitor gRPC traffic.

Generate type-safe platform channels for platform interop

Pigeon is a command-line tool that will generate types of safe platform channels without adding additional dependencies. With this instead of manually matching method strings on platform channel and serializing arguments, you can invoke native class and pass nonprimitive data objects by directly calling the Dartmethod.

There is still a long list of updates in the new version of Flutter 1.2 that we cannot cover in this blog. You can get more details you can visit the official site to know more. Also, you can subscribe to the Navoki newsletter to get updates on these features and upcoming new updates and lessons. In upcoming new versions, we might see more new features and improvements.

You can get more free Flutter tutorials you can follow these courses:

#dart #developers #flutter #app developed #dart devtools in visual studio code #firebase local emulator suite in flutter #flutter autofill #flutter date picker #flutter desktop linux app build and publish on snapcraft store #flutter pigeon #flutter range slider #flutter slider #flutter time picker #flutter tutorial #flutter widget #google flutter #linux #navoki #pubspec format #setup flutter desktop on windows

Adobe XD plugin for Flutter with CodePen Tutorial

Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens. Yes, you read it right, now you can make and export your favorite design in Adobe XD and export all the design in the widget form or as a full-screen design, this can save you a lot of time required in designing.

What we will do?
I will make a simple design of a dialogue box with a card design with text over it as shown below. After you complete this exercise you can experiment with the UI. You can make your own components or import UI kits available with the Adobe XD.

#developers #flutter #adobe xd design export to flutter #adobe xd flutter code #adobe xd flutter code generator - plugin #adobe xd flutter plugin #adobe xd flutter plugin tutorial #adobe xd plugins #adobe xd to flutter #adobe xd tutorial #codepen for flutter.

Terry  Tremblay

Terry Tremblay

1598396940

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking** Android and iOS** applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).

flutter-mobile-desktop-web-embedded_min

Flutter was officially released in December 2018. Since then, it has gone a much stronger flutter community.

There has been much increase in flutter developers, flutter packages, youtube tutorials, blogs, flutter examples apps, official and private events, and more. Flutter is now on top software repos based and trending on GitHub.

Flutter meaning?

What is Flutter? this question comes to many new developer’s mind.

humming_bird_dart_flutter

Flutter means flying wings quickly, and lightly but obviously, this doesn’t apply in our SDK.

So Flutter was one of the companies that were acquired by **Google **for around $40 million. That company was based on providing gesture detection and recognition from a standard webcam. But later when the Flutter was going to release in alpha version for developer it’s name was Sky, but since Google already owned Flutter name, so they rename it to Flutter.

Where Flutter is used?

Flutter is used in many startup companies nowadays, and even some MNCs are also adopting Flutter as a mobile development framework. Many top famous companies are using their apps in Flutter. Some of them here are

Dream11

Dream11

NuBank

NuBank

Reflectly app

Reflectly app

Abbey Road Studios

Abbey Road Studios

and many more other apps. Mobile development companies also adopted Flutter as a service for their clients. Even I was one of them who developed flutter apps as a freelancer and later as an IT company for mobile apps.

Flutter as a service

#dart #flutter #uncategorized #flutter framework #flutter jobs #flutter language #flutter meaning #flutter meaning in hindi #google flutter #how does flutter work #what is flutter

Punith Raaj

1640672627

Flutter Hotel Booking UI - Book your Stay At A New Hotel With Flutter - Ep1

https://youtu.be/-tHUmjIkGJ4
Flutter Hotel Booking UI - Book your Stay At A New Hotel With Flutter - Ep1
#flutter #fluttertravelapp #hotelbookingui #flutter ui design 

In this video, I'm going to show you how to make a Cool Hotel Booking App using Flutter and visual studio code. 

In this tutorial, you will learn how to create a Splash Screen and Introduction Screen, how to implement a SmoothPageIndicator in Flutter. 

🚀 Nice, clean and modern Hotel Booking #App #UI made in #Flutter 

⚠️ IMPORTANT: If you want to learn, I strongly advise you to watch the video at a slow speed and try to follow the code and understand what is done, without having to copy the code, and then download it from GitHub. 

► Social Media 

    GitHub: https://github.com/Punithraaj 

    LinkedIn: https://www.linkedin.com/in/roaring-r...

    Twitter: https://twitter.com/roaringraaj

    Facebook: https://www.facebook.com/flutterdartacademy

I hope you liked it, and don't forget to like,comment, subscribe, share this video with your friends, and star the repository on GitHub! 

⭐️ Thanks for watching the video and for more updates don't forget to click on the notification.⭐️Please comment your suggestion for my improvement. ⭐️Remember to like, subscribe, share this video, and star the repo on Github :)Hope you enjoyed this video! If you loved it, you can Buy me a coffee : https://www.buymeacoffee.com/roaringraaj

#flutter riverpod #flutter travel app #appointment app flutter #morioh

Punith Raaj

1644991965

Flutter Hotel Booking UI - Book your Stay At A New Hotel - Ep3

Flutter Hotel Booking UI - Book your Stay At A New Hotel - Ep3

In this video, I'm going to show you how to make a Cool Hotel Booking App using Flutter from scratch.
In this Episode , you will learn how to create a Custom Navigation Bar for Navigating between Screen. 
🚀 Nice, clean and modern Hotel Booking #App #UI made in #Flutter

⚠️ IMPORTANT: If you want to learn, I strongly advise you to watch the video at a slow speed and try to follow the code and understand what is done, without having to copy the code, and then download it from GitHub.

Starter Project : https://github.com/Punithraaj/Flutter_Hotel_Booking_UI/tree/Episode-2

► Timestamps 
0:00 Intro 
0:15 Custom Bottom Navigation Screen 
07:26 Tab Button

► Social Media 
GitHub: https://github.com/Punithraaj/Flutter_Hotel_Booking_UI
LinkedIn: https://www.linkedin.com/in/roaring-r...
Twitter: https://twitter.com/roaringraaj
Facebook: https://www.facebook.com/flutterdartacademy

► Previous Episode : https://youtu.be/A0QdZPpMBb0
► Playlist: https://www.youtube.com/playlist?list=PL6vcAuTKAaYdboy1OOxnMekOEuRzHUvR6

RESOURCES 
Complete Hotel Booking App UI Design Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYdboy1OOxnMekOEuRzHUvR6
Complete Tik Tok Clone App Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYe_9KQRsxTsFFSx78g1OluK 
Complete Online Books Store Flutter UI Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYdRkc_jt08x23plwGAYiGTU 
Flutter UI Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYeKyXAwzB9JnuR5l0dOlNRh
Flutter Integration Tutorial: https://youtube.com/playlist?list=PL6vcAuTKAaYdpG5qfCjSEgugvvhqFemes

I hope you liked it, and don't forget to like,comment, subscribe, share this video with your friends, and star the repository on GitHub!
⭐️ Thanks for watching the video and for more updates don't forget to click on the notification. 
⭐️Please comment your suggestion for my improvement. 
⭐️Remember to like, subscribe, share this video, and star the repo on Github :)

Hope you enjoyed this video!
If you loved it, you can Buy me a coffee : https://www.buymeacoffee.com/roaringraaj

LIKE & SHARE & ACTIVATE THE BELL Thanks For Watching :-)

https://youtu.be/cCion2y7hNE
#appointment app flutter #flutter #fluttertravelapp #hotelbookingui #flutter ui design #book your stay at a new hotel app #hotel booking app flutter #flutter travel ui tutorial #morioh #flutter