SwiftUIでApple認証ボタンをつくる

本日はSwiftUIでこちらのボタンを簡単につくる方法をまとめていきたいとおもいます。

今回はビューだけなので、中身の認証の実装は別になります。

Apple認証ボタン

Sign in with appleに使用するボタンについては、Apple側で ASAuthorizationAppleIDButton という標準のボタンコンポーネントを用意してくれています。

Page Not Found - Apple Developer

The page you requested does not exist.

developer.apple.com

ただ、こちらはUIKitのみ対応だったので、SwiftUIに橋渡しする必要があります。

まずはコンポーネントのビューファイルSignInWithAppleButtonCustomを作成。

import Foundation
import SwiftUI
import AuthenticationServices

struct SignInWithAppleButtonCustom: UIViewRepresentable{

    func makeUIView(context: Context) -> ASAuthorizationAppleIDButton{
        return ASAuthorizationAppleIDButton(authorizationButtonType: .default, authorizationButtonStyle: .black)
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) { }
    
}

UIViewRepresentableで表示したいコンポーネントをとってきて、表示したいUIコンポーネントを返すと、SwiftUI側でViewコンポーネントとして使用できるようになります。

あとは任意の場所で呼び出して、モディファイヤを追加すれば完成です。

            Button(action: {
                //認証
            }, label: {
                SignInWithAppleButtonCustom()
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
            })