WWDC19 で発表された Sign In with Apple。
ここでは Sign In with Apple JS を使ったサンプルコードについて記しておきます。

サンプルコード

Configuring Your Webpage for Sign In with Apple にあるサンプルコードはこちらになります。

signinwithapple.html

<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>
        <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/ja_JP/appleid.auth.js"></script>
        <!-- 英語(US)版 <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script> -->
    </body>
</html>

~~もしかして JS の日本語版もあるのでは…？と思いましたが、本記事執筆時点では確認できませんでした。~~

動作イメージ

`appleid-signin`の種類

`data-color`

black か white の2種類。ボタンのスタイルを指定する。

`data-border`

ture か false。ボタンにボーダーラインを付けるかどうか。

`data-type`

ボタンのタイプを指定。本記事執筆時点では

sign in
sign up
continue
apple

の4種類。

`data-type`	イメージ
`sign in`
`sign up`
`continue`
`apple`

パラメータ

[CLIENT_ID]

Certificates, Identifiers & Profiles で作成した Services ID の Identifier。

[SCOPES]

スコープ。例: email

[REDIRECT_URI]

Certificates, Identifiers & Profiles で作成した Services ID で Web Authentication Configuration の Return URLs に追加されている URL の中から1つ。

[STATE]

CSRF対策用の値を入力。

Sign In with Apple を Web に実装 - サンプルコード