手機號碼一鍵登錄接入

概述

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

申請資源

發(fā)起請求前,需要極光后臺獲取配置:

應用設置-應用信息

AppKey:xxxx
Master Secret:xxxx

應用設置-認證設置

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

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

RSA公鑰會在極光返回手機號的時候加密,服務端用對應的私鑰去解密,獲取手機號

認證流程和時序圖

認證流程:

  • 客戶端調(diào)用極光認證SDK,啟動認證流程,需要向極光發(fā)起請求
  • 極光返回用戶的token
  • 客戶端將token發(fā)送給服務端,接口 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'] ?? '網(wǎng)絡不給力');
    }
  }

  /// 統(tǒng)一 key
  final String f_result_key = "result";
  /// 錯誤碼
  final  String  f_code_key = "code";
  /// 回調(diào)的提示信息,統(tǒng)一返回 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 之前添加監(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",//"你自己應用的 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;

    /// 授權(quán)頁面點擊時間監(jiān)聽
    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# 預取號接口回調(diào):${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 = 當前網(wǎng)絡環(huán)境不支持認證");
      }
    });
  }

  /// SDK 請求授權(quán)一鍵登錄
  void loginAuth() {
    jverify.checkVerifyEnable().then((map) {
      bool result = map[f_result_key];
      if (result) {
        /// 自定義授權(quán)的 UI 界面,以下設置的圖片必須添加到資源文件里,
        /// android項目將圖片存放至drawable文件夾下,可使用圖片選擇器的文件名,例如:btn_login.xml,入?yún)?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 = "用戶服務協(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)陌親獲得本機號碼"];
        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  ="認證服務協(xié)議";//only ios
        uiConfig.privacyNavTitleTitle1 = "用戶服務協(xié)議";
        uiConfig.privacyNavTitleTitle2 = "隱私協(xié)議";
        uiConfig.privacyNavReturnBtnImage = "nav_back_black";//圖片必須存在;

        /// 添加自定義的 控件 到授權(quán)界面
        List<JVCustomWidget> widgetList = [];
        /// 步驟 1:調(diào)用接口設置 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 接口返回數(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)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,565評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,319評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,285評論 2 376

推薦閱讀更多精彩內(nèi)容