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

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

Sign In with Apple を使うために必要な設定等はこちらで解説していますので、ぜひご覧ください。
[Sign In with Apple を Web に実装 – Apple Developer での設定](https://notes.tret.jp/sign-in-with-apple-register/)

# サンプルコード
[Configuring Your Webpage for Sign In with Apple](https://developer.apple.com/documentation/signinwithapplejs/configuring_your_webpage_for_sign_in_with_apple) にあるサンプルコードはこちらになります。

```html: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 の日本語版もあるのでは…？と思いましたが、本記事執筆時点では確認できませんでした。~~

## 動作イメージ
<img width="504" alt="スクリーンショット 2019-06-04 14.07.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/89199372-761f-81d1-13c3-50c10a3140b0.png">

# `appleid-signin`の種類
## `data-color`
`black` か `white` の2種類。ボタンのスタイルを指定する。
<img width="504" alt="スクリーンショット 2019-06-04 14.23.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/5a1c7e13-e783-dd36-e6e1-41145c7742bf.png">


## `data-border`
`ture` か `false`。ボタンにボーダーラインを付けるかどうか。
<img width="504" alt="スクリーンショット 2019-06-04 14.24.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/358440cc-1bab-a73c-d774-45dfa6761e15.png">


## `data-type`
ボタンのタイプを指定。本記事執筆時点では

- `sign in`
- `sign up`
- `continue`
- `apple`

の4種類。

|`data-type`|イメージ|
|:------------------:|:------------------:|
|`sign in`|<img width="504" alt="スクリーンショット 2019-06-04 14.07.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/89199372-761f-81d1-13c3-50c10a3140b0.png">|
|`sign up`|<img width="504" alt="スクリーンショット 2019-06-04 14.26.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/be572314-376f-eb0a-087a-eed473ae1bfa.png">|
|`continue`|<img width="504" alt="スクリーンショット 2019-06-04 14.26.55 1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/057ff20d-30e8-6e97-c792-b6004a3c3901.png">|
|`apple`|<img width="504" alt="スクリーンショット 2019-06-04 14.27.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90125/405bd238-d8e6-a60d-42ad-6f6d4c638c89.png">|

# パラメータ
## [CLIENT_ID]
[Certificates, Identifiers & Profiles](https://developer.apple.com/account/resources) で作成した Services ID の Identifier。

## [SCOPES]
スコープ。例: `email`

## [REDIRECT_URI]
[Certificates, Identifiers & Profiles](https://developer.apple.com/account/resources) で作成した Services ID で Web Authentication Configuration の Return URLs に追加されている URL の中から1つ。

## [STATE]
CSRF対策用の値を入力。