手機(jī)號(hào)碼一鍵登錄接入

概述

一鍵登錄:用戶無需輸入手機(jī)號(hào)碼,一鍵點(diǎn)擊即可快速完成注冊/登錄流程,提高轉(zhuǎn)化率優(yōu)化用戶體驗(yàn)。

申請(qǐng)資源

發(fā)起請(qǐng)求前,需要極光后臺(tái)獲取配置:

應(yīng)用設(shè)置-應(yīng)用信息

AppKey:xxxx
Master Secret:xxxx

應(yīng)用設(shè)置-認(rèn)證設(shè)置

iOS-Bundle ID:com.lx.xxx
一鍵登錄-RSA加密公鑰:xxx

密鑰生成:https://xuanxuanblingbling.github.io/ctf/web/2019/05/10/rsa/

RSA公鑰會(huì)在極光返回手機(jī)號(hào)的時(shí)候加密,服務(wù)端用對(duì)應(yīng)的私鑰去解密,獲取手機(jī)號(hào)

認(rèn)證流程和時(shí)序圖

認(rèn)證流程:

  • 客戶端調(diào)用極光認(rèn)證SDK,啟動(dòng)認(rèn)證流程,需要向極光發(fā)起請(qǐng)求
  • 極光返回用戶的token
  • 客戶端將token發(fā)送給服務(wù)端,接口 user/account/shanyan_login
  • 服務(wù)端將客戶端請(qǐng)求中的token,向極光請(qǐng)求返回手機(jī)號(hào),接口:https://api.verification.jpush.cn/v1/web/loginTokenVerify
  • 極光驗(yàn)證token是否有效
  • 極光返回用戶的手機(jī)號(hào)
  • 服務(wù)端返回用戶的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'] ?? '網(wǎng)絡(luò)不給力');
    }
  }

  /// 統(tǒng)一 key
  final String f_result_key = "result";
  /// 錯(cuò)誤碼
  final  String  f_code_key = "code";
  /// 回調(diào)的提示信息,統(tǒng)一返回 flutter 為 message
  final  String  f_msg_key  = "message";
  /// 運(yùn)營商信息
  final  String  f_opr_key  = "operator";
  final Jverify jverify = new Jverify();

  ///初始化平臺(tái)極光SDK
  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initJverifyState() async {

    // 初始化 SDK 之前添加監(jiān)聽
    jverify.addSDKSetupCallBackListener((JVSDKSetupEvent event){
      print("#one login# receive sdk setup call back event :${event.toMap()}");
    });

    jverify.setDebugMode(true); // 打開調(diào)試模式
    jverify.setup(
        appKey: "xxx",//"你自己應(yīng)用的 AppKey",
        channel: "AppStore"); // 初始化sdk,  appKey 和 channel 只對(duì)ios設(shè)置有效
    // 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;

    /// 授權(quán)頁面點(diǎn)擊時(shí)間監(jiān)聽
    jverify.addAuthPageEventListener((JVAuthPageEvent event) {
      print("#one login# receive auth page event :${event.toMap()}");
    });

    preLogin();
  }

  /// 登錄預(yù)取號(hào)
  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# 預(yù)取號(hào)接口回調(diào):${map.toString()}");
          int code = map[f_code_key];
          String message = map[f_msg_key];
          if (code == 7000) {
            ///預(yù)取號(hào)成功彈窗登錄界面
            loginAuth();
          }
          else {
            print("#one login#" + message);
          }
        });
      }
      else {
        print("#one login# [2016],msg = 當(dāng)前網(wǎng)絡(luò)環(huán)境不支持認(rèn)證");
      }
    });
  }

  /// SDK 請(qǐng)求授權(quán)一鍵登錄
  void loginAuth() {
    jverify.checkVerifyEnable().then((map) {
      bool result = map[f_result_key];
      if (result) {
        /// 自定義授權(quán)的 UI 界面,以下設(shè)置的圖片必須添加到資源文件里,
        /// android項(xiàng)目將圖片存放至drawable文件夾下,可使用圖片選擇器的文件名,例如:btn_login.xml,入?yún)?btn_login"。
        /// ios項(xiàng)目存放在 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 = "本機(jī)號(hào)碼一鍵登錄";
        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 設(shè)置隱私條款不選中時(shí)點(diǎn)擊登錄按鈕默認(rèn)顯示toast。
        uiConfig.privacyState = true;//設(shè)置默認(rèn)勾選
        uiConfig.privacyCheckboxHidden = false;
        uiConfig.privacyOffsetY = 35+MediaQuery.of(context).padding.bottom.toInt();// 距離底部距離
        uiConfig.privacyVerticalLayoutItem = JVIOSLayoutItem.ItemSuper;
        uiConfig.clauseName = "用戶服務(wù)協(xié)議";
        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 = ["登錄即同意","和",",","并授權(quán)陌親獲得本機(jī)號(hào)碼"];
        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  ="認(rèn)證服務(wù)協(xié)議";//only ios
        uiConfig.privacyNavTitleTitle1 = "用戶服務(wù)協(xié)議";
        uiConfig.privacyNavTitleTitle2 = "隱私協(xié)議";
        uiConfig.privacyNavReturnBtnImage = "nav_back_black";//圖片必須存在;

        /// 添加自定義的 控件 到授權(quán)界面
        List<JVCustomWidget> widgetList = [];
        /// 步驟 1:調(diào)用接口設(shè)置 UI
        jverify.setCustomAuthorizationView(true, uiConfig, landscapeConfig: uiConfig,widgets: widgetList);

        /// 步驟 2:調(diào)用一鍵登錄接口

        /// 方式一:使用同步接口 (如果想使用異步接口,則忽略此步驟,看方式二)
        /// 先,添加 loginAuthSyncApi 接口回調(diào)的監(jiān)聽
        jverify.addLoginAuthCallBackListener((event){
          print("#one login# 通過添加監(jiān)聽,獲取到 loginAuthSyncApi 接口返回?cái)?shù)據(jù),code=${event.code},message = ${event.message},operator = ${event.operator}");

          if (event.code == 6000) {
            _token = event.message;
            _reqOneLogin();
          }
        });
        /// 再,執(zhí)行同步的一鍵登錄接口
        jverify.loginAuthSyncApi(autoDismiss: true);
      }
    });
  }

參考資料

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容