FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Swift SDKを使って認証機能をデモする(その2:認証機能の実装)

f:id:mbaasdevrel:20210408142707p:plain

NCMBではSwift向けにSDKをリリースしています。最近ではiOSアプリを作る際にSwiftを利用することが増えていますので、その場合にはネイティブ言語で実装されているSwift SDKの利用をお勧めします。

そんなSwift SDKの使い方を知ってもらうためにも、ちょっとしたアプリ(認証アプリ)を作ってみました。徐々に機能を追加していきますので、Swift SDKの利用法をぜひ覚えてください。

各画面への遷移

ContentViewクラスではユーザ情報の表示と、登録/ログイン/ログアウトボタンを追加します。登録ボタンはSignUpView、ログインボタンはLoginViewへ遷移します。

struct ContentView: View, SignUpViewDelegate, LoginViewDelegate {
  @State var user: NCMBUser?
  
  var body: some View {
    NavigationView {
      VStack(alignment: .center) {
        if user == nil {
            Text("ログインしていません")
                .padding()
        } else {
            Text(user!.userName!)
            Text(user!.objectId!)
        }
        NavigationLink(destination: SignUpView(delegate: self)) {
                Text("登録")
        }
        NavigationLink(destination: LoginView(delegate: self)) {
                Text("ログイン")
        }
        Button(action: logOut, label: {
            Text("ログアウト")
        })
      }
    }.onAppear {
        self.user = NCMBUser.currentUser
    }   
  }
  // 省略
}

各ボタンのDelegateは次の通りです。

// ユーザ登録用のDelegate
protocol SignUpViewDelegate {
    func signUp(userName: String, password: String)
}

// ログイン用のDelegate
protocol LoginViewDelegate {
    func login(userName: String, password: String)
}

ユーザ登録画面の実装

f:id:mbaasdevrel:20210408142749p:plain

ユーザ登録画面の表示は次のようになります。入力されるユーザ名 userName とパスワード password をトラッキングします。

struct SignUpView: View {
    @Environment(\.presentationMode) var presentation
    let delegate: SignUpViewDelegate
    @State var userName: String = ""
    @State var password: String = ""
    var body: some View {
        VStack(spacing: 16) {
            TextField("ユーザ名", text: $userName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(maxWidth: 280)
            SecureField("パスワード", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(maxWidth: 280)
            Button("ユーザ登録") {
                delegate.signUp(userName: userName, password: password)
                presentation.wrappedValue.dismiss()
            }
        }
    }
}

ユーザ登録処理の実装

ユーザ登録処理 signUp は ContentView に実装します。ユーザ登録は NCMBUser のインスタンスにある signUpInBackground メソッドを実行します。

func signUp(userName: String, password: String) {
    let user = NCMBUser()
    user.userName = userName
    user.password = password
    user.signUpInBackground(callback: { result in
        switch result {
            case .success:
                // 新規登録に成功した場合の処理
                print("新規登録に成功しました")
            case let .failure(error):
                // 新規登録に失敗した場合の処理
                print("新規登録に失敗しました: \(error)")
        }
    })
}

ユーザログイン画面の実装

f:id:mbaasdevrel:20210408142758p:plain

ユーザ登録画面は表示はほとんど変わりません。ボタンをタップした際に実行する処理が違うくらいです。

struct LoginView: View {
    @Environment(\.presentationMode) var presentation
    let delegate: LoginViewDelegate
    @State var userName: String = ""
    @State var password: String = ""
    var body: some View {
        VStack(spacing: 16) {
            TextField("ユーザ名", text: $userName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(maxWidth: 280)
            SecureField("パスワード", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(maxWidth: 280)
            Button("ログイン") {
                delegate.login(userName: userName, password: password)
                presentation.wrappedValue.dismiss()
            }

        }
    }
}

そしてユーザ登録した時と同じく、login メソッドは ContentView に実装します。

func login(userName: String, password: String) {
    NCMBUser.logInInBackground(userName: userName, password: password, callback: { result in
        switch result {
            case .success:
                // ログインに成功した時の処理
                self.user = NCMBUser.currentUser
            case let .failure(error):
                // 新規登録に失敗した場合の処理
                print("新規登録に失敗しました: \(error)")
        }
    })
}

ログインに成功した際には NCMBUser.currentUser でログインユーザの情報が取得できます。それを ContentView の user に対して設定します。これでログインすると表示が変わるようになります。

f:id:mbaasdevrel:20210408142719p:plain

ログアウト処理

ログアウト処理は画面移動が伴わないので、 ContentView にそのまま実装します。ログアウトがうまくいったら ContentView の user を nil にします。これでログアウト処理が完了です。

func logOut() {
    NCMBUser.logOutInBackground(callback: { result in
        switch result {
        case .success:
            self.user = nil
        case .failure:
            print("ログアウト失敗")
        }
    })
}

まとめ

認証機能はどのようなアプリでも必要になるでしょう。認証することでアクセス権限が利用でき、データをセキュア、安全に管理できるようになります。ぜひmBaaSの認証機能を使ってみてください。

会員管理・認証 (Swift) : 基本的な使い方 | ニフクラ mobile backend

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。