Sign in with Apple JS を使用して日本語のボタン生成やボタンデザインのカスタマイズ方法

みなさんAppleは好きですか
僕は嫌いです。

Sign in with Apple JS の使用方法

ドキュメントに基本的な使い方が記載されてます。

公式から転載

<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>
    <style>
        .signin-button {
            width: 210px;
            height: 40px;
        }
    </style>
    <body>
        <div id="appleid-signin" class="signin-button" 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>

これでボタンが出ます。

ですが、metaを使用したくない場合は以下のようなjsファイルを作成し、htmlに読み込ませると表示されます。ダミーデータでも表示されます（ちょろい）
APIとjsの読み込み順に気をつけてください。

AppleID.auth.init({
  clientId : "xxx",
  scope : "xxx",
  redirectURI: "xxx",
  state : "xxx"
});

基本は以上ですが、他言語のAPIについてやサインアップボタンはどうやって表示するのか一切記載されていないのでどこを見ればいいのかまとめておきます。

日本語API

以下が日本語のAPIです。
https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/ja_JP/appleid.auth.js

なので読み込むjsを変更すれば日本語になります。

<!--英語-->
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

<!--日本語-->
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/ja_JP/appleid.auth.js"></script>

ボタンデザインのカスタマイズ

こちらのボタン生成のページが用意されています。はい。ドキュメントには記載されていないページですね。
ちなみにapple公式のページです。

ボタン生成
https://appleid.apple.com/signinwithapple/button#center-align-button-section

こちらのページの「Download」を押すと今表示されているボタンのPNGファイルがダウンロードされます。
PNGでボタンを作りたい場合はダウンロードした画像はボタンデザインのガイドラインに沿ってるのでそのまま使用して問題ないです。

jsを使用する場合は表示されているボタンの下に

タグのコードが表示されているのでそれをそのままhtmlに載せると同じように表示されます。

<div
  id="appleid-signin"
  data-mode="center-align"
  data-type="sign-in"
  data-color="black"
  data-border="false"
  data-border-radius="15"
  data-width="200"
  data-height="32"
></div>

ロゴを左に寄せたい場合

data-mode="left-align"

なぐり書きですが、そこまで難しくはないと思います

Apple製品は嫌いではないですが、仕事で Sign in with Apple を調査・使用することになりドキュメントを舐めまわしてましたが、ドキュメントに記載されていないことが多々あったので嫌いです。
デザインの規約も多すぎです。少しは妥協できんのか…