[Vue] Apple Sign in with JS (1) - Apple developer setting

애플 로그인은 처음이라 기록을 남깁니다! 생각보다 IOS앱 심사가 까다롭다는걸 이번으로 처음 알게되었습니다 ㅠ ㅠ

1. Apple Developer에 접속 후 로그인한다

2. Account > 인증서, ID 및 프로필 접속

3. App IDs 생성 (Idenrifiers옆에 + 클릭)

4. App IDs 생성시 화면

5. Continue 눌르면 Register an App ID가 나오는데 Description에 App ID를 설명하는 문자(영어 대소문자만 가능)를 넣고 Bundle ID에는 해당 앱의 도메인을 반대로 적은 것 + 앱 이름을 적어줍니다

예시로 쓴 com.test.testApp은 도메인이 test.com이고 appname이 testApp인것으로 생각하여 적었습니다

Explicit와 Wildcard에 대해 간단히 설명하면

1. Explicit는 명시적으로 한개의 App에만 사용하고 싶을 때 적고 Bundle ID도 고유해야합니다

2. Wildcard는 Bundle ID를 com.test.* 로 적을 수 있고, 앱 ID를 하나 이상의 App에 사용할 수 있다는 점에서 Explicit와 다릅니다

저는 Explicit를 사용하겠습니다

6. input창을 채워준 뒤 아래로 내려보면 Capabilities 목록들이 있는데 Sign in with Apple에 체크 해줍니다

체크하면 Edit버튼이 뜨고, 버튼을 클릭하면 모달창이 나옵니다

7. 해당 모달에 적는 EndPoint는 아이디 비번을 치고 로그인 버튼을 누른 후 결과값을 redirect해주는 url이 됩니다

애플 버튼 클릭 > 로그인 창 > 아이디 패스워드 넣은 후 > 로그인 버튼 눌렀을 때 return 되는 url(백엔드)

다 되었다면 최종적으로 저장하면 됩니다

주의할점!

저는 프론트 : Vue, 백엔드 : Laravel 로 분리하여 프로젝트를 진행했습니다 애플 로그인 시 POST로 return해주기 때문에 EndPoint에는 이 POST를 처리해줄 백엔드의 서버 URL을 적어줘야합니다!!!!
처음에 프론트 URL을 적어서 애를 먹었었는데 혼동하지 않으시길 바랍니다!