Sign In With AppleをWebページに実装する方法

スポンサーリンク

はじめに

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 Documentation

こちらのサイトで規約を確認し、規約にあうボタンを作成して設置します。

トークンを取得する

次にトークンを取得していきます。Apple Developer上での設定が完了している前提で進めていきます。

PHPなどでAppleの認証画面にリダイレクトさせます。ここで下記のパラメータを設定します。

エンドポイント:https : //appleid.apple.com/auth/authorize

パラメータ
client_idServiceIdに登録したidentifier
redirect_uriAppleDeveloperに登録してあるリダイレクト先
認証完了後に戻ってくるURI
response_typecode id_tokenを指定
scope取得したいデータ(name,email)を指定します
responser_modefrom_postを指定
nonceCSRF対策のためランダムな文字列を指定

こちらのエンドポイントにパラメータを正しく設定し、遷移すると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などに保存しておき、ログインの際に付き合わせてログイン処理を実行する形になります。

コメント