【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

この記事からわかること

  • Swift/Firebase作成したiOSアプリAuthentication導入する方法
  • Swift UICocoa Pods使用している場合のインストール方法
  • 認証ログイン機能実装方法
  • メールアドレスパスワード組み合わせの使い方
  • パスワードリセットメールログアウトユーザー情報取得再認証のやり方
  • createUserメソッドの使い方
  • createProfileChangeRequestメソッドの使い方
  • sendPasswordResetメソッドの使い方
  • reauthenticateメソッドの使い方
  • Gmailメール届かない

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Firebaseの概要や登録方法については下記記事を参考にしてください。

Authenticationとは?

Firebase Authenticationとは簡単にログイン機能を実装することができるFirebaseのサービスです。ちなみにAuthenticationとは「認証」という意味です。

ログインするためのユーザー情報は基本的なメールアドレスとパスワードを使用した方法だけでなく、電話番号やGoogle、Twitter、GitHub、Facebookなどさまざまなアカウントとの連携が可能になっています。

無料プランでは1日のアクティブユーザーが3000人までに制限され、従量課金制プランでは月間50000人を超えた分だけ課金されていきます。

Authenticationにはログイン機能に必要な機能が色々実装されています。

また今回は解説しませんが、FirebaseUIを使用してログインUIを迅速に構築することも可能になっています。

iOSアプリにAuthenticationを導入する流れ

流れ

  1. Firebaseプロジェクトを作成
  2. ログインする方法を選択
  3. iOSアプリの登録
  4. GoogleService-Info.plistの追加
  5. SDKの導入
  6. 初期化コードの組み込み
  7. 完了

ここでは通常の「Firebaseプロジェクトを作成」や「iOSアプリの登録」の手順は割愛しています。詳細は以下の記事を参考にしてください。

【Swift/Xcode】Firebaseの導入方法!iOSアプリでの使い方

ログインする方法を選択

Firebaseプロジェクトを作成したら、プロジェクト内からAuthenticationを開始していきます。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

始める」をクリックすると以下のような画面になります。ここでログインする方法を選択して追加します。よくあるメールアドレスとパスワードの組み合わせ以外にもGoogleやTwitterなどが用意されています。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

方法を選択し、「有効にする」をクリックします。今回は「メールアドレス/パスワード」のみにしていきます。

おすすめ記事:【Swift UI/Firebase】AuthenticationでGoogleアカウントでログインを実装する方法!

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

ここまできたらプロジェクトにiOSアプリを登録していきます。

【Swift/Xcode】Firebaseの導入方法!iOSアプリでの使い方

GoogleService-Info.plist をダウンロード」をクリックし、ダウンロードした「GoogleService-Info.plist」をドラッグ&ドロップでアプリに入れ込みます。

【Swift/Xcode】Firebaseの導入方法!iOSアプリでの使い方

Copy items if needed」と「Create groups」にチェックを入れて「Finish」をクリックします。

【Swift/Xcode】Firebaseの導入方法!iOSアプリでの使い方

Authentication SDKの導入

Cocoa Pods」を使用して「Authentication SDK」を導入していきます。「PodFile」に以下の一文を追記してpod installを実行します。

pod 'FirebaseAuth'

おすすめ記事:【Swift UI】CocoaPodsのインストール方法と使い方!

最後にアプリのエントリポイント部分に初期化のためのコードを記述していきます。

import SwiftUI
import FirebaseCore // 追加

// 追加
class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication,
                    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        FirebaseApp.configure()
        return true
    }
}

@main
struct TestFirebaseApp: App {
    // 追加
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

これで指定のiOSアプリからAuthenticationを使用できるようにすることができました。

Swift UIを使ってログイン機能を実装してみる

参考文献: Firebase ドキュメント Authentication

ここからはSwift UIを用いてログイン機能を実装してみます。

ログイン機能に必要となるページ

  1. 新規登録画面
  2. ログイン画面
  3. パスワードリセット画面
  4. ログイン後の画面

前提知識:Authenticationを使用する

Swift内でAuthenticationを操作するためにはFirebaseAuthの読み込みが必要です。

import FirebaseAuth // 必須

また認証機能やユーザー情報などを操作するためにAuth.auth()を使ってシングルトンのインスタンスにアクセスします。

Auth.auth()

基本的にそのインスタンスに対して操作をしていきます。

1.新規登録画面の実装

新規登録に必要なユーザーの情報は「名前」、「メールアドレス」、「パスワード」の3つです。まずはUI部分を実装します。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

FirebaseAuthの読み込みを忘れずに記述して、各項目用のTextFieldと登録処理を実装するボタンを配置します。


import SwiftUI
import FirebaseAuth

struct EntryAuthView: View {
    
    @State  var name:String = ""
    @State  var email:String = ""
    @State  var password:String = ""
    
    var body: some View {
        VStack{
            TextField("name", text: $name).padding().textFieldStyle(.roundedBorder)
            TextField("email address", text: $email).padding().textFieldStyle(.roundedBorder)
            TextField("password", text: $password).padding().textFieldStyle(.roundedBorder)
            
            Button(action: {

            }, label: {
                Text("新規登録")
            }).padding()
        }
    }
}

Authenticationを使った登録処理はボタンのアクション内に記述します。コードを1行ずつ見ていきます。


Auth.auth().createUser(withEmail: email, password: password) { result, error in
    if let user = result?.user {
        let request = user.createProfileChangeRequest()
        request.displayName = name
        request.commitChanges { error in
            if error == nil {
                user.sendEmailVerification() { error in
                    if error == nil {
                        print("仮登録画面へ")
                    }
                }
            }
        }
    }
}

パスワードの入力ボックスは以下のように表示/非表示を切り替えられるようにしておくことも可能です。

【Swift UI】パスワード仕様のTextFieldであるSecureFieldで入力ボックスを作る方法!

createUserメソッド

ユーザーを作成する処理createUserメソッドを使用します。引数には登録するメールアドレスとパスワードを渡します。メールアドレスとパスワードを検証後、登録処理の結果がコールバッククロージャーとして受け取れます。


Auth.auth().createUser(withEmail: email, password: password) { result, error in
  if let user = result?.user {
    // 作成成功
  }
}

resultの中にuserが格納されていれば登録は成功です。ここではさらにユーザー情報を編集(名前の追加)していきます。

createProfileChangeRequestメソッド

ユーザー情報を編集するにはまずcreateProfileChangeRequestメソッドを使用してリクエストを作成します。ユーザー変更リクエストが返るのでそのプロパティに名前やプロフィール写真のURLなどを指定することができます。これだけではまだリクエストを作成しただけなのでcommitChangesメソッドを使用して実際にリクエストを反映させる必要があります。


if let user = result?.user {
    // リクエストを構築
    let request = user.createProfileChangeRequest()
    request.displayName = name // 名前を設定
    // リクエストを実行
    request.commitChanges { error in
        if error == nil {
          // 編集成功
        }
    }
}

リクエスト反映に異常がなければユーザーに対してアドレス確認メールを送信します。

sendEmailVerificationメソッド

アドレス確認メールはsendEmailVerificationメソッドを使用します。実行すると指定したユーザー情報のメールアドレスに対して確認メールが送信されます。


request.commitChanges { error in
    if error == nil {
        user.sendEmailVerification() { error in
            if error == nil {
                print("仮登録画面へ")
            }
        }
    }
}

送信されるメールのテンプレートはFirebaseコンソールの「Authentication」>「メールテンプレート」からカスタマイズすることができます。デフォルトの言語も英語になっているので日本語に変更しておきましょう。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

Gmailにメールが届かない?

メールを送信すると以下のような確認メールが対象アドレスに送信されます。しかしテストで自身のGmailアドレスに送信したところメールボックスの中に届かない問題が発生しました。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

探してみると「迷惑メールフォルダ」の中に格納されていたので、Gmailを使用されている場合は注意が必要かもしれません。

これで一連のユーザー登録処理が完了しました。Firebaseコンソールの「Authentication」から登録されているユーザーが確認できます。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

以下は全コードです。



import SwiftUI
import FirebaseAuth

struct EntryAuthView: View {
    
    @State  var name:String = ""
    @State  var email:String = ""
    @State  var password:String = ""
    
    var body: some View {
        VStack{
            TextField("name", text: $name).padding().textFieldStyle(.roundedBorder)
            TextField("email address", text: $email).padding().textFieldStyle(.roundedBorder)
            TextField("password", text: $password).padding().textFieldStyle(.roundedBorder)
            
            Button(action: {
                Auth.auth().createUser(withEmail: email, password: password) { result, error in
                    if let user = result?.user {
                        let request = user.createProfileChangeRequest()
                        request.displayName = name
                        request.commitChanges { error in
                            if error == nil {
                                user.sendEmailVerification() { error in
                                    if error == nil {
                                        print("仮登録画面へ")
                                    }
                                }
                            }
                        }
                    }
                }
            }, label: {
                Text("新規登録")
            }).padding()
        }
    }
}

2.ログイン処理画面の実装

続いて登録されたユーザー情報をもとにログインできる機能を実装していきます。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

まずは必要となるUIを配置します。


import SwiftUI
import FirebaseAuth

struct AuthenticationView: View {
    
    @State  var email:String = ""
    @State  var password:String = ""
    
    var body: some View {
        NavigationView{
            
            VStack{
                TextField("mail address", text: $email).padding().textFieldStyle(.roundedBorder)
                TextField("password", text: $password).padding().textFieldStyle(.roundedBorder)
                
                Button(action: {
                  
                }, label: {
                    Text("ログイン")
                }).padding()
                
                NavigationLink(destination: PasswordResetView(), label: {
                    Text("パスワードリセット")
                })
                
                NavigationLink(destination: EntryAuthView(), label: {
                    Text("未登録の方はこちら")
                })
            }
        }
    }
}

signInメソッド

指定したユーザー情報でログインするにはsignInメソッドを使用します。引数に認証対象のメールアドレスとパスワードを渡します。resultの中にユーザーが格納されていればログイン成功です。

Auth.auth().signIn(withEmail: email, password: password) { result, error in
    if let user = result?.user {
        // ログイン時に閲覧できる画面として画面遷移させる
        print("ログインしました。")
    }
}

3.パスワードリセット画面の実装

ログイン画面と新規登録画面の他にパスワードを忘れた時の救済措置としてパスワードリセット機能を組み込んでおきます。

【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

import SwiftUI
import FirebaseAuth

struct PasswordResetView: View {
    
    @State    var email:String = ""
    
    var body: some View {
        VStack{
            TextField("mail address", text: $email).padding().textFieldStyle(.roundedBorder)
            Button(action: {
                Auth.auth().sendPasswordReset(withEmail: email) { error in
                    // ... 
                }
            }, label: {
                Text("メール送信")
            })
        }
    }
}

sendPasswordResetメソッド

AuthではsendPasswordResetメソッドとしてあらかじめ用意されており、実行すると指定したメールアドレスにリセットメールが送信されます。

Auth.auth().sendPasswordReset(withEmail: email) { error in
  // ...
}
【Swift UI/Firebase】Authentication導入方法と使い方!ログイン機能の実装

これでログイン認証機能を実装することができました。

ログイン中のユーザー情報を取得する

現在ログインしているユーザー情報はcurrentUserプロパティからFIRUserインスタンスを取得しその各プロパティからアクセスできます。

let user = Auth.auth().currentUser

let uid = user.uid
let email = user.email
let photoURL = user.photoURL

ログアウト方法:signOutメソッド

ログアウトするにはsignOutメソッドを使用します。

let firebaseAuth = Auth.auth()
do {
  try firebaseAuth.signOut()
} catch let signOutError as NSError {
  print("Error signing out: %@", signOutError)
}

退会方法:deleteメソッド

ユーザーが退会するためにはログインしているFIRUserインスタンスを取得しdeleteメソッドを実行します。

let user = Auth.auth().currentUser

user?.delete { error in
  if let error = error {
    // エラー発生
  } else {
    // 退会成功
  }
}

退会処理やメインのメールアドレスやパスワードの変更などを行う際はログインから時間が経過するしている場合は再認証を行わないと実行できません

ユーザーの再認証:reauthenticateメソッド

ユーザーを再認証するにはreauthenticateメソッドを実行します。引数には以下のようにクレデンシャル情報を渡します。クレデンシャルとは認証時に用いられる情報の総称です。

 let user = Auth.auth().currentUser
var credential: AuthCredential

// Prompt the user to re-provide their sign-in credentials

user?.reauthenticate(with: credential) { error in
  if let error = error {
    // エラー発生
  } else {
    // 再認証成功
  }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index