Sign in with Apple+Cordovaについて #iOS

Sign In with Appleとは

Apple IDでアカウント作成・ログインができる
Touch ID/Face IDで認証できる
登録するメールアドレスをランダムにできる

実装手段は２つ

Sign In with Apple JS
AuthenticationServices (ネイティブ SDK)

とりあえずJS版をCordovaに埋め込むと・・

CordovaはWebView上で動作するので、Sign In with Apple JSで事足りるのでは？と思い、JS版をCordovaに埋め込んでみました。
とりあえず、UIWebVeiw上で動作させてみたところ、SignInボタンをタップすると、ブラウザに飛びました。
※ちなみに、生のUIWebViewだと無反応なので、そもそもUIWebViewは対応していないようです。

WkWebViewの場合は認証のモーダルが開きました。
ただ、CordovaのWebView内だとredirect先にページ遷移してしまうので、SPAで実装するCordovaアプリだとUX的にはネイティブSDK（AuthenticationServices）の方が良さそうです。
※redirect先がディープリンクならページ遷移せずにハンドリングできるかもしれませんが。

AuthenticationServices

AuthenticationServicesはiOS12から追加された認証サービスのフレームワークです。Sign in with Apple関連のAPIも含まれています。

AuthenticationServicesを使用してログインのリクエストすると、認証モーダルが表示されます（Face ID/Touch ID/パスワードの何れかで認証）
取得できる情報はID Token、認可コード、メールアドレス、ユーザーID、ユーザー名などです。

Cordovaプラグイン化

CordovaアプリにおいてJSからネイティブのSDKにアクセスするには、Cordovaプラグインを作成する必要があります。
そこで、作ってみました。
https://github.com/pscsrv/cordova-plugin-apple-login

以下サンプルコードです。
一通りのパラメーターは渡せるようにしています。（各パラメーターの詳細は、Githubに書いてあるAppleのドキュメントを参照してください）

SignInWithApple.request({
 requestedScopes: [ SignInWithApple.Scope.Email ],
 state: '...',
 nonce: '...',
}).then((credential) => {
 // ...
}).catch(error => {
 console.error(error)
})

認証に成功すると、以下のようなオブジェクトが返ってきます。ほぼネイティブSDKのママです。

{
 "authorizedScopes": [],
 "identityToken": "eyJr.....K9NQ", // ID Token
 "authorizationCode": "c5704....eV6sg", // 認可コード
 "realUserStatus": 1,
 "fullName": { // ユーザー名(最初の1回のみ取得可)
   "namePrefix": null,
   "givenName": "Daisuke",
   "nameSuffix": null,
   "middleName": null,
   "familyName": "Kishino",
   "nickname": null
 },
 "email": "XXX@privaterelay.appleid.com", // メールアドレス(最初の1回のみ取得可)
 "state": null,
 "user": "XXX" // ユーザーID
}

サーバー側

サーバー側はCordova特有のことはないですが、一応解説します。以下のような流れになります。

認可コードサーバー側に送る
- ID Tokenでも良いが、リプライ攻撃やID Tokenの検証を考えると、認可コードの方が安全
Appleのtokenエンドポイントに投げて、ID Tokenを取得
ID Tokenの署名や内容を検証して、OKなら会員登録/ログイン

以下フローです。オレンジ枠がAuthenticationServicesの担当箇所です。

ID TokenのPayloadは以下のようになっています。

{
 "iss": "https://appleid.apple.com", // 発行者(Apple)
 "aud": "jp.co.pscsrv.baassampleapp", // 発行先(App)
 "exp": 1569548110, // 有効期限(10分)
 "iat": 1569547510, // 発行時間
 "sub": "XXX", // ユーザーID
 "at_hash": "dP9t…OBDPA", // 認可コードのHash
 "email": "XXX@privaterelay.appleid.com", // メールアドレス
 "email_verified": "true", // ↑が検証済みか？
 "is_private_email": "true", // ↑がPrivateか？
 "auth_time": 1569547508, // ユーザー認証の時刻
 "nonce": "XXX" // リプライ攻撃対策用のランダム値
}

注意点

メールアドレスは初回だけ取得可能です（ユーザーがRevokeすると、再取得可能）
ユーザー名はtokenエンドポイントから返ってこない（AuthenticationServices経由でのみ取得可能）
client_secretはJWT（有効期限最大６ヶ月）
PrivateメールアドレスはTeam ID単位に作成される
ユーザーIDはRevokeされても変わらない。（メアドも変わらない。過去の記事など見ると変わるという記述もあるが・・）

サンプル

Cordovaプラグインの使用サンプルと、サーバー側実装のサンプルです。

Cordovaプラグインの使用サンプル
https://github.com/kishino/cordova-plugin-apple-login-sample

サーバー側実装
https://gist.github.com/kishino/281f13461e975c819161298d35b6de54

さいごに

実際にサンプルを使った感じ、iPhoneでのログインのUXはとても良いです。
CordovaでもSign in with Appleを実装して、より良いログイン体験を目指したいです！