Appleでログイン

プロジェクトでApple認証を有効にするには、Apple OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。

概要

Apple OAuthは大きく分けて6つのステップで構成されています。

• 「Sign In with Apple」機能を持つApp Idを取得する。
• Service Idの取得 - これはclient_idとして使用されます。
• client_secretの取得に使用するsecret keyを入手します。
• secret keyを使ってclient_secretを生成します。
• client idとclient secretキーをSupabase プロジェクトに追加します。
• Supabase JS Client Appにログインコードを追加します。

手順

Apple Developerアカウントへアクセス

• developer.apple.comにアクセスします。
• 右上のAccountをクリックしてログインします。

App IDの取得

• Certificates, Identifiers & Profilesにアクセスします。
• 左側のIdentifiersをクリックします。
• 左上のIdentifiersの隣にある+マークをクリックします。
• App IDsを選択し、Continueをクリックします。
• Appタイプを選択し、Continueをクリックします。
• アプリの情報を記入します。
  • アプリの説明を入力します。
  • Bundle ID（Appleはドメイン名の逆引きを推奨しています。ドメインがacme.com、アプリ名がrunnerとします。その場合、「com.acme.runner」となります）。
  • 下にスクロールして、Sign In With Appleをチェックします。
  • 右上のContinueをクリックします。
  • 右上のRegisterをクリックします。

Service IDを取得

ユーザーを認証する際にAPIを呼びだす際に、client_idとして使用します。

• Certificates, Identifiers & Profilesにアクセスします。
• 左側のIdentifiersをクリックします。
• 左上のIdentifiersの隣にある+マークをクリックします。
• Services IDsを選択し、Continueをクリックします。
• 情報を記入します。
  • アプリの説明を入力します。
  • Bundle ID（前のステップと同じBundle IDを使用できませんが、先頭に「app.」のように何かを追加して、app.com.acme.roadrunnerなどができます）。
  • このIDを保存してください。このIDは後でclient_idになります。
  • 右上のContinueをクリックします。
  • 右上のRegisterをクリックします。

コールバックURLを入手

次の手順では、次のようなコールバックURLが必要になります。

https://<project-ref>.supabase.co/auth/v1/callback

• Supabaseプロジェクトのダッシュボードにアクセスします。
• 左サイドバーの下部にあるSettingsアイコンをクリックします。
• リストの中のAPIをクリックします。
• ConfigのURLの下にAPI URLがあるので、Copyをクリックしてクリップボードにコピーします。
• 末尾に/auth/v1/callbackを追加することで、完全なOAuth Redirect URIを取得できます。

Service IDを設定

• Identifiersで、新しく作成した「Services ID」をクリックします。
• Sign In With Appleの隣にあるボックスをチェックして有効にします。
• 右側のConfigureをクリックします。
• Primary App IDに新しく作成したBundle IDが選択されていることを確認します。
• Domains and Subdomainsボックスにドメインを追加します（https:// は追加せず、ドメインだけを追加します）。
• Return URLsボックスに、前の手順で入手したアプリのコールバックURLを入力し、右下のNextをクリックします。
• 下部のDoneをクリックします。
• 右上のContinueをクリックします。
• 右上のSaveをクリックします。

Secret Keyをダウンロード

次に、client_secretを生成するために使用するsecret keyファイルをAppleからダウンロードする必要があります。

• Certificates, Identifiers & Profilesにアクセスします。
• 左側のKeysをクリックします。
• 左上のKeysの隣にある+マークをクリックします。
• Key Nameを入力します。
• Sign In with Appleにチェックを入れます。
• 右側のConfigureをクリックします。
• 新たに作成したService IDをドロップダウンセレクターから選択します。
• 右上のSaveをクリックします。
• 右上のContinueをクリックする。
• 右上のRegisterをクリックします。
• 右上のDownloadをクリックします。
• ダウンロードしたファイルを保存します。このファイルには、client_secretを生成するために使用されるsecret keyが含まれています。
• 右上のDoneをクリックします。

client_secretを生成

ダウンロードしたsecret keyは、ユーザー認証に必要なclient_secretの文字列を作成するために使用します。

Appleのドキュメントによると、P-256曲線によるElliptic Curve Digital Signature Algorithm（ECDSA - 楕円曲線DSA）とSHA-256ハッシュアルゴリズムで暗号化されたJWTトークンである必要があります。

現時点では、このJWTトークンを生成する最も簡単な方法はRubyです。Rubyがインストールされていない場合は、こちらからRubyをダウンロードしてください。

• Rubyをインストールします（または、システムにインストールされているかどうかを確認します）。
• ruby-jwtをインストールします。
• コマンドラインで、sudo gem install jwtを実行します。

テキストエディターでsecret_gen.rbというファイル名で、以下の内容でスクリプトを作成します。

require "jwt"

key_file = "Path to the private key"
team_id = "Your Team ID"
client_id = "The Service ID of the service you created"
key_id = "The Key ID of the private key"

validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.

private_key = OpenSSL::PKey::EC.new IO.read key_file

token = JWT.encode(
    {
        iss: team_id,
        iat: Time.now.to_i,
        exp: Time.now.to_i + 86400 * validity_period,
        aud: "https://appleid.apple.com",
        sub: client_id
    },
    private_key,
    "ES256",
    header_fields=
    {
        kid: key_id
    }
)
puts token

1. secret_gen.rbファイルを編集します。

• key_file = "Path to the private key you downloaded from Apple"（Appleからダウンロードしたプライベートキーのパス）には、AuthKey_XXXXXXXX.p8のようにします。
• team_id = "Your Team ID"（チームID）には、Apple Developerサイトの右上（あなたの名前の隣）でみつけることができます。
• client_id = "The Service ID fo the service your created"（作成したサービスのService ID）には、上記手順のService IDを取得で作成したService IDです。このIDを紛失してしまった場合は、Apple Developerサイトでみつけることもできます。
  • Certificates, Identifiers & Profilesにアクセスします。
  • 左側のIdentifiersをクリックします。
  • 右上のドロップダウンでServices IDsを選択します。
  • リストの中から自分のIdentifierを見つけます（例：app.com.acme.roadrunner）。
• key_id = "The Key ID of the private key"（プライベート・キーID）は、ダウンロードした秘密鍵ファイルの名前に含まれています（AuthKey_XXXXXXXX.p8というファイルの場合、key_idはXXXXXXXXXです）。もしこのIDを紛失してしまった場合は、Apple Developerサイトでみつけることができます。
  • Certificates, Identifiers & Profilesにアクセスします。
  • 左側のKeysをクリックします。
  • リストの中から新しく作成したキーをクリックします。
  • Key IDの下にある「key_id」を探します。

2. コマンドラインから、ruby secret_gen.rb > client_secret.txtを実行します。
3. これで、client_secretがclient_secret.txtに格納されました。

SupabaseにOAuth認証情報を追加

<<<<<<< HEAD

• Supabaseプロジェクトのダッシュボードに移動します。
• 左側のサイドバーで、Authenticationアイコンをクリックします（上部付近）。
• リストからSettingsをクリックし、Authentication Settingsページを表示します。
• Site URLにアプリの最終的な（ホストされた）URLを入力します（これは重要です）。
• External OAuth ProvidersでApple Enabledをオンにします。
• 前述の手順で保存したclient_idとclient_secretを入力します。

• Saveをクリックします。

• Go to your Supabase Dashboard.
• In the left sidebar, click the Authentication icon (near the top).
• Click Settings from the list to go to the Authentication Settings page.
• Enter the final (hosted) URL of your app under Site URL (this is important).
• Under External OAuth Providers turn Apple Enabled to ON.
• Enter your client_id and client_secret saved in the previous steps.
• Click Save.

  b4d6d8534a9f838d4e363dc509a3d67657e71da7

クライアント・アプリにログインのコードを追加

JavaScriptのクライアント・コードはこちらに記載：Supabase OAuthクライアントコード

const { user, session, error } = await supabase.auth.signIn({
  provider: 'apple',
})

ボタン、リンク、またはUI要素から呼びだすための関数を追加します。

async function signInWithApple() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'apple',
  })
}

ログアウトするには次の関数を使います。

async function signout() {
  const { error } = await supabase.auth.signOut()
}

リソース

• Apple Developerアカウント
• Rubyドキュメント
• ruby-jwtライブラリー
• Sign In with Appleを設定する方法で全ての作業をしてくれたJanak Amarasena氏に感謝します