Cara Membuat Login User dan Session Check untuk Mobile Aplikasi

  1. Home
  2. Blog
  3. Cara Membuat Login User dan Session Check untuk Mobile Aplikasi
BlogTutorial Komputer

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.

Cara Membuat Login User dan Session Check untuk Mobile Aplikasi

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:

Cara Membuat Login User dan Session Check untuk Mobile Aplikasi

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

Tags: , , ,
Warung Komputer menyediakan layanan Jasa Pembuatan Website, SEO, Digital Marketing dan Jasa Service Laptop/Komputer yang memiliki tenaga ahli professional dan berpengalaman.

Warung Komputer | Your Trusted IT Partner
Telpon/WhatsApp : 0811-1014-930
Email : mail@warungkomputer.co.id
Website : warungkomputer.com

Artikel Terkait

Cara Fetch dan Update Data User menggunakan Mesosfer
Cara Mudah Membuat RecyclerView dengan Multiple View Type di android

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Kategori Artikel

Archives