One, preface, why do you want to do free login

  • On January 9, 2017, the long-simmered small program was officially launched. Indeed, The concept of Zhang Xiaolong played incisively and vividly, without downloading, scanning code can be used up and go
  • In 2017, the demographic dividend of the Internet came to an end, so the next step is to improve the conversion rate of traffic in addition to intensive cultivation of content. However, on the way of converting traffic into real users, a login and registration entrance blocks the amount of real money thrown by operation activities.
  • Before talking about free login, I would like to talk about the client login, presumably everyone is familiar with, generally need to include the following aspects [parentheses are divided into optional] :
    • SNS third party quick login
    • Email + (verification code) + password for login and registration
    • Mobile phone number + verification code + (password) login and registration
    • (Prompt the user to log in on the machine last time && account)




  • There is no doubt that the third-party login is the most convenient compared with the login and registration of the mobile phone number and email. On the premise that the third-party app has been logged in, the following two steps are required:
    1. The first time a user opens the app, he or she has to tap on a third-party icon
    2. After jumping to the corresponding APP, click the confirm authorization button to return to your app to complete login




but!!!!!!!!!

  • Before the user has not experienced any highlights of your app, why let the user carry out such complicated operations, do not let the user think! Don’t let the user trouble! Especially today, users increasingly attach importance to privacy!! Not to mention some mai east user account password leakage, said a few days ago some Deli with the hands of big data forced a show superior…




I asked you if you owned a Cadillac would you still use an Autonavi? ! (Silently takes out the metro card in his trouser pocket and looks at it.)

  • The conclusion is that users pay more and more attention to their privacy, and they do not want to have any extra thinking when using the app
  • Therefore, after the user download app for the first time to open, to malicious remove all unnecessary box (in addition to the country iOS10 must pop up cellular network permissions, other receive notification, positioning and other permissions in the best need to pop up again)
  • In addition to the special software (such as voip) must use telephone number registered, other similar electric business, content browsing, dating software, tools and other app, should be to avoid landing operation let user experience, the basic function of the app, add some depth to use on the advanced features on a threshold, prompt the user to log in to register

Two, a few common app examples

1. Today’s headlines:
  • After opening the APP, you can enter the app as a tourist, and you can browse the regular news, view comments, collect, share, feedback and other operations
  • A login box is displayed when you perform operations such as Posting news, commenting, and viewing and reading history








Click on more login effects

  • After the login is successful, the saved data is migrated to an official user name
  • If the login operation is triggered when the user sends a comment, the comment is sent after the login succeeds, indicating that the comment is successfully sent
2. Open your eyes daily
  • Similarly, after entering the APP, you can browse normally, and click “like” in the video state to trigger the login. You can see the female benefactor suspended in the pool, enjoying the soft sunshine and gentle breeze. That graceful figure really makes me, as a user, unable to resist logging in, logging out, logging in again…




But!!





If you think I chose this example because of the photo of the heroine, ha ha, I am not such a superficial person, the eye-catching content and design as well as the overall smoothness of the app are all great, but there are two minor flaws here, in the tourist + landscape mode

  • When watching a video, click the “favorites” button to directly modal the vertical screen login box, which is not very friendly to users
  • After a successful login, operations performed before the login are not automatically continued (Favorites)

    The technical implementation of these two points will be discussed later

Iii. Overall process

  1. After the user enters the APP for the first time, it determines whether the user has logged in on the local computer before. If it is the user’s first login, it will be calledVisitor login APIOf course, this tourist guestId is generated by the server according to the device number. In general, one device corresponds to one tourist guestId, and this tourist guestId cannot be displayed to the user (a last login information can also be returned on this interface to remind the user of the last login method).

    IPhone device all kinds of information access portal

  2. Then use this tourist guestId to initialize various parameters, such as database access address, download file path, browsing records and other aspects of the operation statistics, of course, the tourist in general operations, is to use this tourist guestId to interact with the server
  3. Then we need to consider the specific timing of the pop-up login box. Of course, the product characteristics of each app are different, and the login box will generally pop up in the following situations: deep operations such as favorites, comments, purchasing members, ordering and purchasing goods.
  4. There is no popup login box in the following cases: share, user feedback, add to shopping cart, etc., because these operations are users to take the initiative to help share app, put forward suggestions, this time popup login box, it is a mess!
  5. The pop-up login box (note that somehow the screen adaptation), the user to select after log in, access to a formal user’s userId, to initialize parameters, hide the login page, database migration mergers, download content migration path (mostly download requires the user to the corresponding rights, prevent cheating), historical records migration merge, shopping cart content, migration, etc
  6. Finally, continue to do what the user needs to do before logging in (via block)
  7. If a user logs out, the API for logging out is invoked first, and then the API for logging in to tourists is invoked

Code design: Don’t say anything, it’s all in the code

1. First write a popup view method in the global controller management class
/** In most cases, the default way to add directly to the top controller * title: pop-up login box prompt, such as after logging in to comment * block: the user is blocked by the login box operation (note the circular reference) */
- (void)transferControlToPortalViewWithTitle:(NSString *)title block:(void((^)))block;Copy the code
2. Then judge in the click events that prompt visitors to log in for deep operations such as collection
- (void)favoredBtnTapped:(UIButton *)sender {
    // If it is a tourist account, the user will be prompted to log in, otherwise the normal favorites button click event will be carried out
    if ([self.systemAccountManager isGuest]) {
       [self.systemVCManager transferControlToPortalViewWithTitle:@" After login can be favorites operation" block:^{
           [weakSelf doFavoredAction];
       }];
    } else{[selfdoFavoredAction]; }}Copy the code
3. For example, to implement the above mentionedToday’s headlineThe login box in the style of present and modal cannot be used, because then the controller view of the upper level will be moved to another Window, and the effect of adding a translucent mask to the original interface cannot be realized. Therefore, the following method is used
[fatherVC addChildViewController:portalVC];
[fatherVC.view addSubview:portalVC.view];Copy the code
4. Call the previous block in the successful callback to invoke the login interface to continue the user’s previous operation
5. Perform horizontal and vertical screen adaptation
  • Since the view with a translucent background mask is implemented in addChildViewController mode, it automatically ADAPTS to the vertical and horizontal screen of the parent controller. Here we mainly talk about the vertical and horizontal screen adaptation of the traditional login registration page where you click another login method to enter the account password again
- (void)signInWithAccountBtnTapped:(UIButton *)sender {
    SignInController *signInVC = [[SignInController alloc] initWithType:InputViewLogin];

    // Set the modal mode of the controller to follow the environment of the current controller, so that the current screen is modal in horizontal screen mode
    signInVC.modalPresentationStyle = UIModalPresentationCurrentContext;

    [self presentViewController:signInVC animated:YES completion:nil];
}Copy the code
  • Of course, there is also some UI-level adaptation inside SignInController, implementing the following methods inside its viewWillAppear method
// Get the horizontal and vertical screen information of the current page according to the direction of the status bar
UIDeviceOrientation deviceOrientation = (UIDeviceOrientation) [UIApplication sharedApplication].statusBarOrientation;
// According to the horizontal and vertical screen state, make the corresponding UI level adjustment, and make the corresponding mark
if (deviceOrientation == UIDeviceOrientationPortrait ||deviceOrientation ==
    UIDeviceOrientationPortraitUpsideDown) {[self doPortraitUIAdjustment];
    self.isLandScape = NO;
} else{[self doLandScapeUIAdjustment];
    self.isLandScape = YES;
}Copy the code
  • However, running the code found that although the horizontal and vertical display was correct, after clicking the input box, the keyboard was still displayed in portrait mode, because we just adapted the modal mode of SignInController and UI, at this time the controller itself did not know whether it was landscape or portrait. Therefore, the following three controller methods will be overridden
// In landscape mode, the overall landscape should be automatically flipped in both directions according to the device gravity sensing
- (BOOL)shouldAutorotate {
    if (self.isLandScape) {
        return YES;
    } else {
        return NO; }}// In landscape mode, both directions of the landscape camera should be supported, while only Portrait is supported
- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    if (self.isLandScape) {
        return UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight;
    } else {
        return UIInterfaceOrientationMaskPortrait; }}// The default direction- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
    if (self.isLandScape) {
        return UIInterfaceOrientationLandscapeRight;;
    } else {
        return UIInterfaceOrientationPortrait; }}# Warning At this point, horizontal and vertical adaptation is completeCopy the code

The general idea is these, because the project is relatively relevant, and the code implementation is relatively simple, so there is no demo, if you have other questions, welcome to communicate in the message area