🙌

OmniAuth を使った Sign in with Apple の実装手順

2022/03/08に公開約1,900字

手順

  1. Apple 用のOmniAuth のライブラリをインストール
  2. 環境変数を設定
  3. OmniAuth の設定ファイルを作成
  4. View にApple サインインのボタンを追加
  5. Apple からのコールバックを受け取るルーティングの作成
  6. Apple からのコールバックを受け取るController の作成

サンプルコード

1. Apple 用のOmniAuth のライブラリをインストール

# Gemfile
gem 'omniauth-apple'
gem 'omniauth-rails_csrf_protection'

2. 環境変数を設定

# .env
APPLE_CLIENT_ID=
APPLE_TEAM_ID=
APPLE_KEY_ID=
APPLE_PRIVATE_KEY=

それぞれ設定する値は以下。すべてApple のDeveloper サイトから持ってくる。

https://developer.apple.com/account/resources/identifiers/list
  • APPLE_CLIENT_ID: 「Certificates, Identifiers & Profiles > App IDs」 の一覧画面から作成したID の Identifier
    • 詳細画面の Bundle ID でも同様の値
  • APPLE_TEAM_ID: チームに紐づくID
    • 上記のID 詳細画面の App ID Prefix でも確認できる
  • APPLE_KEY_ID: 「Certificates, Identifiers & Profiles > Keys」 の一覧画面から作成したキーの Key ID
  • APPLE_PRIVATE_KEY: 「Certificates, Identifiers & Profiles > Keys」 の一覧画面から作成したキーの中身(一度だけダウンロード可能)

3. OmniAuth の設定ファイルを作成

# config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :apple, ENV['APPLE_CLIENT_ID'], '',
    {
      scope: 'email',
      team_id: ENV['APPLE_TEAM_ID'],
      key_id: ENV['APPLE_KEY_ID'],
      pem: ENV['APPLE_PRIVATE_KEY'],
    }
end

4. View にApple サインインのボタンを追加

-# app/views/apple/sign_in.html.haml
= button_to '/auth/apple' do
  -# Apple のサイトからダウンロードしてきたロゴファイル
  = image_pack_tag('media/application/images/logo_sign_in_with_apple_black_small.svg')
  Appleでサインイン

5. Apple からのコールバックを受け取るルーティングの作成

# routes.rb
post '/auth/:provider/callback', to: 'apple/callbacks#create'

6. Apple からのコールバックを受け取るController の作成

class Apple::CallbacksController < ApplicationController
  skip_forgery_protection

  def create
    auth = omniauth_hash
    # TODO: auth を処理してログイン処理
    # NOTE: auth.info で色々取得できる
  end

  def omniauth_hash
    # NOTE: spec でモックしやすいようにこうしている
    request.env['omniauth.auth'] || {}
  end
end

Discussion

ログインするとコメントできます