Cherry689 author: cherry689

content

  • 1, the introduction of
  • 2. Principle & Technical scheme
  • 3. Problems & Solutions
  • 4, summarize

Pay attention to

  • The function of Flutter OnePass is a secondary development based on ali Cloud SDK.
  • This sharing mainly focuses on iOS & Flutter codes.

1, the introduction of

1.1. What is OnePass?

OnePass is to automatically obtain the mobile phone number in use, as shown in the following figure (OnePass page of SmartCloud Health Access), which is mainly used to improve user login experience.

1.2. What are the pros and cons of OnePass? I’ve just mentioned a few

2. Principle & Technical scheme

2.1. It is mentioned in the disadvantages that the mobile phone must be connected with cellular data traffic if it wants to use the one-click login function. Then why must it be connected with cellular data traffic?

There is no API for iOS/Android to directly access the user’s phone number information.

  • The SDK provided by the three major carriers (China Mobile, China Telecom, and China Unicom) can directly obtain the mobile phone number of the current data card from the data gateway of the carrier, which saves the whole process of user input from mobile phone number to verification code received by SMS, and reduces user login time.
  • If an APP is restricted to WiFi data but not cellular data, one-click login will not work.
  • In the case of dual cards, only the card connected to cellular data can be retrieved.

2.2 System interaction flow of one-click login

The system interaction flow of one-click login is divided into four steps:

  • 1. Initialize the number authentication SDK.
  • 2. Invoke the license page.
  • 3. Agree to authorize and log in.
  • 4. Initiate the number retrieval.

One-click login involves four interfaces:

  • 1. Switch interface (for whether to use OnePass function)
  • 2. Configure the interface (used to store the key needed for OnePass initialization)
  • 3. Exchange AppToken interface (used to exchange AppToken through carrier’s AccessToken)
  • 4. The server invokes the GetMobile RPC interface to obtain the mobile phone number

2.3 Implementation process of one-click login

  • Native SDK
    • It is mainly based on ali Cloud SDK secondary native packaging components
  • flutter_one_pass
    • Unified functions are written with Flutter (e.g., interface calls, OnePass function, burying point reporting)
  • Lines of business
    • Access all lines of flutter_one_pass

2.4. Comparison of Verification code login, Password login and OnePass login

  • Account Verification Code Login (code_login)

  • Account and password login (password_login)

  • One-click Login (onepass_login)

2.5 Statistics of Login Duration in three Login Modes

The statistics duration of the three login modes is in descending order: onepass_login < code_login < password_login

2.6 Telescope burial site statistics

Buried point code:

Class OnePassReturnCode {/ / / arouse authorization page successful static String loginControllerPresentSuccess = '100001'; / / / arouse the static authorization page failure String loginControllerPresentFailed = '100002'; Static String callPreLoginInAuthPage = '100003'; / / / click return, login user cancelled a key static String loginControllerClickCancel = '200000'; / / / click on the button switch, login user cancelled from dense static String loginControllerClickChangeBtn = '200001'; / / / click the login button event static String loginControllerClickLoginBtn = '200002'; / / / click the CheckBox event static String loginControllerClickCheckBoxBtn = '200003'; / / / click agreement rich text text static String loginControllerClickProtocol = '200004'; }Copy the code

Example:

OnePass.setup(onAppTokenResultCallback: (loginModel) {/ / / TODO: mobile phone number is a key to login button click event buried point TrackerController. PushEvent (', '* * * * - * * * * - * * * * - * * * * *'); }, onOtherModeLoginCallback: () {/ / / TODO: other login mode button click event buried point TrackerController. PushEvent (', '* * * * - * * * * - * * * * - * * * * *'); }, onTrackEventResultCallback: (MSG) {if (MSG) the resultCode = = OnePassReturnCode) loginControllerPresentSuccess) {/ / / TODO: A key to the login page exposure TrackerController. PushPVEvent (' * * * * - * * * * - * * * * - * * * * * '); }});Copy the code

From the point of view of buried data, onepass_login login method is the most (data is sensitive, do not send).

2.7. The gateway counts the number of calls

We pulled The Times of calling onepass_LOGIN, code_LOGIN and password_LOGIN login interfaces from the gateway respectively. Once again, onepass_login is the most popular login method (data is too sensitive to send out).

3. Problems & Solutions

3.1. Background Rounded corner of one-click login button?

From the two pictures I put in the beginning, it is not hard to find that the one-click login button style of other OnePass is basically square and straight, which is the default style provided by the third-party operators. Due to the limited API provided by the third-party operators, only the setting background API is provided. The final solution is as follows: First use UIColor to generate a UIImage, then use UIImage to generate a UIImage with rounded corners, and finally set to the background image of the one-click login button.

3.2. Will there be multiple one-click Login pages when I call Login API for many times?

If you call the Login API for many times, multiple one-click Login pages will pop up. The third-party operators did not do any processing, so we need to optimize the processing in the Native SDK. If you call the Login API for many times, only one one-click Login page will pop up on the page.

3.3. What is the problem of animation when the privacy protocol page is redirected?

In the WebView page provided by Ali Cloud, the animation to jump to the privacy protocol page is presented. If there is a phone or email in the privacy protocol, it cannot be called or jumped. At the same time, clicking the back button from the privacy protocol page directly closes the entire privacy protocol page. We chose to customize the WebView page to solve the above problems.

3.4 Does the Authorization page pop up slowly?

In the initialization of the SDK (setAuthSDKInfo) success, then call prefetching (accelerateLoginPageWithTimeout), it can accelerate the authorization pages pop-up interface (getLoginTokenWithTimeout), access to necessary parameters in advance, Acceleration for the following pop-up authorization page.

4, summarize

The business line is connected to Flutter OnePass. According to online data monitoring, users prefer to use the one-click login function, which indeed improves user login experience. There is a long way to go to optimize user experience, and we will continue to work hard.