웹에서 애플로그인 (Sign In with Apple) 구현을 위한 설정

하이브리드 앱(컨텐츠 영역은 웹 기반으로 제작하고 앱 마켓 등록 및 설치를 위해 네이티브 앱으로 포장된 앱)을 만들면서 웹상에서 애플로그인을 추가해야하는 과제가 생겼습니다.

 

구글에서 애플로그인을 검색하면 네이티브앱개발에 적합한 연동방식 위주로 서칭이 되어 자료를 남겨두고자 합니다.

그런데 네이티브앱 개발자의 뇌피셜에 따르면 애플 개발자 사이트가 자주 바뀌어서 자료를 남겨도 별로 도움이 안될거라고.. ㅠ

 

애플 개발자 계정을 만드는 방법은 생략할게요. (심사기간도 필요하고 어쩌고 듣긴했지만 제가 만든게 아니라서요.)

 

우선 웹에서 애플로그인을 구현하는 방법은 두가지가 있습니다. (네이버나 카카오 소셜로그인도 마찬가지에요)

JS 를 이용하거나 Rest API를 이용하거나입니다.

 

저는 서버간 통신을 위해 rest api 버전으로 구현했습니다.

아래의 사이트는 애플에서 제공하는 도큐멘트입니다.

https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api

Sign in with Apple REST API | Apple Developer Documentation

라라벨 참고 사이트

https://github.com/GeneaLabs/laravel-sign-in-with-apple#Requirements

 

** 저는 MacBook Pro 에서 구현 했습니다. (client_secret 키 생성 시 필요)

 

1. 서비스 ID 추가하기

아래의 사이트로 이동합니다.

https://developer.apple.com/account

 

인증서, 식별자 및 프로파일 > 식별자 클릭

 

로그인 후 위 화면에서 표시된 식별자를 클릭하여 이동합니다.

 

오른쪽 상단의 App IDs 를 클릭하면 메뉴가 표시되고 Services IDs 를 클릭합니다.

 

Register an Services ID 버튼 클릭

 

 

 

Continue 버튼 클릭

 

 

 

Discription 과 Identifier 를 입력후 Continue 클릭하면 마지막으로 확인화면이 뜨고 등록이 완료 됩니다.

 

 

 

등록이 완료되면 위의 화면을 확인 할 수 있고 해당 Identifier 를 클릭하면 설정 화면으로 이동됩니다.

 

 

Sign In with Apple 의 체크박스를 클릭하고 Configure 버튼을 클릭합니다.

 

 

도메인과 Return URLs 를 입력하고 Next 버튼 클릭

 

2.  키 생성

 

왼쪽 메뉴 리스트에서 Keys 선택 > Create a key 로 키 생성

 

 

다운로드 버튼을 클릭하면 .p8 파일이 다운로드됩니다.

해당 파일로 Client secret 정보를 추출해야 합니다.

 

JWT Gem 설치

sudo gem install jwt

 

 

client_secret.rb 파일을 생성하고 아래의 텍스트를 입력합니다.

 

require 'jwt'

key_file = 'key.txt'
team_id = ''
client_id = ''
key_id = ''

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

headers = {
'kid' => key_id
}

claims = {
    'iss' => team_id,
    'iat' => Time.now.to_i,
    'exp' => Time.now.to_i + 86400*180,
    'aud' => 'https://appleid.apple.com',
    'sub' => client_id,
}

token = JWT.encode claims, ecdsa_key, 'ES256', headers

puts token

 

 

team_id 는 상단의 계정 (account) 메뉴를 클릭하여 아래로 쭉 내려오면 멤버십 세부사항에서 확인 가능합니다.

 

 

 

client_id 는  Services IDs 추가할 때 넣어준 Identifier 값입니다.

key_id 는 Keys 생성 시 추출된 값입니다.

 

 

 

 

client_secret.rb 파일내의 값을 다 채워 넣었으면 애플사이트에서 다운로드 받은 .p8 파일을 client_secret.rb 파일이 있는 폴더에 key.txt 파일로 이름을 바꿔 저장합니다.

 

ruby client_secret.rb

 

루비를 실행하면 client secret 값이 추출됩니다.

 

라라벨에서는 추출된 키정보를 .env 에 추가하면 완료됩니다.