Cara Membuat Login User dan Session Check untuk Mobile Aplikasi

WarungKomputer.com-Hi guys. Kali ini saya akan melanjutkan postingan tutorial untuk Mobile Aplikasi iOS lanjutan dari sebelumnya. Kalian bisa cek tutorial sebelumnya di warung komputer ya.

Oke, tutorial kali ini adalah tentang Cara Membuat Login User dan Session Check untuk Mobile Aplikasi iOS Menggunakan Mesosfer. Tutorial ini sebelumnya sudah di posting di blog Mesosfer dalam bahasa Inggris. Agar lebih mudah, saya post disini menggunakan Bahasa Indonesia.

Kalau kalian baru mengikuti tutorial ini, saya sarankan cek tutorial sebelumnya di warung komputer. Karena tutorial kali ini akan membutuhkan source code dari tutorial sebelumnya. Untuk detail apa itu Mesosfer dan fiturnya, kalian bisa cek di Mesosfer Website dan Mesosfer Documentation.

Tutorial ini akan tersedia untuk Objective-C dan Swift. Jadi Anda tinggal menyesuaikan dengan bahasa pemrograman iOS kalian ya.

Cara Membuat Login User dan Session Check untuk Mobile Aplikasi

Kelengkapan yang diperlukan

Untuk mengikuti tutorial ini, Anda harus melengkapi beberapa persiapan seperti:

Sign up di Mesosfer Mobile Backend as a Service
Install XCode terbaru. Disini penulis menggunakan Xcode 8.1 (8B62).
Download code dari sesi sebelumnya disini.

Start the Code!

3.1 Design Tampilan Terlebih Dahulu.

Buat tampilan Login di Main.storyboard seperti dibawah ini:

Email Address (UITextField), digunakan untuk memasukkan email.
Password (UITextField), Digunakan untuk memasukkan password.
Login (UIButton), Digunakan untuk mengeksekusi login ke Mesosfer Cloud.
Register (UIButton), Digunakan untuk navigasi ke tampilan register.
Optional : Tambahkan logo (UIImageView) dari aplikasi kalian di atas tampilan login.

Berikut adalah storyboard lengkap untuk tutorial ini:

Splash (UIViewController), merupakan static view yang digunakan untuk memeriksa user session. Jika terdapat User session, Splash akan menunjukkan tampilan utama. Jika tidak, maka akan menunjukkan tampilan login.

Main (UITableViewController embedded in UINavigationController), Digunakan untuk meminculkan main menu jika terdapat User Session.

Login (UIViewController), Digunakan untuk log in user.

Register (UITableViewController embedded in UINavigationController), Digunakan untuk sign up user.

3.2 Referrencing the Outlet

Tambahkan class LoginViewController di project XCode Anda, kemudian tambahkan referencing outlet untuk setiap object library.

Objective-C

@property (weak, nonatomic) IBOutlet UITextField *textEmailAddress;
@property (weak, nonatomic) IBOutlet UITextField *textPassword;

- (IBAction)handleLoginButton:(UIButton *)sender;

Swift

@IBOutlet weak var textEmailAddress: UITextField!
@IBOutlet weak var textPassword: UITextField!

@IBAction func handleLoginButton(_ sender: UIButton) {
    // handle login clicked here...
}

3.3 Lengkapi Code

3.3.1 LoginViewController code lengkap:

Objective-C

#import 

@interface LoginViewController : UIViewController

@property (weak, nonatomic) IBOutlet UITextField *textEmailAddress;
@property (weak, nonatomic) IBOutlet UITextField *textPassword;

- (IBAction)handleLoginButton:(UIButton *)sender;
@end

.m file

#import "LoginViewController.h"
#import "UIViewController+Helper.h"
#import 

@implementation LoginViewController

- (IBAction)handleLoginButton:(UIButton *)sender {
    NSString *email = self.textEmailAddress.text;
    NSString *password = self.textPassword.text;
    
    [MFUser logInAsyncWithEmail:email password:password block:^(MFUser * _Nullable user, NSError * _Nullable error) {
        if (error) {
            [self showErrorWithTitle:@"Error login" error:error handler:nil];
            return;
        }
        
        [self dismissViewControllerAnimated:YES completion:nil];
    }];
}
@end

Swift

import Foundation
import UIKit
import Mesosfer

class LoginViewController: UIViewController {
    @IBOutlet weak var textEmailAddress: UITextField!
    @IBOutlet weak var textPassword: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBAction func handleLoginButton(_ sender: UIButton) {
        let email = self.textEmailAddress.text
        let password = self.textPassword.text
        
        MFUser.logInAsync(withEmail: email!, password: password!) { (user, error) in
            if let e = error as? NSError {
                self.showError(title: "Error login", error: e)
                return
            }
            
            // dismiss this controller
            self.dismiss(animated: true)
        }
    }
}

3.3.2 Ubah nama ViewController menjadi SpalshViewController. Kita akan menggunakan class ini untuk memeriksa sesi user, berikut code lengkapnya:

Objective-C

#import 

@interface SplashViewController : UIViewController

@end

.m file

#import "SplashViewController.h"
#import 

@implementation SplashViewController

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    
    MFUser *user = [MFUser currentUser];
    if (user) {
        [self performSegueWithIdentifier:@"segueMain" sender:self];
    } else {
        [self performSegueWithIdentifier:@"segueLogin" sender:self];
    }
}

@end

Swift

import UIKit
import Mesosfer

class SplashViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        if MFUser.currentUser() != nil {
            // found session user
            self.performSegue(withIdentifier: "segueMain", sender: self)
        } else {
            // session user not found
            self.performSegue(withIdentifier: "segueLogin", sender: self)
        }
    }
}

Jangan lupa untuk merubah nama class untuk splash view controller di Interface Builder -> Identity Inspector.

3.3.3 Buat MainViewController. Kita akan menggunakan class ini untuk memunculkan main menu jika terdapat user session. Untuk tutorial ini, main class menunjukkan menu untuk log out user, code lengkap:

Objective-C

#import 

@interface MainViewController : UIViewController

@end

.m file

#import "MainViewController.h"
#import "UIViewController+Helper.h"
#import 

@implementation MainViewController

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0) {
        [MFUser logOutAsyncWithBlock:^(NSError * _Nullable error) {
            if (error) {
                [self showErrorWithTitle:@"Failed to Logout" error:error handler:nil];
                return;
            }
            
            // successfully logout, dismiss main view controller
            [self dismissViewControllerAnimated:YES completion:nil];
        }];
    }
}

@end

Swift

import Foundation
import UIKit
import Mesosfer

class MainViewController: UITableViewController {
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if indexPath.row == 0 {
            MFUser.logOutAsync(block: { (error) in
                if let e = error as? NSError {
                    self.showError(title: "Failed to Logout", error: e)
                    return
                }
                
                // successfully logout, dismiss main view controller
                self.dismiss(animated: true)
            })
        }
    }
}

4. Kesimpulan

Anda sudah berhasil membuat login dan session check untuk mobile aplikasi iOS. Semoga tutorial ini membantu teman-teman warung komputer yang ingin mengembangkan project di iOS Mobile Apps. Last but not least, kalian tetap harus rajin praktik. Karena semakin sering kalian berlatih, kemampuan membangun mobile apps kalian juga akan semakin mahir.

Untuk tutorial selanjutnya ditunggu ya.

SUMBER:
codepolitan.com