はじめに
Sign In with AppleはiOSアプリへの導入が必須になりました。サービスによってはiOSアプリと同じログイン情報でWebサイトへのログインをさせたいということがあるかと思います。
Sign In with AppleをWebページへ導入する方法について説明していきます。
Sign In with AppleをWebサイトに導入する方法
Sign In with AppleをWebサイトに導入する方法は二つあります。
- Appleが提供するSign In with Apple JSを使う方法
- phpなどからAPIを叩いてtokenを取得して使う方法
Sign In with Apple JSは使わずに、APIを叩いてtokenを取得する方法で今回は実装していきます。
ボタンを設置する
まずは、Webページにログインボタンを設置させます。Sign In with Apple JSを使う場合は、jsを設置するだけで、ボタンが表示されます。しかし、今回は使わないので、Appleの公式のボタンを使用します。
こちらのサイトで規約を確認し、規約にあうボタンを作成して設置します。
トークンを取得する
次にトークンを取得していきます。Apple Developer上での設定が完了している前提で進めていきます。
PHPなどでAppleの認証画面にリダイレクトさせます。ここで下記のパラメータを設定します。
エンドポイント：https : //appleid.apple.com/auth/authorize
| パラメータ | 値 |
| client_id | ServiceIdに登録したidentifier |
| redirect_uri | AppleDeveloperに登録してあるリダイレクト先 認証完了後に戻ってくるURI |
| response_type | code id_tokenを指定 |
| scope | 取得したいデータ（name,email)を指定します |
| responser_mode | from_postを指定 |
| nonce | CSRF対策のためランダムな文字列を指定 |
こちらのエンドポイントにパラメータを正しく設定し、遷移するとAppleの認証画面に遷移することができます。
そして、認証することで設定したリダイレクトURIのエンドポイントにPOSTで遷移してくるので、tokenをそこで取得します。
jwtを復号化する
POSTされてくるパラメータ内のid_tokenがjwtになっており、その中にtokenが入っています。id_tokenを複合化していきます。
JWTの複合化はライブラリが存在していますので、そちらを検索して実装していくのがオススメです。ただ、複合化できれば良いのであればbase64でdecodeすれば中の情報を見ることはできますが、appleが発行しているものかの担保ができないので、公開鍵を使用した方法を使うことをお勧めします。
jwtはappleが発行するjwkを元に公開鍵を生成し認証することで、Appleが発行しているjwtであることが担保されるので安全に使用することができます。
tokenを取得する
id_tokenを複合化した中にある、subの値を使ってAppleへログインすることになります。
ですので、この値をDBなどに保存しておき、ログインの際に付き合わせてログイン処理を実行する形になります。
