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

Apple IDでシングルサインオンができるようになります…！

WWDC19

#iPhone

諏訪悠紀

2019.06.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

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

アプリへの実装

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

AuthenticationServices

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

Adding the Sign In with Apple Flow to Your App | Apple Developer Documentation

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

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ページへの実装も非常に簡単です。

Configuring Your Webpage for Sign In with Apple | Apple Developer Documentation

こんな感じで実装します。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>