분류 Reactjs

React native : Apple로 로그인

컨텐츠 정보

  • 조회 414 (작성일 )

본문

React Native 앱을 위해 Apple에 로그인하는 방법


https://medium.com/@rossbulat/react-native-sign-in-with-apple-75733d3fbc3 


Apple 통합으로 로그인하여 등록 양식 잘라 내기 


Apple과의 로그인은 iOS 13과 함께 출시되었으며 사용자가 서비스를 지원하는 앱 및 웹 사이트로 인증 할 수 있는 간단하고 개인적인 방법을 제공합니다. 

Apple에 로그인하면 사용자는 기본적으로 Apple ID를 앱 및 웹 사이트의 신뢰할 수 있는 식별자로 사용할 수 있으므로 해당 앱으로 새 계정을 만들 필요가 없습니다.


이 기사에서는 React Native와 관련하여 Apple에 로그인을 통합하는 프로세스를 살펴보고 이 원활한 인증 메커니즘의 기본 코드를 설명합니다. Apple과의 로그인 통합, 즉 React Native 측의 react-native-apple-authentication 및 Node.js 서버 측의 apple-signin-auth와 같은 몇 가지 주요 패키지가 사용됩니다.


이 서비스를 시작하고 React Native에서 실행하는 데 필요한 코드로 넘어 가기 전에 다음 섹션에서는 사용자 관점과 개발 관점 모두에서 Apple 서비스로 로그인에서 예상되는 내용을 자세히 설명합니다. 이를 통해 서비스를 통합하고 통합 할 수 있는 충분한 컨텍스트가 제공됩니다.


Apple에서 로그인하는 방법 


사용자와 개발자는 서비스에 대한 관점이 매우 다릅니다. 사용자는 빠르고 마찰이 없는 인증 프로세스를 경험하는 반면 개발자는 API 이해, 필요한 자격 증명 설정, 서비스 워크 플로 이해 및 Node.js를 사용하여 React Native 구성 요소 및 서버 측 로직으로 해당 워크 플로를 구현하는 데 더욱 어려운 작업을 수행합니다.


위의 작업은 많은 작업처럼 들릴 수 있지만 실제로 프로세스를 명확하게 이해하면 신속한 구현에 도움이 됩니다. 이는 바로 이 기사에서 가능합니다.


사용자 관점에서 Apple로 로그인 


사용자 측의 경험은 올바르게 구현되면 다소 단순하고 우아합니다. "Apple로 로그인"버튼 (Apple 스타일 지침에 따름)을 탭하면 Touch ID / Face ID 프롬프트를 소환하여 인증 할 수 있습니다. 인증에 성공하면 추가 조치없이 사용자를 앱에 로그인해야 합니다. 사용자가 이 프로세스를 처음 수행하는 경우 해당 앱의 이름과 이메일 주소를 공유하거나 숨길 수 있습니다.


다음 다이어그램은 개인적으로 개발 한 앱으로 Apple에 로그인하는 단계를 나타냅니다. Apple로 로그인 버튼을 누르면 Touch ID로 인증을 요청합니다. 인증에 성공하면 사용자가 로그인하여 대시 보드로 리디렉션됩니다.


Image for post 

Apple 프로세스로 로그인 로그인 버튼-> 인증-> 업데이트 유지 및 대시 보드로 리디렉션을 누릅니다.


이메일 주소 제공 또는 숨기기 사이의 중간 지점을 찾는 방법으로 Apple에 로그인하면 사용자가 생성하고 사용자의 Apple ID와 연관된 임의의 Apple 소유 이메일 주소를 사용할 수 있는 옵션이 제공됩니다. 

이렇게 하면 사용자가 이메일을 통해 앱에서 계속 커뮤니케이션을받을 수 있다는 장점이 있습니다. 

이메일은 사용자의 실제 이메일 주소로 전달되기 전에 이 Apple 관리 주소로 전송됩니다. 

이러한 "비공개 릴레이"이메일 주소는 <random_string> @ privaterelay.appleid.com 형식으로 되어 있습니다.


Apple의 개인 이메일 릴레이 주소에서 사용자에게 도달하려면 신뢰할 수 있는 도메인 이름과 이메일 주소를 Apple에 제공하는 것은 개발자의 책임입니다. 이러한 모든 세부 사항은 개발자 포털에서 구성 할 수 있습니다. 여기서는 이 프로세스를 간략하게 다루고 프로세스를 개략적으로 설명한 다른 소스에도 연결합니다.


개발 관점에서 Apple로 로그인 


개발자 관점에서 인증 프로세스는 서버 측을 처리하고 확인하는 데 필요한 몇 가지 주요 데이터를 생성합니다. ID 토큰은 사용자가 인증 할 때 사용자 측의 Apple ID를 나타내는 계정 식별자와 함께 Apple 측에서 생성됩니다. 이 식별자는 사용자의 Apple ID 자체 (Apple 계정에 로그인 할 때 사용하는 이메일 주소)가 아니라 인증되는 Apple 계정과 연관 될 수 있는 무작위 문자열입니다. 이러한 데이터는 향후 인증을 위해 앱의 데이터베이스에 유지 될 수 있습니다.


사용자가 인증 할 때마다 다른 고유 한 ID 토큰이 생성되지만 각각 동일한 계정 식별자와 연결됩니다.


따라서 React Native에서 인증이 수행되면 ID 토큰이 관련 메타 데이터와 함께 생성됩니다. 이 연습에서 수행 할 작업은 해당 데이터를 ID 토큰을 확인할 서버 측으로 보내는 것입니다. 

자격 증명 토큰이 성공적으로 확인되면 계정 식별자가 확인 응답 본문에 반환 된 다음 새 계정을 만들거나 앱 데이터베이스에서 기존 계정을 가져 오는 데 사용할 수 있습니다.


추가 고려 사항으로, 앱에는 이미 자체 인증 메커니즘이 있으며 자체 인증 토큰을 생성하는 경우가 많을 가능성이 높습니다. 실제로 이 기사에서 설명하는 것은 기존 인증 토큰과 함께 Apple에 로그인하는 방법입니다.


ID 토큰이 확인되면 서버는 사용자의 추가 API 요청을 인증하는 데 사용되는 표준 인증 토큰을 만들 수 있습니다.


이러한 이해를 통해 Apple에서 로그인하는 데 필요한 자격 증명 및 Xcode 기능을 설정할 수 있습니다.


Xcode 및 개발자 자격 증명 설정 


전화의 첫 번째 포트는 Apple이 작동하도록 로그인하는 데 필요한 자격 증명 및 Xcode 기능을 설정하는 것입니다. 

이 설정의 대부분은 개발자 포털 내에서 이루어집니다. 이것이 이 섹션이 주로 집중할 것입니다. Xcode 프로젝트에 추가해야 할 기능도 하나 있습니다.


Xcode 내에서 Xcode의 서명 및 기능 탭으로 이동하여 + 기능을 누르고 Apple 기능으로 로그인을 추가하십시오. Xcode 프로젝트를 저장하고 개발자 포털로 이동하십시오.


Image for post 



앱 ID, 기본 및 그룹화 된 ID 구성 


개발자 포털에서 구성 할 수 있는 Apple 관련 자격 증명으로 로그인하는 것이 몇 가지 있습니다. 이전 단계의 Xcode에서 추가 된 기능부터 시작하여 이제 식별자에서 앱 ID 구성 설정을 방문 할 수 있습니다. Apple 기능으로 로그인으로 아래로 스크롤하고 편집을 클릭하십시오.


Image for post 


결과 모달은 앱 ID가 기본 앱 ID로 할당되었음을 나타내며 이 앱 ID를 사용하여 iOS, Mac 또는 웹용 앱 빌드에서 로그인 할 수 있습니다. 이 작업의 단점은 해당 플랫폼간에 차별화가 없거나 사용자가 로그인 한 위치에 대한 컨텍스트가 없다는 것입니다.


이 문제를 해결하기 위해 다른 앱 ID (또는 웹 앱 사례의 서비스 ID)를 기본 앱 ID와 그룹화 할 수도 있습니다. 그렇게 하면 그룹화 된 각 ID에 동의하는 것이 아니라 전체 그룹에 대해 사용자의 동의가 하나만 필요합니다.


서비스 ID는 식별자 섹션에서도 구성되며 웹 사이트에 대해 Apple로 로그인을 구성 할 때 사용됩니다. 앱은 단순히 앱 ID를 사용하여 Apple과의 로그인과 연결됩니다. 온라인으로 서비스 ID를 설정하라는 자습서가 표시 될 수 있지만 Apple로 로그인하기 위해 앱을 구성하는 경우에는 필요하지 않습니다. 서비스 ID를 보려면 페이지 오른쪽 상단에 있는 앱 ID 드롭 다운을 클릭하고 서비스 ID를 선택하십시오.


Apple 로그인의 맥락에서 서비스 ID 및 앱 ID는 클라이언트 ID라고도 합니다. 이 용어는 온라인 설명서에 사용 된 것을 볼 수 있으므로 Apple 도메인 식별자로 로그인하는 역할을 하는 앱 ID 또는 서비스 ID를 나타내는 것입니다.


이 기사에서는 기본 앱 ID에만 중점을 두므로 더 이상 구성이 필요하지 않습니다. 독자가 에코 시스템을 웹 또는 다른 플랫폼으로 확장하려는 경우 기존의 기본 앱 ID 옵션을 사용하여 새로 만든 ID를 그룹으로 간단히 전환하고 제공된 드롭 다운에서 기본 앱 ID를 선택할 수 있습니다.


여기에서 서버 대 서버 알림 엔드 포인트 URL을 구성 할 수 있으며 여기서 Apple 활동으로 로그인에 대한 알림 스타일 이벤트를 수신 할 수 있습니다. 다시 말하지만 이는 서비스 작동에 중요하지 않지만 사용량을 분석하거나 서비스가 예상대로 작동하는지 확인하는 데 유용 할 수 있습니다.


키 구성 


키 목록으로 이동하여 Apple에 로그인 하기 위한 새 키를 추가하십시오. (기본) 앱 ID를 키에 추가하고 마지막으로 키를 등록하십시오. 개인 키를 다운로드하여 안전한 장소에 보관하십시오.


Image for post 


이메일 통신을 위해 Apple에 로그인 구성 


여기서 마지막으로 필요한 설정 단계는 이메일 통신을 구성하는 것입니다. 이것은 소개에 언급 된 개인 전자 메일 릴레이 서비스와 통신 할 수 있도록 하기 위한 것입니다 (또는 사용자가 실제 Apple ID 전자 메일 주소를 숨기고 임의로 생성 된 Apple 소유 전자 메일을 사용하기로 결정한 경우). 이상적으로, 앱 개발자는 여전히 이메일, 특히 중요 업데이트를 통해 사용자에게 연락하기를 원하므로 이러한 추가 단계는 커뮤니케이션을 유지하는 데 필수적입니다.


인증서, 식별자 및 프로파일의 사이드 메뉴에서 더보기를 클릭하고 구성을 클릭하여 이메일 설정을 여십시오.


Image for post 


사용하려는 도메인과 이메일 주소를 추가하십시오. 예를 들어, 도메인은 mydomain.com이고 이메일 주소는 no-reply@mydomain.com입니다.


또한 개인 전자 메일 릴레이 알림은 기본적으로 설정되어 있습니다. 설정 버튼에서 이 설정을 토글합니다.


이러한 소스는 소유권을 증명하기 위해 인증을 받아야 하며, 가장 쉬운 방법은 SPF 인증을 사용하는 것입니다.


다양한 메일 서비스 제공 업체 (SendGrid, MailChimp 등)에 대해 이 작업을 수행하기 위한 Apple 개요 지침 — 이전 링크에서 도메인 인증을 확장하여 자세한 내용을 확인하십시오.


이 조각과 관련된 응용 프로그램을 만들 때 SendGrid를 응용 프로그램의 전자 메일 서비스 공급자로 사용했습니다. SendGrid를 사용하여 SPF 인증을 구성하려면 도메인에 다음 TXT 레코드를 추가하십시오.


v=spf1 include:sendgrid.net ~all 


SPF 레코드를 추가 한 직후 SPF 재확인을 클릭하면 소스가 성공적으로 확인됩니다.


위 규칙에 따라 SendGrid는 레코드 관련 도메인의 모든 하위 도메인에서 전자 메일을 보낼 수 있습니다. 온라인으로 SPF 규칙을 구성하는 방법을 설명하는 많은 기사가 있습니다.“SPF 규칙 구성”을 검색하여 최신 소스를 얻으십시오.


이 설정은 확실히 사소한 것이 아니며 식별자와 키를 함께 사용하는 방법을 이해해야 합니다. 독자가 이 섹션을 따르기가 어렵다는 것을 발견 한 경우 react-native-apple-authentication에도 문서 / 폴더에 스크린 샷이 있는 지침이 포함되어 있으며 여기에서 볼 수 있습니다.


이제 구현의 React Native 측면에 대해 완전히 구성되고 준비되었습니다.


React Native에서 로그인 


이 섹션에서는 메타 데이터와 함께 ID 토큰을 생성하는 Apple 로그인 버튼 및 onPress 핸들러 구현에 중점을 둘 것입니다. 여기서 논의 된 완전한 React 컴포넌트의 요지가 이 섹션의 끝에 포함되어 있습니다.


이를 촉진하기 위해 사용되는 패키지는 @invertase/react-native-apple-authentication입니다. API에 액세스하려면 프로젝트 종속성으로 추가하십시오.


yarn add @invertase/react-native-apple-authentication 


Apple 버튼으로 로그인 표시 


버튼 디스플레이 자체는 간단합니다. AppleButton 구성 요소에 패키지 되어 있으며 유형스타일을 정의하는 소품을 지원합니다. 제공된 버튼 유형은 버튼 텍스트를 변경하는 반면, 스타일 테마는 버튼 테마, 밝은 테마 또는 어두운 테마 및 개요 테마를 지원합니다.


로그인 버튼을 다음과 같이 정의합니다. 버튼의 onPress 핸들러 함수에서 사용할 다른 반응 네이티브 애플 인증을 가져 왔습니다.


// displaying the Sign in with Apple button componentimport appleAuth, {
AppleButton,
AppleAuthError,
AppleAuthRequestScope,
AppleAuthRequestOperation,
} from '@invertase/react-native-apple-authentication'
const AppleAuth = (props) => { const onAppleButtonPress = async () => {
/* Sign in logic will go here */
}

return (
<AppleButton
buttonStyle={AppleButton.Style.WHITE}
buttonType={AppleButton.Type.SIGN_IN}
style={styles.appleButton}
onPress={() => onAppleButtonPress()}
/>
);
}


여러 플랫폼을 대상으로 하는 경우 appleAuth.isSupported 부울을 사용하여 로그인 버튼을 표시할지 여부를 결정하십시오. 예를 들어 Android에 표시되지 않도록 합니다.


버튼의 너비와 높이는 스타일 소품 내에서 정의됩니다. 버튼은 또한 여백에 반응하고 그림자를 지원합니다.


// button stylingappleButton: {
width: '100%',
height: 45,
shadowColor: '#555',
shadowOpacity: 0.5,
shadowOffset: {
width: 0,
height: 3
},
marginVertical: 15,
}


기존 테마와 최대한 일치하도록 버튼 스타일을 시험해 보는 것이 좋습니다. 글꼴 크기, 테두리 반경 및 색상은 buttonStyle prop 이상으로 편집 할 수 없습니다. 이는 Apple의 스타일 가이드 라인 때문일 가능성이 높습니다. 

필요한 경우 기존 테마를 로그인 버튼과 일치하도록 조정하여 사용자 정의 기능이 부족한 것을 보충하십시오.


버튼 누르기 로직 및 로그인 요청 


onAppleButtonPress라는 이름을 가진 onPress 핸들러 함수에 주목 해 보도록 하겠습니다. 먼저, 모든 논리는 try catch 블록에 싸여 AppleAuthError 예외를 처리 할 수 ​​있습니다. 로그인을 취소하는 사용자와 관련된 논리를 정의해야 합니다.


// try catch block to handle sign in exceptionsconst onAppleButtonPress = async () => {
try {

} catch (error) {
if (error.code === AppleAuthError.CANCELED) {
// user cancelled Apple Sign-in

} else {
// other unknown error
}
}
}


이제 try 블록 내에서 로그인 요청을 할 수 있습니다. 이 로그인 요청은 iOS에 내장 된 로그인 프롬프트를 호출하여 사용자가 Touch ID 또는 Face ID와 같은 방법을 사용하여 인증 할 수 있습니다. 이 프롬프트가 취소되면 위에서 정의한 예외가 호출됩니다. 반면에 인증에 성공하면 appleUserId라는 계정 식별자, identityToken과 연관된 nonce 및 기타 세부 사항과 같은 다른 세부 사항 중에서 identityToken을 리턴합니다.


다음 예제 요청에는 사용자의 이메일 주소와 이름에 대한 두 가지 범위가 각각 포함되어 있습니다. 즉, 사용자가 처음 로그인하면 이러한 자격 증명이 요청됩니다. 사용자가 이러한 세부 정보를 제공 할 것이라는 보장은 없으며 이 시점에서 개인 전자 메일 릴레이를 선택할 수도 있습니다. 이 단계를 동의 단계라고도 합니다.


어쨌든 비동기 요청을 다음과 같이 수행하십시오.


// sign in request const appleAuthRequestResponse = await appleAuth.performRequest({
requestedOperation: AppleAuthRequestOperation.LOGIN,
requestedScopes: [
AppleAuthRequestScope.EMAIL,
AppleAuthRequestScope.FULL_NAME
],
});
const {
identityToken,
} = appleAuthRequestResponse;



이제 확인 및 로그인 프로세스 서버 측을 계속하는 데 필요한 모든 것이 있습니다.


사용자 동의 범위와 같은 다른 메타 데이터가 appleAuthRequestResponse에 반환되지만 이 연습에서 인증을 계속하려면 identityToken에만 관심이 있습니다. 보시다시피, 토큰 서버 측을 확인하면 appleUserId와 같은 주요 값이 반환 되어 identityToken을 계정에 연결할 수 있습니다.


앱에 서버 측 API가 없고 Apple에 독점적으로 로그인하는 것에 전적으로 의존하는 경우 이 응답으로 사용자가 성공적으로 인증되었는지 확인할 수 있습니다. 그러나 이것은 확실히 중요한 경우입니다. 거의 모든 서비스에 서버 세부 정보와 서버 자체의 인증 메커니즘이 유지됩니다. 대부분의 사용 사례를 수용하기 위해 identityToken을 (안전하게) 서버 측으로 전송하여 확인하고 기존 인증 흐름에 통합 할 수 있습니다.


이 단계에서 다른 반환 값, 특히 전자 메일 및 fullName 필드를 사용하여 UI 및 구성 요소 상태를 업데이트하거나 장치에서 이러한 값을 유지하려고 할 수 있습니다. 이 기사는 인증 흐름에 계속 초점을 맞추지 만이 단계에서 추가 처리를 수행 할 수 있음을 인정합니다.


identityToken 서버 측 보내기 


onAppleButtonPress에서 마지막으로 해야 할 일은 서버에 요청을 하고 성공 또는 실패한 확인 응답을 처리하는 것입니다.


다음 코드는 전체 appleAuthRequestResponse를 서버로 전송하지만 주로 다음 섹션에서 확인을 위해 identityToken 및 appleUserId 값을 사용하는 데 관심이 있습니다. 확인되면 서버는 성공 또는 실패 메시지로 응답해야 합니다.


// request to verify identity tokenif (identityToken) {  // sending entire auth response to server in `fetch` request
const { ack, response } = await authFetch({
uri: '/sign-in-with-apple',
body: {
...appleAuthRequestResponse,
}
});

if (ack === 'success') {
// successful request, process sign in
// state updates / Redux dispatches / etc
handleSignIn(response);
} else {
// failed to verify `identityToken`
handleFailedSignIn();
}
} else {
// no `identityToken`, also a failed sign in
handleFailedSignIn();
}


authFetch는 개발에 사용하는 함수로 바닐라 페치 요청을 비동기 함수로 래핑하여 단순한 상용구를 제공합니다.


다음은 React 컴포넌트에서이 전체 섹션을 조합하는 요지입니다.


import React from 'react'
import styles from './styles'
import appleAuth, {
AppleButton,
AppleAuthError,
AppleAuthRequestScope,
AppleAuthRequestOperation,
} from '@invertase/react-native-apple-authentication'
import { authFetch } from './Utils'
import { getUniqueId } from 'react-native-device-info'
export const AppleSignIn = (props) => {
const handleSignIn = async (data: any) => {
/* Redux actions, persisting data with AsyncStorage, redirection...*/
}
const onAppleButtonPress = async () => {
try {
// make sign in request and return a response object containing authentication data
const appleAuthRequestResponse = await appleAuth.performRequest({
requestedOperation: AppleAuthRequestOperation.LOGIN,
requestedScopes: [
AppleAuthRequestScope.EMAIL,
AppleAuthRequestScope.FULL_NAME
],
});
// retrieve identityToken from sign in request
const {
identityToken,
} = appleAuthRequestResponse;
// you may also want to send the device's ID to your server to link a device with the account
const deviceId = getUniqueId();
// identityToken generated
if (identityToken) {
// send data to server for verification and sign in
const { ack, response } = await authFetch({
url: 'sign-in-with-apple',
body: {
...appleAuthRequestResponse,
deviceId: deviceId
}
});
if (ack === 'success') {
// successfully verified, handle sign in
await handleSignIn(response);
}
} else {
// no token, failed sign in
}
} catch (error) {
if (error.code === AppleAuthError.CANCELED) {
// user cancelled Apple Sign-in
} else {
// other unknown error
}
}
}
return (
<AppleButton
buttonStyle={AppleButton.Style.WHITE}
buttonType={AppleButton.Type.SIGN_IN}
style={styles.appleButton}
onPress={() => onAppleButtonPress()}
/>
)
}
export default AppleSignIn;



다음 섹션에서는 Node.js Express 환경에서 다른 패키지를 사용하여 identityToken을 확인하는 방법과 계정 식별자 appleUserId와 함께 이를 사용자 계정에 연결하는 방법을 설명합니다.


서버 측 검증 


이제 identityToken을 확인하겠습니다. 여기에서 또 다른 패키지 인 apple-signin-auth가 사용됩니다. 계속해서 프로젝트에 추가하십시오.


yarn add apple-signin-auth 


엔드 포인트 설정 및 ID 토큰 확인 


엔드 포인트 이름을 / sign-in-with-apple로 지정하겠습니다. 먼저 논리를 try catch 블록으로 감싸고 앱에서 전송 된 변수를 참조합니다.


// sign-in-with-apple endpointconst appleSignin = require('apple-signin-auth');router.post('/sign-in-with-apple', async function (req, res, next) {
try {
const { body } = req;
const {
email,
fullName,
identityToken
} = body;
} catch (e) {
next(e);
}
});


appleSignin.verifyIdToken() 메소드는 identityToken을 확인하는 데 사용됩니다. 다음 예제는 확인을 시도합니다.


// verifying the provided identityTokentry { const clientId = <your_app_id>;  // verify token (will throw error if failure)
const { sub: userAppleId } = await
appleSignin.verifyIdToken(identityToken, {
audience: clientId,
ignoreExpiration: true, // ignore token expiry (never expires)
});
} catch (e) {
res.json({
ack: 'error',
message: 'failed to verify identityToken'
});
next(e);
}


이제 우리는 어딘가로 가고 있습니다. verifyIdToken() 메소드는 성공하면 해당 identityToken과 연관된 appleUserId를 리턴합니다. 이 방법에 대한 관심 사항은 다음과 같습니다.


  • 고객 속성에 clientId 값을 제공했습니다. 이 clientId는 이전에 구성된 Apple로 로그인과 연관된 앱 ID입니다. 여기서 clientId라는 이름은 apple-signin-auth의 공식 문서와 일관성을 유지하기 위해 사용됩니다.
  • ignoreExpiration 속성이 true로 설정되면 이 토큰은 만료 된 경우에도 확인됩니다. 이것은 자체 인증 메커니즘과 함께 Apple에 로그인을 구현할 때 유용하며, 인증 프로세스 외부의 메커니즘에 종속되지 않습니다.
  • 여기에서는 확인 오류를 격리하기 위해 추가 시도 catch 블록을 정의하고 실패한 경우 앱에 실패 응답을 다시 보냅니다.
  • 참고로 공식 문서는 nonce 속성에 대해서도 설명합니다. nonce도 React Native 측에서 생성되어 nonce로 서버에 전송되었습니다. 그러나 이 nonce 값을 verifyIdToken()에 제공하면 토큰이 성공적으로 확인되지 않습니다. 이 nonce 값을 제공하는 것은 직관적 인 것처럼 보이지만 이미 생성 된 identityToken을 확인할 때 지원되지 않는 것 같습니다. 이 모호함에 대해 혼동하지 않도록 이 점을 명심하십시오.


성공적인 검증 처리 


성공적인 확인에서 appleUserId를 반환하면 서버로 전송 된 appleUserId를 기준으로 하나의 최종 검사를 수행 할 수 있으며 이는 생성 된 것과 일치해야 합니다.

// checking apple User IDs matchif(appleUserId === req.body.appleUserId) {
//details match, continue with sign in process
}


appleUserId는 후속 로그인에서 일관성이 있지만 identityToken은 일치하지 않습니다.


이제 사용자를 무료로 인증 할 수 있으며 사용자가 처음 인증하는 경우 새 계정을 만들 수도 있습니다. 새로 생성 된 계정에서 다음 세부 정보를 유지할 수 있습니다.


  • fullName 필드는 사용자의 전체 이름과 닉네임을 제공합니다 (제공된 경우).
  • 전자 메일 필드. 공유 방법에 따라 null, 개인 릴레이 전자 메일 또는 사용자의 실제 Apple ID 전자 메일 일 수 있습니다.
  • 특정 Apple 사용자의 식별자로 작동 할 수 있는 appleUserId 필드 이것은 사용자 이름으로 볼 수 있으며 실제로 null 일 수 있는 이메일을 통한 계정 식별자로 사용되어야 합니다.

이 섹션을 마치려면 다음 논리 흐름을 준수하여 엔드 포인트 구현을 완료 할 수 있습니다.


// logic flow for verification and app sign in endpoint receives request
|_verify identityToken
|_ return failure if not successful
|_ check appleUserId's match
|_ return failure if they do not match
|_ check account with appleUserId exists
|_ create account if account does not exist
|_ generate authentication token via standard means
|_ persist token to user account record
|_ return token and account details to app


인증 토큰 처리를 통해 표준 전자 메일 주소 및 암호를 제공하기 위해 사내 인증 시스템을 코딩하는 방법에 대해 읽으려면 다음과 같은 전용 기사를 확인하십시오. 기본 반응 : 사용자 인증 흐름 설명.


액세스 취소에 응답 


또한 반응 네이티브 애플 인증이 앱에 대한 액세스 권한을 취소하는 사용자에게 응답하기 위해 제공하는 이벤트 리스너도 간단히 살펴볼 가치가 있습니다. 다음 useEffect 후크는 이 이벤트 리스너를 초기화 및 마운트 해제하여 사용자를 계정에서 로그 아웃 하는 등의 조치로 이러한 시나리오에 대응할 수 있도록 합니다.


// responding to a user revoking accesslet authCredentialListener = null;
useEffect(() => {
authCredentialListener = appleAuth.onCredentialRevoked(async () => {
//user credentials have been revoked. Sign out of account
});
return (() => {
if (authCredentialListener.remove !== undefined) {
authCredentialListener.remove();
}
})
}, []);


요약 


이 기사는 React Native와 관련하여 Apple에 로그인을 통합하는 프로세스를 간략하게 설명하려고 시도했습니다. 

이 프로세스에는 개발자 포털에서 모든 자격 증명을 설정하는 다소 번거로운 프로세스가 필요하지만 네이티브 네이티브 및 노드 통합은 React Native 애플 인증apple-signin-auth가 제공하는 간단한 API 덕분에 비교적 간단합니다.


이 통합의 최종 결과는 최종 사용자의 등록 및 로그인 프로세스가 훨씬 간단 해 지므로 콘텐츠 액세스를 위해 가입 프로세스가 필요한 앱의 가입률이 높아질 수 있습니다. Apple에 로그인을 사용하려는 사용자에게는 더 이상 등록 양식이 필요하지 않으므로 앱 콘텐츠에 대한 장벽이 크게 줄어 듭니다.


이 방법의 단점은 이 초기 가입 과정에서 캡처 할 수 있는 사용자 정보가 없다는 것입니다. 이 정보는 앱이 필요로 하는 정보와 시간을 사용자에게 요구함으로써 완화 될 수 있습니다. 이러한 접근 방식은 Apple에 로그인 한 이래로 일반적으로 사용자가 가입 피로를 느끼고 덜 상세한 인증 프로세스를 높이 평가한다는 점에서 추진력을 얻었습니다.