웹에서 Apple 소셜 로그인 기능 만들기

저는 Rails 라는 프론트앤드 프레임워크를 사용하고 있고, 이로 인해 앱 내 상세한 코드 설정은 다를 수 있으나,

Apple Developer 페이지에서 기본 설정하는 부분들은 동일하니, 그 부분까지만 참고해 주시면 더욱 도움이 되실 줄 안내드립니다.

 

진행하기에 앞서 아주 중요한 점 하나 짚고 갈게요!

 

애플 로그인을 구현하려면 반드시! 매년 구독비를 지불해야 합니다. 매년 99달러나!

그러므로 여기서 비용의 문제로 더 이상 진행을 할 생각이 없는 분들은 뒤로가기를 눌러주셔도 됩니다

 

 

Apple 로그인 공식 문서

https://developer.apple.com/sign-in-with-apple/

Sign in with Apple - Apple Developer

 

Apple 로그인을 구현하기 위해서는 아래와 같은 단계를 따르면 됩니다:

1. Apple Developer 계정 생성 Apple 로그인을 구현하기 위해서는 Apple Developer 계정이 필요합니다. 만약 이미 계정을 가지고 있다면 다음 단계로 진행하시면 됩니다. 만약 계정이 없다면 https://developer.apple.com/ 에서 가입을 하시면 됩니다.
2. 애플 개발자 포털에서 애플 로그인 설정 애플 개발자 포털에 로그인을 하시고, 애플 로그인을 설정해주셔야 합니다. 설정하는 방법은 아래와 같습니다:
   • Identifiers 에서 새로운 App ID 를 생성하십시오. App ID 는 웹사이트나 애플리케이션을 식별하는 고유한 문자열입니다.
   • Keys 에서 Sign in with Apple 키를 생성하십시오. 이 키는 애플 로그인에서 사용할 수 있는 키입니다.
   • Certificates, Identifiers & Profiles 에서 Apple Services 항목에서 Sign In with Apple 를 선택하시고, Configure 버튼을 클릭하십시오. 이후에 생성한 App ID 와 Sign in with Apple 키를 선택해주시면 됩니다.

1번의 과정에서 결제 정보를 업데이트 하신 후 지불이 완료가 되신 분들은 2로 넘어와 주세요. 1번의 과정은 개인정보를 넣고 끝이기 때문에 따로 다루지 않겠습니다

 

2번의 Certificates, Identifiers.. 부분은 1의 developer.apple.com 페이지에서 스크롤을 가장 아래까지 내리면 있습니다

Certificates, Identifiers & Profiles 페이지에서

 

---

App ID 생성하기

1) Identifiers탭에서  ⊕ 를 눌러 새로 하나를 만듭니다

2) App IDs 선택

3) App 선택

4) App ID 등록

애플 개발자 콘솔에서 "Register an App ID"를 할 때 Bundle ID는 Explicit으로 입력해야합니다. "Explicit" Bundle ID는 고유하게 식별할 수 있는 식별자입니다. "Wildcard" Bundle ID는 하나의 개발자 계정으로 여러 앱을 만들 때 유용한 것입니다. 하지만 "Sign in with Apple"을 사용하려면 Bundle ID를 Explicit으로 설정해야합니다.

Bundle ID 에는 주소를 거꾸로 적습니다. 예를 들어 자신의 도메인이 bbb.com 이면, com.bbb."여기는적고싶은이름" 와 같이 입력하시면 됩니다. 

 

그리고 스크롤을 내려 Sign In with Apple 을 찾아 체크박스에 표시합니다.

체크박스 체크 후 Register 버튼 클릭

---

Key 생성하기

"Keys" 탭에서 새로운 키를 생성합니다.

 

 

1) Key Name 에 사용하고싶은 이름 입력, Sign in with Apple 선택 후 Coonfigure 클릭

2) 여기서 저희는 방금 만든 App ID 를 선택하면 됩니다

3) 여기서 생성된 Key의 값은 잘 보관하셔야 합니다!!

---

여기까지 오셨다면 Apple 의 소셜 로그인 기능을 하용하기 위한 기초 세팅은 완료가 되었습니다~! 이후의 과정은 사용자의 환경(언어, 프레임워크)에 따라 다르므로, 참고만 하시는 것을 추천드립니다. 저는  Rails 를 통해 진행을 할 예정이에요, 저와 환경이 같으신 분들은 같이 진행을 하셔도 좋습니다. 개발 환경은 너무나 다양하기 때문에 전부 설명드릴 수 없는 점 안타깝습니다 ㅠㅜ

 

그럼 도움이 되셨다면 저는 오늘 하루도 기분이 좋습니다 !! 감사합니다

---

Rails 세팅

 

이후 Rails 설정

1. Rails 애플리케이션에 Devise 추가 이미 Devise를 사용하고 있다면, Devise에 추가로 omniauth-apple gem을 설치해주시면 됩니다. omniauth-apple gem을 설치하려면, Gemfile에 아래한 줄을 추가해주시고 bundle install 을 실행해주세요.

gem 'omniauth-apple'

 

2. config/initializers/omniauth.rb 파일을 생성하고 다음 코드를 추가합니다.

Rails.application.config.middleware.use OmniAuth::Builder do
    provider :apple, ENV['APPLE_APP_ID'], '',
    {
    scope: 'email name',
    team_id: ENV['APPLE_TEAM_ID'],
    key_id: ENV['APPLE_KEY_ID'],
    pem: ENV['APPLE_PRIVATE_KEY']
    }
  end

• APPLE_APP_ID: 애플 개발자 계정에서 생성한 App ID를 입력해야 합니다. App ID는 애플 개발자 계정의 "Certificates, Identifiers & Profiles" 탭에서 "Identifiers" 항목을 선택한 후 "App IDs" 탭에서 확인할 수 있습니다. 
  • 당황하지 마시고 App ID Prefix + '.' + Bundle ID 가 이 값이에요
  • 예를 들어, App ID Prefix가 "ABC123DEFG" 이고 Bundle ID가 "com.mycompany.myapp" 이라면, APPLE_APP_ID 값은 "ABC123DEFG.com.mycompany.myapp" 가 됩니다.
• APPLE_TEAM_ID: 애플 개발자 계정의 Team ID를 입력해야 합니다. Team ID는 애플 개발자 계정의 "Membership" 탭에서 확인할 수 있습니다.
  • https://developer.apple.com/account#MembershipDetailsCard 에서 확인 가능하십니다
• APPLE_KEY_ID: 애플 개발자 계정에서 생성한 Key ID를 입력해야 합니다. Key ID는 애플 개발자 계정의 "Certificates, Identifiers & Profiles" 탭에서 "Keys" 탭에서 확인할 수 있습니다. 
• APPLE_PRIVATE_KEY: 애플 개발자 계정에서 생성한 Key 파일의 내용을 입력해야 합니다. Key 파일은 애플 개발자 계정의 "Certificates, Identifiers & Profiles" 탭에서 "Keys" 탭에서 확인할 수 있습니다. 이 Key 파일은 .p8 확장자를 가지며, 이 파일을 다운로드한 후 내용을 복사하여 환경 변수로 지정해야 합니다.

3. 로그인 버튼 추가

로그인을 하는 html 로 가셔서 이 코드를 추가해주세요

<%= link_to "Sign in with Apple", user_omniauth_authorize_path(:apple) %>

4. 로그인 처리

소셜 로그인 요청을 처리하려면 app/controllers/users/omniauth_callbacks_controller.rb 파일을 생성하고 다음 코드를 추가합니다.

이 파일을 만들고 여기다가 kakao 로그인 google 로그인 들도 하고싶을 때 이 파일에다가 추가하시면 됩니다

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def apple
    auth = request.env['omniauth.auth']
    user = User.where(provider: auth.provider, uid: auth.uid).first_or_create do |u|
      u.email = auth.info.email
      u.password = Devise.friendly_token[0, 20]
    end
    sign_in_and_redirect user, event: :authentication
  end
end

위 코드에서 User 모델은 Devise를 사용하고 있습니다. auth 변수에는 omniauth-apple에서 반환하는 정보가 담겨 있습니다. uid는 Apple ID에 대한 고유 식별자이며, info.email은 사용자의 이메일 주소입니다. sign_in_and_redirect 메서드는 사용자를 로그인시키고 지정된 URL로 리디렉션합니다. 이제 소셜 로그인을 사용할 준비가 끝났습니다. 애플 소셜 로그인 버튼을 클릭하면 사용자는 Apple ID를 사용하여 로그인할 수 있습니다.

---

여러분의 개발 환경 세팅은 저와 다를 수 밖에 없습니다

어디까지나 코드를 참고하여 이해하시고 자신의 지식으로 만들어 활용하세요!

 

 

 

 

정말 긴 시간이었네요.. 먼저 삽질을 한 후 지식을 전해드립니다.

제 포스팅이 도움이 되셨으면 좋겠네요. 역시 애플입니다 어렵고 비싸고 폐쇄적이지만 확실하네요ㅋㅋ