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

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

この記事からわかること

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

＼ アプリをリリースしました ／

みんなの誕生日

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

posted withアプリーチ

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

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でSign in with Appleでログインを実装する方法

【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で入力ボックスを作る方法！

おすすめ記事：【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 {
    // 再認証成功
  }
}

おすすめ記事

【Swift UI/Firebase】Authenticationでログイン状態で起動画面を切り替える方法

【Swift UI/Firebase】AuthErrorCodeでのエラーハンドリング方法！

【Swift UI/Firebase】AuthenticationでSign in with Appleでログインを実装する方法

【Swift UI/Firebase】AuthenticationでGoogleアカウントでログインを実装する方法！

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

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

Swift
Web制作phpjavascriptWordPressSwiftLaravelVue.jsgit/GitHubAWSLinuxAndroid

searchbox

スポンサー

ProFile

ame

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

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

自作iOSアプリ

＼ アプリをリリースしました ／

みんなの誕生日

みんなの誕生日

友達や家族の誕生日を登録しておくと当日に通知が届きお知らせしてくれるiOSアプリです。

貸し借り管理アプリ

貸し借り管理アプリ

お金の貸し借りを管理するためのアプリです。貸借の色が分かれているので識別しやすく、使いやすさを求めてできるだけシンプルなUIにしています。一番人気のアプリです。

カシホン

カシホン

人に貸すことが多く、誰に貸したか忘れがちな本の貸し借りを記録できるアプリです。

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

GitHub-みんなの誕生日
GitHub-貸し借り管理アプリ
GitHub-カシホン

New Article