Apple IDでシングルサインオン!Sign In with Appleはどのように実装するのか #WWDC19

はじめに

さて、WWDC19のキーノートで Sign In with Apple が発表されましたね!これで Apple ID を持っている人であればiOSデバイスから簡単にログインできるようになります。

もっとも重要なポイントは 個人のiPhoneであれば、まず間違いなくログイン状態である という点です。新しいアプリを提供する際に、ログインのステップをシンプルにしつつ、認証されている状態を作れるというわけです。

アプリへの実装

AuthenticationServices フレームワークを使用します。

サンプルコードが提供されているので、そこから実装方法が把握できます。

概ね以下のような感じです。簡単ですね!

import AuthenticationServices

class LoginViewController: UIViewController {
    // ログイン画面を表示
    @objc
    func handleAuthorizationAppleIDButtonPress() {
        let appleIDProvider = ASAuthorizationAppleIDProvider()
        let request = appleIDProvider.createRequest()
        request.requestedScopes = [.fullName, .email]

        let authorizationController = ASAuthorizationController(authorizationRequests: [request])
        authorizationController.delegate = self
        authorizationController.presentationContextProvider = self
        authorizationController.performRequests()
}

// PresentationContextProviderを実装
extension LoginViewController: ASAuthorizationControllerPresentationContextProviding {
    func presentationAnchor(for controller: ASAuthorizationController) -> ASPresentationAnchor {
        return self.view.window!
    }
}

// Delegateでログイン後のトークンを取得
extension LoginViewController: ASAuthorizationControllerDelegate {
    func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
        if let appleIDCredential = authorization.credential as? ASAuthorizationAppleIDCredential {
        }
    }
}

Webページ、Webアプリへの実装

Webページへの実装も非常に簡単です。

こんな感じで実装します。ClientId などは meta タグに入れる方法と、JSで記述する方法の2種類が提供されています。

<html>
    <head>
        <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
        <meta name="appleid-signin-scope" content="[SCOPES]">
        <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
        <meta name="appleid-signin-state" content="[STATE]">
    </head>
    <body>
        <button id="sign-in-with-apple-button"> Sign In with Apple </button>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <script type="text/javascript">
            const buttonElement = document.getElementById('sign-in-with-apple-button');
            buttonElement.addEventListener('click', () => {
                AppleID.auth.signIn();
            });
        </script>
    </body>
</html>

デザインガイドライン

Sign In with Appleボタンを設置するには、ボタンのデザインをガイドライン通りのデザインに準拠している必要があります。Apple Payボタンなどと同様ですね。

登場が待ち遠しい!

Sign In with Appleを使って、超絶簡単なログイン機能を導入できるようになることがとにかく待ち遠しいですね!

シングルサインオンなどもできそうなので、Auth0やCognito User Poolsなどとの組み合わせもできそうですね。

関連情報