BETA

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

投稿日:2020-03-27
最終更新:2020-03-27

本記事は2019年06月04日に Qiita に投稿した記事を移行したものです。

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 にあるサンプルコードはこちらになります。

<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

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

data-border

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

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

treastrain / Tanaka Ryoga の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう