Apple로 로그인 경험 개선

Apple로 로그인 경험 개선

Apple로 로그인을 사용하여 앱에서 안전하고 빠르게 인증하는 방법을 알아보세요. 암호 기반 계정을 안전한 단일 탭 로그인 자격 증명으로 업그레이드하는 방법을 보여드리고, 앱에서 사용자 세션의 변경 사항을 원활하게 처리하는 방법을 살펴보겠습니다. 또한 웹 및 기타 플랫폼에서 Apple로 로그인을 활용할 수 있도록 도와드립니다. 이 세션을 최대한 활용하려면 Apple로 로그인 및 REST API에 대해 숙지하시는 것이 좋습니다. 또한 JavaScript에 대한 기본적인 이해가 필요합니다.

리소스
관련 비디오

WWDC22
- 직장 및 학교에서 Apple로 로그인 살펴보기
- 패스키 소개
WWDC20
- Get the most out of Sign in with Apple
- One-tap account security upgrades
다운로드

Ram: 안녕하세요 제 이름은 Ram입니다 저는 계정 경험 팀의 엔지니어입니다 곧 제 동료 Patrick과 함께 앱의 Apple로 로그인 경험을 향상하는 방법에 대해 이야기하겠습니다 Apple로 로그인은 iOS 13에서 도입된 이후로 빠르고 쉬운 계정 설정 및 로그인으로 사랑받았습니다 몇 줄의 코드만으로 양식이나 비밀번호가 필요 없는 빠른 원터치 계정 설정이 가능합니다 모든 Apple로 로그인 계정은 강력한 이중 인증으로 보호됩니다 이미 사용자의 Apple ID를 보호하는 데 사용되고 있죠 사용자와 소통해야 하는 경우 Apple로 로그인은 제대로 작동하는 이메일 주소를 제공합니다 추가 인증이 필요하지 않습니다 Apple로 로그인은 또한 사용자가 실제일 가능성에 대한 지표를 제공합니다 사기를 방지하는 데 도움이 될 수 있습니다 그리고 Apple로 로그인은 직장과 학교에서 사용하는 Apple ID를 포함해 어디에서나 작동합니다 앱을 직장 및 학교 계정과 통합하는 법을 알아보려면 'Discover Sign in with Apple at Work & School' 세션을 확인하세요 이 세션에선 Apple로 로그인 경험을 향상하고 간소화할 수 있는 방법에 대해 설명합니다 먼저 앱에서 기존 자격 증명을 확인하여 중복 계정을 방지하는 방법을 설명합니다 또 Apple ID 자격 증명을 자세히 살펴보고 변경 사항을 모니터링하는 몇 가지 방법을 설명하겠습니다 계정 삭제와 같은 시나리오를 처리하는 방법도 소개합니다 마지막으로 Patrick이 웹 및 기타 플랫폼에서 Apple로 로그인을 통합하는 방법에 대해 설명합니다 시작하죠 Apple로 로그인은 기존의 사용자 이름 및 암호 기반 인증의 편리하고 안전한 대안입니다 사용자는 여전히 암호로 해제하는 계정을 가질 수 있습니다 따라서 사용자에게 이미 작동하는 계정이 있는 경우 앱에 두 번째 계정을 만들지 않는 것이 중요합니다 로그인하는 동안 올바른 결정을 내리도록 안내할 수 있는 방법을 살펴보겠습니다
Apple로 로그인을 사용하는 샘플 앱 Juice입니다 이 비디오의 관련 링크에서 소스 코드를 찾을 수 있습니다
기존 이메일 및 비밀번호나 Apple로 로그인을 사용해 Juice에 로그인할 수 있습니다 사용자가 이미 자격 증명 중 하나를 가지고 있다면 올바른 계정에 로그인하도록 여러분이 도와야 합니다 먼저 비밀번호 자동 완성을 도입해서 기존 비밀번호 자격 증명이 로그인 화면의 키보드에 표시되게 하세요
그러면 사용자는 탭 한 번으로 자격 증명을 입력할 수 있습니다
또한 사용자에게 Apple로 로그인을 통해 비밀번호 기반 계정을 업그레이드할 수 있게 하세요 업그레이드하면 사용자는 보안이 내장된 계정을 갖게 되며 기억해야 할 비밀번호가 하나 줄어듭니다 이것은 계정 인증 수정 확장 프로그램을 사용해 구현됩니다 확장 기반 API는 사용자가 Apple로 로그인을 사용하여 로그인 방식을 업그레이드할 수 있게 해 원활한 경험을 제공합니다
사용자 계정의 보안 업그레이드 제공에 대한 자세한 내용은 'Get the most out of Sign in with Apple' 문서와 'One-tap account security upgrades' 문서를 확인하세요
비밀번호 자동 완성을 제공하는 것 외에도 한 단계 더 나아갈 수 있습니다 앱이 시작되자마자 기존 자격 증명을 제시하는 겁니다 사용자가 로그인 화면에 도달하기도 전에 올바른 계정에 로그인하도록 유도하는 것이죠 Authentication Services API는 이 방면에서 매우 유연합니다 사용자가 Apple로 로그인 자격 증명을 생성하도록 허용하는 것 외에도 암호 기반 자격 증명을 포함한 기존 자격 증명을 제시할 수도 있습니다
도입 방법은 정말 쉽습니다 몇 가지 코드를 안내해 드리겠습니다 이미 Authentication Services API를 사용하고 있다면 이 코드가 매우 익숙할 겁니다
ASAuthorizationController의 인스턴스를 생성하고 ASAuthorizationAppleIDProvider와 ASAuthorizationPasswordProvider를 인증 요청 배열에 모두 포함합니다 그런 다음 인터페이스를 표시하는 데 도움이 되는 대리자와 개체를 설정해야 합니다 마지막으로 인증 컨트롤러에서 preferImmediatelyAvailableCredentials 옵션과 함께 performRequests를 호출합니다 이 옵션은 iOS 16의 새로운 기능입니다 장치에서 즉시 사용할 수 있는 자격 증명만 원한다고 시스템에 알리는 기능이죠 특히 앱 실행 시 호출되도록 되어 있습니다
이전 iOS 버전을 지원하려면 performRequests를 사용할 수 있습니다 이렇게 하면 기존 자격 증명 목록이 표시됩니다 이제 사용자는 기존 Apple로 로그인 자격 증명이나 기존 암호 자격 증명 중에서 선택할 수 있습니다 사용자가 자격 증명을 선택하면 시스템이 ASAuthorizationController delegate에서 didCompleteWithAuthorization을 호출합니다 사용자가 Apple로 로그인을 선택한 경우 appleIDCredential으로 진행하게 됩니다 사용자가 암호 기반 계정을 선택한 경우 반환된 passwordCredential로 로그인합니다 사용자에게 기존 자격 증명이 없는 경우 API는 사용자에게 Apple로 로그인을 표시하지 않습니다 대신 시스템은 didCompleteWithError를 호출합니다 이럴 땐 표준 로그인 흐름을 표시하도록 해야 합니다 그건 그렇고 이 Authentication Services API는 패스키로도 원활하게 작동합니다 비밀번호를 대체하는 차세대 인증 기술인 패스키에 대해 자세히 알아보려면 'Meet passkeys' 세션을 확인하세요 몇 줄의 코드만으로 모든 로그인 경험의 이점을 누릴 수 있습니다 사용자가 올바른 계정을 선택하도록 도우면 시스템에 중복 계정이 생성되는 일을 방지할 수 있습니다
Apple ID 자격 증명을 자세히 설명하겠습니다
아시다시피 Apple로 로그인을 사용해 성공적인 인증 후 받는 응답은 ASAuthorizationAppleIDCredential 개체입니다 여기에 포함된 값은 user fullName, email realUserStatus identityToken 및 authorizationCode입니다 각각에 대해 간략하게 설명하겠습니다 User는 고유하고 안정적인 식별자입니다 개발자 팀의 모든 앱에서 동일한 식별자입니다
이걸로 시스템에서 사용자를 고유하게 식별할 수 있습니다 필요한 경우에만 fullName을 요청해야 합니다 사용자는 원하는 이름을 공유할 수 있습니다 사용자와 소통하고 싶다면 이메일을 요청해야 합니다 사용자는 이메일 주소를 공유할 두 가지 옵션이 있습니다 하나는 Apple ID와 연결된 이메일을 공유하는 것입니다 아니면 'hide my email' 기능을 사용할 수 있습니다 그러면 받은 편지함으로 라우팅되는 숨겨진 이메일 주소가 생성됩니다 양방향 릴레이이므로 회신도 처리할 수 있습니다
어떤 옵션을 선택하든 이메일 주소는 이전에 Apple에서 확인했으며 사용할 준비가 된 주소입니다 모든 계정에 연결된 이메일이 있는 것은 아닙니다 따라서 이메일을 요청하더라도 해당 값이 없는 시나리오에 대처할 준비를 해야 합니다
RealUserStatus는 사용자가 실제일 가능성에 대해 신뢰도가 높은 지표입니다 개인 정보를 보호하면서 온디바이스 머신 러닝과 계정 기록 및 하드웨어 증명을 사용해 수치를 계산합니다 realUserStatus에는 세 가지 유형이 있습니다 'Likely real'은 사용자가 실제로 보인다는 뜻입니다 이 사용자에게는 CAPTCHA 같은 추가 사기 확인을 건너뛰는 등 최상의 경험을 제공하세요 'Unknown'은 시스템에서 사용자가 실제 사람인지 확인하지 못한 경우입니다 추가 확인 단계가 필요한 정보가 제한된 계정과 같은 수준으로 이 사용자를 신뢰하세요 사용자는 여전히 실제일 수 있으므로 앱 사용을 차단하지 마세요
마지막으로 'unsupported'는 시스템이 결정을 할 수 없음을 의미합니다 이것도 말해야겠군요 fullName, email realUserStatus와 같은 속성은 계정이 처음 생성될 때만 반환됩니다
이후 로그인 시에는 반환되지 않습니다 따라서 시스템에서 계정을 확인할 수 있을 때까지 fullName, email 같은 속성을 안전하게 캐시하세요
identityToken은 JSON 웹 토큰으로 사용자 정보를 포함하여 앱 서버에 필요한 데이터 대부분을 포함합니다 인증에 대한 업계 표준 접근 방식이죠 JSON 웹 토큰 또는 JWT는 세 부분으로 구성됩니다 base-64 URL 인코딩 헤더 base-64 URL 인코딩 페이로드 그리고 Apple 서명 응답이 변조되지 않았는지 확인하려면 Apple의 공개 키로 서명을 확인해야 합니다 키는 당연히 Apple ID 서버에서 가져옵니다 앱 서버가 토큰의 가용성을 확인하는 것도 마찬가지로 중요합니다 페이로드를 디코딩한 후 발급자가 appleid.apple.com인지 확인해야 합니다 대상 필드가 앱의 번들 식별자인지 확인하세요 그리고 만료 타임스탬프가 현재 시간보다 커서 토큰이 유효한지 확인하세요 Subject는 사용자 식별자입니다 사용자의 이메일 주소를 요청한 경우에도 포함됩니다 realUserStatus도 찾을 수 있습니다 'unsupported'의 경우 값은 0이 됩니다 1은 'unknown' 2는 'likely real'입니다 마지막으로 nonce가 권한 부여 요청을 생성하기 전에 생성된 것과 동일한지 확인하세요
nonce 및 인증 프로세스를 보호하고 반복 공격을 완화하는 법을 자세히 알아보려면 'Get the most out of Sign in with Apple' 세션을 확인하세요
AuthorizationCode는 수명이 짧은 일회용 토큰입니다 refresh 토큰 대신 Apple ID 서버에 제공할 수 있습니다 시스템이 이미 OAuth 2.0과 같이 개방형 표준을 사용한다면 이미 잘 아실 수도 있습니다 refresh 토큰을 생성하려면 인증/토큰 엔드포인트에 post 요청을 보내야 합니다 방금 받은 인증 코드와 함께 클라이언트 ID와 클라이언트 암호를 전달합니다 클라이언트 암호를 만드는 방법에 대한 자세한 설명은 Apple Developer 문서에서 확인할 수 있습니다 응답에서 refresh 토큰 access 토큰 그리고 전에 받은 것과 유사한 새 ID 토큰을 받게 됩니다 만료된 access 토큰이 있는 경우 refresh 토큰으로 같은 엔드포인트를 사용해 새 access 토큰을 얻을 수 있습니다 같은 refresh 토큰을 무효화될 때까지 계속 사용할 수도 있습니다 토큰 확인에 실패하거나 사용자 세션이 변경된 경우 토큰이 무효화될 수 있습니다
사용자 세션 하니 말인데요 자격 증명 상태 변경을 처리하고 모니터링하는 방법에 대해 설명하려 합니다 ID 토큰을 확인한 후 앱이 사용자 세션을 관리하게 됩니다
사용자 세션 변경이 발생하는 시나리오는 다양합니다 예를 들어 사용자가 설정에서 앱의 Apple ID 사용을 중지하거나 기기에서 로그아웃할 수 있습니다 세션 변경을 정상적으로 처리하려면 ASAuthorizationAppleIDProvider에서 getCredentialState(forUserID:)를 호출하세요 이 API는 앱이 실행되자마자 호출하거나 상태를 확인하려는 시점에 호출하는 것이 좋습니다 또한 자격 증명이 취소될 때 앱에 알림이 전송되도록 credentialRevokedNotification을 관찰해야 합니다 상태가 변경되면 다른 사용자가 로그인했다고 가정하고 현재 사용자를 앱에서 로그아웃해야 합니다 앱 서버가 있는 경우 서버 간 알림을 구독해야 합니다 서버는 사용자 및 해당 계정에 대한 중요한 업데이트를 수신합니다 다음 시나리오에 대해 앱 그룹 각각에 알림이 전송됩니다 사용자가 메일 전달 기본 설정을 비활성화하거나 활성화할 때 사용자가 앱에서 Apple ID 사용을 중단할 때 또는 사용자가 Apple ID를 영구적으로 삭제할 때 알림 수신을 시작하려면 먼저 Apple Developer 포털에서 엔드포인트 URL을 등록해야 합니다 모든 이벤트는 동일한 엔드포인트 URL에 도착합니다 이벤트는 Apple에서 서명한 JSON 웹 토큰으로 전송됩니다 메일 전달이 비활성화된 경우 JWT의 페이로드에서 email-disabled 이벤트를 받게 됩니다
사용자가 앱에서 Apple ID 사용을 중단하면 consent-revoked 이벤트를 받게 됩니다 이 이벤트를 받으면 모든 활성 사용자 세션을 꼭 무효화해야 합니다
사용자가 Apple ID를 삭제하면 account-delete 이벤트를 받게 됩니다 다시 말하지만 활성 사용자 세션을 무효화하고 프로세스에 따라 계정을 업데이트하세요
이제 계정 삭제에 주목해 봅시다 계정은 우리 신분의 일부이며 우리는 계정을 사용해 가장 개인적이고 사적인 데이터를 관리합니다 누군가 자신의 계정을 삭제하려고 할 수 있으니 앱에서 이를 지원해야 합니다
앱에서 계정 삭제를 시작하는 방법을 제공해야 합니다 전체 삭제 프로세스의 관리는 여러분의 책임입니다
사용자 정보를 저장하는 앱 서버가 있다면 일반적으로 앱은 사용자 계정을 삭제하도록 서버에 알립니다 이제 삭제 프로세스에 Apple로 로그인을 포함할 수 있습니다 서버는 앱과 연결된 계정을 삭제하기 위해 새 REST 엔드포인트를 사용합니다 이 API에 대해 간략히 안내해 드리겠습니다 계정을 삭제하려면 사용자에 대해 유효한 refresh 토큰이 있거나 access 토큰이 있어야 합니다 토큰이 없는 경우 인증/토큰 엔드포인트를 사용하여 생성할 수 있습니다 토큰 중 하나가 있으면 인증/취소 엔드포인트를 필수 매개변수와 함께 사용할 수 있습니다 refresh 토큰을 사용할 때 토큰 유형을 REFRESH_TOKEN으로 설정하세요
access 토큰으로 삭제하려면 유형을 ACCESS_TOKEN으로 설정하세요 성공적인 응답을 받으면 토큰과 사용자의 활성 세션이 즉시 무효가 됩니다
계정을 삭제했다가 앱으로 돌아와서 Apple로 로그인을 사용하는 사용자는 처음 계정을 만들 때와 비슷한 경험을 하게 됩니다
제 설명은 끝났으니 제 동료 Patrick에게 순서를 넘기겠습니다 웹 및 기타 플랫폼에서 Apple로 로그인을 사용하는 방법에 대해 알려드릴 겁니다
Patrick: 고마워요, Ram! 사람들은 Apple로 로그인이 모든 Apple 플랫폼에서 원활하게 작동하는 점을 아주 좋아합니다 하지만 거기서 끝이 아니죠 Apple로 로그인은 웹 및 기타 플랫폼에서도 원활하게 작동합니다 웹 및 기타 플랫폼 지원을 위해 Apple로 로그인 경험을 향상시킬 수 있는 방법에 대해 알아봅시다
Ram이 아까 소개한 Juice라는 기존 iOS 앱이 있습니다 Juice를 웹으로 확장해 더 많은 사용자에게 제공하고 싶다고 합시다 유사한 앱을 함께 그룹화하는 방법을 먼저 설명하겠습니다
사용자 경험을 간소화하기 위해 관련 앱을 그룹화하는 것이 좋습니다 관련 앱을 그룹화하면 사용자는 앱에 정보 공유를 한 번만 동의하면 됩니다
예를 들어 앱을 iOS 및 macOS에서 사용할 수 있지만 플랫폼마다 다른 번들 식별자를 사용하고 있을 수 있습니다 그런 경우 앱을 그룹화하는 것이 좋습니다 Apple로 로그인을 사용할 때 기본 앱으로 설정한 앱의 앱 아이콘이 사용자에게 표시됩니다 웹사이트에서 Apple로 로그인을 지원하게 Services ID를 구성하는 방법을 알아보겠습니다 먼저 Apple Developer 포털에 로그인하고 'Certificates, Identifiers & Profiles'로 이동하세요
Services ID 옆의 라디오 버튼을 선택하고 'Continue'를 클릭하세요
Service에 대한 설명을 입력하세요
Service의 고유 식별자를 입력하고 Continue를 클릭하세요
Apple로 로그인 옆의 확인란을 클릭하고 Configure 버튼을 클릭하세요 Web Authentication Configuration 화면에서 드롭다운 메뉴에서 Primary App ID를 선택하세요
그런 다음 웹사이트에서 Apple로 로그인을 지원하는 데 사용할 도메인 및 하위 도메인을 입력하세요 마지막으로 Apple의 리디렉션 URL을 입력하여 성공적인 승인 후 사용자를 앱이나 웹사이트로 다시 리디렉션합니다 그게 다예요! 그러면 웹사이트에서 Apple로 로그인을 지원하도록 Services ID를 구성을 마친 겁니다 Apple로 로그인을 지원한다는 것을 사용자에게 표시하려면 버튼이 필요합니다 Apple은 Apple 버튼 이미지로 로그인을 생성할 수 있도록 고도로 구성 가능한 버튼 API를 제공합니다
앱이나 웹사이트에서 원하는 버튼을 사용자 지정하고 포함할 수 있습니다 Apple로 로그인 JS는 웹에서 Apple로 로그인을 훨씬 쉽게 통합할 수 있게 하는 간단한 JS 프레임워크입니다 응용 프로그램이나 웹사이트에서 Apple로 로그인 Javascript 프레임워크를 포함하는 것부터 시작하세요 이 간단한 API를 사용하면 사용자를 인증하고 다양한 자산을 얻을 수 있습니다 하나의 간단한 DIV로 생성할 수 있는 Apple로 로그인 버튼처럼요 버튼의 속성을 수정하여 앱이나 웹사이트에 맞게 사용자 지정할 수도 있습니다
예를 들어 이 속성을 사용하면 흰색 'Apple로 로그인' 버튼이 표시됩니다 테두리와 기본 모서리 반경이 정해져 있습니다 data-color 속성을 변경하면 버튼 배경색을 바꿀 수 있습니다 data type을 'continue'로 바꾸면 버튼 텍스트가 업데이트되어 'Continue with Apple'이 표시됩니다
또는 data mode 속성을 logo-only로 설정해서 로고만 있는 버튼을 만들 수 있습니다 Apple로 로그인 JS Button API는 더욱 많은 사용자 맞춤형 속성을 제공합니다 Apple로 로그인 버튼 리소스를 참조하면 이렇게 많은 옵션을 쉽게 구성할 수 있습니다
REST API를 사용하여 Apple로 로그인 버튼을 생성하려는 경우 Apple ID 버튼 엔드포인트 중 하나를 사용해 생성할 수 있습니다 중앙 정렬, 왼쪽 정렬 로고 버튼 각각에 별개의 엔드포인트가 있습니다 쿼리 매개변수를 사용하여 버튼을 정의할 수 있습니다 이 예시 요청에서는 테두리가 있는 흰색 Apple로 로그인 버튼을 사용자 지정하겠습니다 사용자 지정 버튼을 PNG 이미지로 받았습니다 Apple로 로그인 버튼을 개인화했으므로 이제 사용자를 인증할 차례입니다 Apple에 필요한 매개변수와 함께 승인 요청을 보내야 합니다 사용자가 성공적으로 로그인하기 위해 필요한 매개변수입니다
이미 Apple 플랫폼에서 Apple로 로그인을 구현했으므로 이러한 매개변수는 매우 친숙합니다
먼저 client ID를 설정해야 합니다 여러분의 앱이나 웹사이트를 위해 Apple Developer 포털에서 생성한 Services ID입니다
그 다음 앱이나 웹사이트에 이메일이나 이름이 필요한 경우 'scope' 매개변수를 입력합니다 여러 scope를 요청한다면 공백으로 구분하세요 필요한 데이터만 요청해야 합니다
Redirect URI 매개변수는 Apple Developer 포털에서 이전에 등록한 URL을 추가할 위치입니다 Apple이 사용자를 웹사이트로 리디렉션하도록 Apple에 알려줍니다
요청을 보호하기 위해 state와 nonce를 추가할 수도 있습니다
마지막으로 'use Pop up' 매개변수를 사용하여 별도의 팝업 창에서 로그인 화면을 표시하게 하거나 기존 창이 Apple 로그인 웹사이트로 리디렉션되도록 할 수 있습니다 Safari를 사용하는 경우 다음과 같은 기본 화면이 표시됩니다 웹사이트에 로그인할 때 최고급 경험을 선사하죠 Apple ID 서버가 승인 요청을 처리하고 나면 승인 결과를 포함한 DOM 이벤트를 받게 됩니다 성공 응답을 처리하려면 'AppleIDSignInOnSuccess'에 event listener를 추가하세요
실패 응답을 처리하려면 'AppleIDSignInOnFailure'에 event listener를 추가하세요
승인이 성공하면 승인 코드와 ID 토큰 또 요청한 경우 사용자 정보가 포함된 응답을 받게 됩니다 이는 Apple 플랫폼에서 여러분에게 익숙할 응답과 유사합니다 REST API를 사용해 Apple ID 서버에 직접 통합하려는 경우 필수 매개변수를 사용해 승인 엔드포인트로 승인 요청을 보내세요 승인에 성공하면 승인 코드와 ID 토큰 사용자 정보가 포함된 응답을 받게 됩니다 이는 Apple 플랫폼에서 이미 여러분에게 익숙할 응답과 유사합니다 그걸로 끝입니다! 웹사이트에 Apple로 로그인을 성공적으로 채택한 겁니다! 마무리로, Apple로 로그인을 구현하는 동안 염두에 두어야 할 중요 사항을 강조하고 싶습니다
앱에 중요한 계정 기반 기능이 필요한 경우가 아니면 사람들이 로그인 없이 앱을 사용할 수 있도록 합니다 예를 들어 사용자가 Apple Pay를 사용해 항목을 구매하도록 허용할 수 있습니다 구매가 완료된 후 선택적으로 계정에 구매를 연결하도록 제안합니다 기존 사용자에겐 사용자 이름 및 비밀번호 인증 대신 계정 보안을 업그레이드할 수 있는 Apple로 로그인을 제안하세요 사용자를 식별하기 위해서만 고유 식별자가 필요한 경우 이름이나 이메일을 수집하지 마세요 Apple로 로그인을 통해 이메일을 수집하는 경우 사용자의 선택을 존중해야 합니다 추가 이메일을 요청해서는 안 됩니다
앱 또는 웹사이트를 쓸 수 있는 모든 플랫폼에서 Apple로 로그인을 구현하는 것이 중요합니다 사용자는 여러 플랫폼을 사용할 수 있으며 어디서나 Apple로 로그인을 사용할 것으로 예상됩니다 여러분의 앱에서 Apple로 로그인으로 해낼 일이 정말로 기대되며 피드백을 기다리겠습니다 시청해주셔서 감사합니다 남은 WWDC도 즐기세요!

// Requesting both Sign in with Apple and password-based accounts.

import AuthenticationServices

let controller = ASAuthorizationController(authorizationRequests: [
    ASAuthorizationAppleIDProvider().createRequest(),
    ASAuthorizationPasswordProvider().createRequest()
])

controller.delegate = self
controller.presentationContextProvider = self

if #available(iOS 16.0, *) {
    controller.performRequests(options: .preferImmediatelyAvailableCredentials)
} else {
    controller.performRequests()
}

5:14 - ASAuthorizationControllerDelegate Implementation

// ASAuthorizationControllerDelegate

func authorizationController(controller: ASAuthorizationController,
                             didCompleteWithAuthorization authorization: ASAuthorization) {
    switch authorization.credential {  
		case let appleIDCredential as ASAuthorizationAppleIDCredential:
        // Sign the user in with Apple ID credential.
        // ...

    case let passwordCredential as ASPasswordCredential:
       // Sign the user in with password credential
       // ...
   }
}

func authorizationController(controller: ASAuthorizationController, 
   didCompleteWithError error: Error) {
    // No credential found. Fall back to login UI.
}

12:00 - Checking Credential State

// Check User Credentials on app launch

let appleIDProvider = ASAuthorizationAppleIDProvider()
appleIDProvider.getCredentialState(forUserID: "currentUserIdentifier") 
{ (credentialState, error) in
    switch(credentialState){
    case .authorized:
        // Found valid Apple ID credential
    case .revoked:
        // Apple ID credential revoked. Log the user out.
    case .notFound:
        // No credential found. Show login UI.
    case .transferred:
        // Team is transferred
    }
}

12:18 - Register for Revocation Notification

// Register for revocation notification

let notificationName = ASAuthorizationAppleIDProvider.credentialRevokedNotification

NotificationCenter.default.addObserver(self, 
                                       selector: #selector(signOut(_:)),
                                       name: notificationName, 
                                       object: nil)

17:55 - Sample HTML and Javascript Implementation

// Embed Sign in with Apple JS
<html>
    <body>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <div id="appleid-signin" data-color="white" data-border="true" data-type="sign in"/>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : '[CLIENT_ID]',
                scope : '[SCOPES]',
                redirectURI : '[REDIRECT_URI]',
                state : '[STATE]',
                nonce : '[NONCE]',
                usePopup : true
            });
        </script>
    </body>
</html>

18:28 - White Sign in with Apple Button

<div id="appleid-signin" data-color="white" data-border="true" data-type="sign in"/>

18:38 - Black Sign in with Apple Button

<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"/>

18:44 - Black Continue with Apple Button

<div id="appleid-signin" data-color="black" data-border="true" data-type="continue"/>

18:50 - Black Logo Only Button

<div id="appleid-signin" data-color="black" data-border="true" data-mode="logo-only"/>

19:47 - Sample HTML and Javascript Implementation

// Embed Sign in with Apple JS
<html>
    <body>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <div id="appleid-signin" data-color="white" data-border="true" data-type="sign in"/>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : '[CLIENT_ID]',
                scope : '[SCOPES]',
                redirectURI : '[REDIRECT_URI]',
                state : '[STATE]',
                nonce : '[NONCE]',
                usePopup : true
            });
        </script>
    </body>
</html>

21:11 - Handle DOM Response

// Listen for authorization success.
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
    // Handle successful response.
    console.log(event.detail.data);
});

// Listen for authorization failures.
document.addEventListener('AppleIDSignInOnFailure', (event) => {
     // Handle error.
     console.log(event.detail.error);
});

찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.

쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.

리소스

관련 비디오

WWDC22

WWDC20