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