メインコンテンツまでスキップ

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 idclient secretキーをSupabase プロジェクトに追加します。
  • Supabase JS Client Appにログインコードを追加します。

手順

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

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

Apple Developer Portal.

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をクリックします。
  • ConfigURLの下に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」を探します。
  1. コマンドラインから、ruby secret_gen.rb > client_secret.txtを実行します。
  2. これで、client_secretclient_secret.txtに格納されました。

SupabaseにOAuth認証情報を追加

<<<<<<< HEAD

  • Supabaseプロジェクトのダッシュボードに移動します。
  • 左側のサイドバーで、Authenticationアイコンをクリックします(上部付近)。
  • リストからSettingsをクリックし、Authentication Settingsページを表示します。
  • Site URLにアプリの最終的な(ホストされた)URLを入力します(これは重要です)。
  • External OAuth ProvidersApple Enabledをオンにします。
  • 前述の手順で保存したclient_idclient_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()
}

リソース