LoginSignup
20

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-04

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

動作イメージ

スクリーンショット 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対策用の値を入力。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20