概述
一键登录:用户无需输入手机号码,一键点击即可快速完成注册/登录流程,提高转化率优化用户体验。
申请资源
发起请求前,需要极光后台获取配置:
应用设置-应用信息
AppKey:xxxx
Master Secret:xxxx
应用设置-认证设置
iOS-Bundle ID:com.lx.xxx
一键登录-RSA加密公钥:xxx
密钥生成:https://xuanxuanblingbling.github.io/ctf/web/2019/05/10/rsa/
RSA公钥会在极光返回手机号的时候加密,服务端用对应的私钥去解密,获取手机号
认证流程和时序图
认证流程:
- 客户端调用极光认证SDK,启动认证流程,需要向极光发起请求
- 极光返回用户的token
- 客户端将token发送给服务端,接口 user/account/shanyan_login
- 服务端将客户端请求中的token,向极光请求返回手机号,接口:https://api.verification.jpush.cn/v1/web/loginTokenVerify
- 极光验证token是否有效
- 极光返回用户的手机号
- 服务端返回用户的UID和Session ID
代码
String _token;
_reqOneLogin() async {
if (_token == null) {
return;
}
var data = await NetUtil.futurePost('/user/account/shanyan_login',
bodyParams: {
"token": _token
});
var dd = data;
if (dd['dm_error'] == 0) {
bool login = await UserManager.instance.isLogin();
if (login) {
await UserManager.instance.logout();
}
UserManager.instance.updateLoginUser(dd);
} else {
TToast.show(dd['error_msg'] ?? '网络不给力');
}
}
/// 统一 key
final String f_result_key = "result";
/// 错误码
final String f_code_key = "code";
/// 回调的提示信息,统一返回 flutter 为 message
final String f_msg_key = "message";
/// 运营商信息
final String f_opr_key = "operator";
final Jverify jverify = new Jverify();
///初始化平台极光SDK
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initJverifyState() async {
// 初始化 SDK 之前添加监听
jverify.addSDKSetupCallBackListener((JVSDKSetupEvent event){
print("#one login# receive sdk setup call back event :${event.toMap()}");
});
jverify.setDebugMode(true); // 打开调试模式
jverify.setup(
appKey: "xxx",//"你自己应用的 AppKey",
channel: "AppStore"); // 初始化sdk, appKey 和 channel 只对ios设置有效
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
/// 授权页面点击时间监听
jverify.addAuthPageEventListener((JVAuthPageEvent event) {
print("#one login# receive auth page event :${event.toMap()}");
});
preLogin();
}
/// 登录预取号
void preLogin(){
jverify.checkVerifyEnable().then((map) {
if (!mounted) return;
bool result = map[f_result_key];
if (result) {
jverify.preLogin().then((map) {
if (!mounted) return;
print("#one login# 预取号接口回调:${map.toString()}");
int code = map[f_code_key];
String message = map[f_msg_key];
if (code == 7000) {
///预取号成功弹窗登录界面
loginAuth();
}
else {
print("#one login#" + message);
}
});
}
else {
print("#one login# [2016],msg = 当前网络环境不支持认证");
}
});
}
/// SDK 请求授权一键登录
void loginAuth() {
jverify.checkVerifyEnable().then((map) {
bool result = map[f_result_key];
if (result) {
/// 自定义授权的 UI 界面,以下设置的图片必须添加到资源文件里,
/// android项目将图片存放至drawable文件夹下,可使用图片选择器的文件名,例如:btn_login.xml,入参为"btn_login"。
/// ios项目存放在 Assets.xcassets。
///
JVUIConfig uiConfig = JVUIConfig();
//nav
uiConfig.navHidden = false;
uiConfig.navReturnImgPath = 'nav_back_black';
uiConfig.navColor = Colors.white.value;
uiConfig.navText = '';
//logo
uiConfig.logoWidth = 90;
uiConfig.logoHeight = 90;
uiConfig.logoOffsetY = 76;
uiConfig.logoVerticalLayoutItem = JVIOSLayoutItem.ItemSuper;
uiConfig.logoHidden = false;
uiConfig.logoImgPath = "icon-180";
//phone
uiConfig.numberFieldWidth = 200;
uiConfig.numberFieldHeight = 40;
uiConfig.numFieldOffsetY = 58;
uiConfig.numberVerticalLayoutItem = JVIOSLayoutItem.ItemLogo;
uiConfig.numberColor = Colors.black.value;
uiConfig.numberSize = 20;
//slogan
uiConfig.sloganOffsetY = 10;
uiConfig.sloganVerticalLayoutItem = JVIOSLayoutItem.ItemNumber;
uiConfig.sloganTextColor = CJColor.grayColor.value;
uiConfig.sloganTextSize = 12;
//login
uiConfig.logBtnWidth = 260;
uiConfig.logBtnHeight = 50;
uiConfig.logBtnOffsetY = 20;
uiConfig.logBtnVerticalLayoutItem = JVIOSLayoutItem.ItemSlogan;
uiConfig.logBtnText = "本机号码一键登录";
uiConfig.logBtnTextColor = Colors.white.value;
uiConfig.logBtnTextSize = 14;
uiConfig.loginBtnNormalImage = "icon-login-bg";//图片必须存在
uiConfig.loginBtnPressedImage = "icon-login-bg";//图片必须存在
uiConfig.loginBtnUnableImage = "icon-login-bg";//图片必须存在
//privacy
uiConfig.privacyHintToast = true;//only android 设置隐私条款不选中时点击登录按钮默认显示toast。
uiConfig.privacyState = true;//设置默认勾选
uiConfig.privacyCheckboxHidden = false;
uiConfig.privacyOffsetY = 35+MediaQuery.of(context).padding.bottom.toInt();// 距离底部距离
uiConfig.privacyVerticalLayoutItem = JVIOSLayoutItem.ItemSuper;
uiConfig.clauseName = "用户服务协议";
uiConfig.clauseUrl = UserManager.instance.h5Host()+'/about/index.html#/userAgreement';
uiConfig.clauseBaseColor = Colors.black.value;
uiConfig.clauseNameTwo = "隐私政策";
uiConfig.clauseUrlTwo = UserManager.instance.h5Host()+'/about/index.html#/privacyAgreement';
uiConfig.clauseColor = Color(0xFFFAC409).value;
uiConfig.privacyText = ["登录即同意","和",",","并授权陌亲获得本机号码"];
uiConfig.privacyTextSize = 12;
//uiConfig.privacyWithBookTitleMark = true;
//uiConfig.privacyTextCenterGravity = false;
uiConfig.authStatusBarStyle = JVIOSBarStyle.StatusBarStyleDarkContent;
uiConfig.privacyStatusBarStyle = JVIOSBarStyle.StatusBarStyleDefault;
//only android
uiConfig.statusBarColorWithNav = true;
uiConfig.virtualButtonTransparent = true;
uiConfig.privacyStatusBarColorWithNav = true;
uiConfig.privacyVirtualButtonTransparent = true;
//animation
uiConfig.needStartAnim = true;
uiConfig.needCloseAnim = true;
//privacy web
uiConfig.privacyNavColor = Colors.white.value;
uiConfig.privacyNavTitleTextColor = Colors.black.value;
uiConfig.privacyNavTitleTextSize = 16;
uiConfig.privacyNavTitleTitle ="认证服务协议";//only ios
uiConfig.privacyNavTitleTitle1 = "用户服务协议";
uiConfig.privacyNavTitleTitle2 = "隐私协议";
uiConfig.privacyNavReturnBtnImage = "nav_back_black";//图片必须存在;
/// 添加自定义的 控件 到授权界面
List<JVCustomWidget> widgetList = [];
/// 步骤 1:调用接口设置 UI
jverify.setCustomAuthorizationView(true, uiConfig, landscapeConfig: uiConfig,widgets: widgetList);
/// 步骤 2:调用一键登录接口
/// 方式一:使用同步接口 (如果想使用异步接口,则忽略此步骤,看方式二)
/// 先,添加 loginAuthSyncApi 接口回调的监听
jverify.addLoginAuthCallBackListener((event){
print("#one login# 通过添加监听,获取到 loginAuthSyncApi 接口返回数据,code=${event.code},message = ${event.message},operator = ${event.operator}");
if (event.code == 6000) {
_token = event.message;
_reqOneLogin();
}
});
/// 再,执行同步的一键登录接口
jverify.loginAuthSyncApi(autoDismiss: true);
}
});
}