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

ボタン SWIFT

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

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

ボタン

Apple認証ボタン

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

Sign in with Apple - Apple Developer
Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.

ただ、こちらは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)
            })

コメント

タイトルとURLをコピーしました