めっっっっっっっっっっちゃ簡単にiOSアプリにログイン機能を導入する

はじめに

みなさん初めまして！ IPFactoryの筋肉担当とっちゃんと申します 初めてのアドベントカレンダーの投稿ですが、今回はFirebaseのAuthenticationを使ってiOSアプリにログイン機能を導入したいと思います！ 僕自身まだまだ初心者なので、改善する余地はいくらでもあるかと思いますが、参考程度に見ていただけると幸いです

事前準備

コードを書く前にFirebaseでプロジェクトの作成やXcodeとの連携、ライブラリの追加など、事前準備が必要なので下記のFirebase公式サイトに載っている「FirebaseをAppleプロジェクトに追加する」を読んで作成、導入してみてください！

FirebaseをAppleプロジェクトに追加する

Firebaseの導入ができたら、FirebaseコンソールのAuthenticationを選んでメール/パスワードでのログインを有効にしてください！

以上で事前準備が完了です

アカウント新規作成画面を作る

いよいよ実装の工程に進みます！！

①レイアウトを配置

メールアドレスとパスワード入力用のTextField、新規登録ボタンを用意します

②ライブラリをインポート
Authenticationをインポートしてください

import FirebaseAuth

③レイアウトをViewControllerと連携

class ViewController: UIViewController {

    
    @IBOutlet weak var mailField: UITextField! 
    @IBOutlet weak var passField: UITextField! 
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    @IBAction func createButton(_ sender: Any) { 
        
    }
    
}

レイアウトを定義しましょう！

④新規作成処理を追加する

@IBAction func createButton(_ sender: Any) {
    Auth.auth().createUser(withEmail: mailField.text!, password: passField.text!) { Result, Error in
        if let Error = Error {
            print("アカウントの新規作成に失敗しました。\(Error)")
            return
        }
            print("アカウントの新規作成に成功しました。")
            //アカウントが正常に作られた際に行いたい処理をここに書く
    }
}

createUserメソッドは、Authでアカウントを新規作成する際に使われるメソッドで、引数のwithEmailとpasswordにmailFieldとpassFieldの文字列を代入することによって、メールとパスワードをセットにしてAuthで管理できるようになります！

試しにテストしたところコンソールに反映されていました
これでアカウント新規作成画面ができました！

ログイン画面を作る

次にログイン画面を作っていきます！

①レイアウトを配置

メールアドレスとパスワード入力用のTextField、そして新規登録ボタンと新規登録画面への遷移用ボタンを用意します
新規登録ボタンはアカウント新規登録画面に遷移できるように設定しておいてください

②ライブラリをインポート
Authenticationをインポートしてください

import FirebaseAuth

③レイアウトをViewControllerと連携

class LoginViewController: UIViewController {


    @IBOutlet weak var mailField: UITextField!
    @IBOutlet weak var passField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        
    }
    
    @IBAction func loginButton(_ sender: Any) {
    }
    
}

新しいViewControllerを作ってレイアウトを定義しましょう！

④ログイン処理を追加する

@IBAction func loginButton(_ sender: Any) {
    Auth.auth().signIn(withEmail: mailField.text!, password: passField.text!){
        Result,Error in
            if let Error = Error {
                print("ログインに失敗しました。\(Error)")
                return
            }
                print("ログインに成功しました。")
                //ログインが成功した際に行う処理をここに書く
    }
}

signInメソッドは、Authで管理されているアカウントにログインする際に使われるメソッドで、引数のwithEmailとpasswordにmailFieldとpassFieldの文字列を代入することによって、Auth内のアカウントと照らし合わせて一致するアカウントにログインすることができます！

確認してみると正しいパスワードでは「ログインに成功しました。」と出力されて、間違ったパスワードでは「ログインに失敗しました。」と出力されています！

これで簡易的ではありますが、ログイン機能を搭載できました！

おまけ

このままでは細かいところが気になるので修正していきます！

まずアカウント新規登録画面にログイン画面に戻ることができるボタンを設けます

    @IBAction func backButton(_ sender: Any) {
        dismiss(animated: true)
    }

アカウント新規登録画面にボタンを設置して、ViewControllerにボタンを定義し、上記のコードを追加するとアカウント登録画面が消去されてログイン画面が出てきます！

そしてもう一つ
このままではメールアドレスやパスワードが間違っていた時に何もアナウンスされないので、アラートで間違っていることをアナウンスしたいと思います。

@IBAction func loginButton(_ sender: Any) {
    Auth.auth().signIn(withEmail: mailField.text!, password: passField.text!){
        Result,Error in
            if let Error = Error {
                print("ログインに失敗しました。\(Error)")
                //ここから追加
                let alert = UIAlertController(title: "メールアドレスかパスワードが正しくありません",message: "入力されたメールアドレスかパスワードが間違っています。確認の上、もう一度お試しください。", preferredStyle: .alert)
                let ok = UIAlertAction(title: "了解", style: .default) { (action) in
                    self.dismiss(animated: true, completion: nil)
                }
                alert.addAction(ok)
                self.present(alert, animated: true, completion: nil)
                //ここまで追加
                return
            }
                print("ログインに成功しました。")
                //ログインが成功した際に行う処理をここに書く
    }
}

上記のコードを追加するとこのようなアラートが出ます

より本格的なログイン機能になりました！

さいごに

今回Firebaseを使って超簡単にログイン機能を実装しました！ 途中端折って説明した部分もありましたが、少しでも参考になれば幸いです

最後までご覧いただきありがとうございました！！