• 2022/12/3
• 3分

【Swift UI】Sign in with Appleの実装方法！SignInWithAppleButton

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

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

posted withアプリーチ

Swift UIフレームワークを使用している場合での「Sign in with Apple」の実装方法をまとめていきます。Sign in with AppleについてやStoryboardでの実装に関しては以下の記事を参考にしてください。

Storyboard：【Swift】Sign in with Appleの実装方法！Apple IDを使ったログイン機能

Swift UIでSign in with Appleを実装する方法

Swift UIを使用している場合にSign in with Appleを実装する流れをまずは確認してみます。

1. Developer siteでSign in with Appleを有効にする
2. Xcode側でSign in with Appleを追加
3. ボタン&処理を定義

Developer siteでSign in with Appleを有効にする

まずは「Apple Developer site」にアクセスして使用したいApp IDでSign in with Appleを有効にして作成しておきます。既に生成済みであれば「Certificates, IDs & Profiles」から対象のApp IDを編集していきます。

有効にするにはチェックを入れるだけです。

Xcode側でSign in with Appleを追加

続いてXcode側で「Signing & Capability」タブの 「 + 」ボタンをクリックして「Sign in with Apple」を追加します。

これでXcode側の作業も完了です。

AuthenticationServicesフレームワーク

Sign in with Appleの実装はAuthenticationServicesフレームワークとして提供されています。Xcodeの中にはすでに組み込まれているのでimport文を記述することで使用することができます。

import AuthenticationServices

公式リファレンス：Authentication Services

SignInWithAppleButtonでボタンと処理を構築

公式リファレンス：SignInWithAppleButton

Swift UIではSignInWithAppleButton構造体を使用するだけでUIから認証フローの呼び出しまでを構築することができます。

1つ目の引数にボタンのデザインタイプを、2つ目の引数から認証リクエストの構築、3つ目の引数から認証結果に参照することができます。

SignInWithAppleButton(.signIn) { request in
    
} onCompletion: { authResults in
  
}

ボタンのデザインタイプは以下の列挙型の値を指定します。

enum ButtonType : Int, @unchecked  Sendable {
  case `continue` // 継続
  static var `default`: ASAuthorizationAppleIDButton.ButtonType // デフォルト
  case signUp // サインアップ
  case signIn // サインイン
}

リクエスト情報の定義

承認リクエストはASAuthorizationAppleIDRequest型で定義されます。ここは以下のようにしておきます。

SignInWithAppleButton(.signIn) { request in
                    request.requestedScopes = [.fullName, .email]
} onCompletion: { authResults in
  
}

認証結果の取得

公式リファレンス：Result

認証結果はResult型で取得できます。Result型は成功していればsuccess、失敗ならfailureを保持するのでその値によって処理を分岐させます。成功していればログイン処理後に実装したい処理(サーバーにデータを保存など)を行います。

import SwiftUI
import CryptoKit
import FirebaseAuth
import AuthenticationServices

struct AppleAuthView: View {

    @Environment(\.colorScheme) var colorScheme
    
    var isDarkMode: Bool { colorScheme == .dark }
    
    var body: some View {
        VStack {
            SignInWithAppleButton(.signIn) { request in
                request.requestedScopes = [.fullName, .email]
            } onCompletion: { authResults in
                switch authResults {
                case .success(let authResults): 
                    print("完了")
                    break
                case .failure(let error):
                    print(error.localizedDescription)
                }
            }
            .signInWithAppleButtonStyle(isDarkMode ? .white : .black)
            .frame(width: 224, height: 40)
        }
    }
}

これでApple IDでサインインすることができるようになりました。Xcodeのバージョンが古いから(?)なのかシミュレーターではサインインできずにずっとぐるぐるしていたので実機へビルドするとテストすることができるようになります。

また最新のXcodeのバージョンに更新した後ならシミュレーターでも正常に動作を確認することができました。

おすすめ記事：エラー：Sign in with Appleで「登録が完了しませんでした」の解決方法！

ボタンデザインの変更

ボタンのデザインはsignInWithAppleButtonStyleモディファイアを使用することで変更することができます。指定できるのはASAuthorizationAppleIDButton.Styleに用意されている値です。ダークモードに対応できるように設定値によって分岐できるようにしておくと使い勝手が良くなります。

.signInWithAppleButtonStyle(isDarkMode ? .white : .black)

 enum Style : Int, @unchecked  Sendable {
    case black // 黒いボタン
    case white // 白いボタン
    case whiteOutline // 白い輪郭のボタン
}

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

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