Posted at

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 での設定


サンプルコード

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/en_US/appleid.auth.js"></script>
</body>
</html>

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


動作イメージ

スクリーンショット 2019-06-04 14.07.10.png


appleid-signinの種類


data-color

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

スクリーンショット 2019-06-04 14.23.32.png


data-border

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

スクリーンショット 2019-06-04 14.24.25.png


data-type

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


  • sign in

  • sign up

  • continue

  • apple

の4種類。

data-type
イメージ

sign in
スクリーンショット 2019-06-04 14.07.10.png

sign up
スクリーンショット 2019-06-04 14.26.32.png

continue
スクリーンショット 2019-06-04 14.26.55 1.png

apple
スクリーンショット 2019-06-04 14.27.19.png


パラメータ


[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対策用の値を入力。