Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@treastrain

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

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
treastrain
Swift 🦅 / Core NFC 📶 / Japan NFC Reader 💳
dena_coltd
    Delight and Impact the World

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?