react native apple authentication
v2.4.0 - visionOS support
모든 AppleButton 변형에 대한 지원을 포함하여 iOS 및 Android에서 Apple 인증을 지원하는 잘 구성된 React Native 라이브러리입니다.
다음 사항을 확인하지 않으면 @invertase/react-native-apple-authentication 라이브러리가 작동하지 않습니다.
React Native 버전 0.60 이상을 사용하고 있습니다.
(iOS만 해당) 귀하의 컴퓨터에 반응 네이티브 iOS 개발 환경이 설정되어 있습니다(Mac에서만 작동함). 그렇지 않은 경우 시작하려면 공식 React Native 설명서를 따르세요. React Native 시작하기 설명서.
(iOS만 해당) Xcode 버전 11 이상을 사용하고 있습니다. 이를 통해 Apple로 로그인을 위한 API가 제공되면 iOS 버전 13 이상을 사용하여 개발할 수 있습니다.
위의 사항을 모두 충족했다면 초기 개발 환경 설정 가이드를 따르세요.
버전 2에는 Android 지원이 추가되었으며 메서드 액세스 방법에 몇 가지 주요 변경 사항이 도입되었습니다. 마이그레이션 가이드를 참조하세요.
yarn add @invertase/react-native-apple-authentication
(cd ios && pod install)이 모듈은 React Native 자동 링크를 지원하므로 수동으로 링크할 필요가 없습니다.
앱에서 Apple로 로그인 기능을 활성화하려면 프로젝트의 앱 구성에서 ios.usesAppleSignIn 속성을 true로 설정하세요.
{
"expo" : {
"ios" : {
"usesAppleSignIn" : true
}
}
} npx expo prebuild 실행해야 할 수도 있습니다.
다음은 시작하고 실행하는 데 도움이 되는 간단한 단계입니다. iOS와 Android 간에 구현 방법이 다르므로 문제가 있는 경우 문서를 꼭 살펴보세요. 보다 완전한 구현을 보려면 건너뛰고 아래에 설명된 전체 코드 예제로 이동하세요.
React Native Firebase 통해 사용자를 인증하는 경우; Firebase 가이드를 참조하세요 @invertase/react-native-apple-authentication 라이브러리에서 appleAuth (API 문서) 모듈과 AppleButton (API 문서) 내보낸 멤버 요소를 가져옵니다. 인증 요청을 시작하려면 이벤트 핸들러( onPress )를 설정하세요.
// App.js
import React from 'react' ;
import { View } from 'react-native' ;
import { AppleButton } from '@invertase/react-native-apple-authentication' ;
async function onAppleButtonPress ( ) {
}
function App ( ) {
return (
< View >
< AppleButton
buttonStyle = { AppleButton . Style . WHITE }
buttonType = { AppleButton . Type . SIGN_IN }
style = { {
width : 160 , // You must specify a width
height : 45 , // You must specify a height
} }
onPress = { ( ) => onAppleButtonPress ( ) }
/ >
< / View >
) ;
} // App.js
import { appleAuth } from '@invertase/react-native-apple-authentication' ;
async function onAppleButtonPress ( ) {
// performs login request
const appleAuthRequestResponse = await appleAuth . performRequest ( {
requestedOperation : appleAuth . Operation . LOGIN ,
// Note: it appears putting FULL_NAME first is important, see issue #293
requestedScopes : [ appleAuth . Scope . FULL_NAME , appleAuth . Scope . EMAIL ] ,
} ) ;
// get current authentication state for user
// /! This method must be tested on a real device. On the iOS simulator it always throws an error.
const credentialState = await appleAuth . getCredentialStateForUser ( appleAuthRequestResponse . user ) ;
// use credentialState response to ensure the user is authenticated
if ( credentialState === appleAuth . State . AUTHORIZED ) {
// user is authenticated
}
} 사용자의 자격 증명이 취소된 경우에 대한 이벤트 리스너를 설정합니다.
// App.js
import React , { useEffect } from 'react' ;
import { View } from 'react-native' ;
import { appleAuth , AppleButton } from '@invertase/react-native-apple-authentication' ;
function App ( ) {
useEffect ( ( ) => {
// onCredentialRevoked returns a function that will remove the event listener. useEffect will call this function when the component unmounts
return appleAuth . onCredentialRevoked ( async ( ) => {
console . warn ( 'If this function executes, User Credentials have been Revoked' ) ;
} ) ;
} , [ ] ) ; // passing in an empty array as the second argument ensures this is only ran once when component mounts initially.
return (
< View >
< AppleButton onPress = { ( ) => onAppleButtonPress ( ) } / >
< / View >
) ;
} appleAuth.Operation.LOGOUT 작업이 있지만 예상대로 작동하지 않으며 Apple의 예제 코드에서도 사용되지 않습니다. 자세한 내용은 이 문제를 참조하세요.
따라서 로그아웃할 때 appleAuth.Operation.LOGIN 중에 수집된 사용자로부터 얻은 모든 데이터를 지우는 것이 좋습니다.
Android에서 적절한 인증을 허용하려면 Apple 개발자 계정을 올바르게 구성해야 합니다. 자세한 내용은 가이드를 확인하세요.
// App.js
import React from 'react' ;
import { View } from 'react-native' ;
import { appleAuthAndroid , AppleButton } from '@invertase/react-native-apple-authentication' ;
async function onAppleButtonPress ( ) {
}
// Apple authentication requires API 19+, so we check before showing the login button
function App ( ) {
return (
< View >
{ appleAuthAndroid . isSupported && (
< AppleButton
buttonStyle = { AppleButton . Style . WHITE }
buttonType = { AppleButton . Type . SIGN_IN }
onPress = { ( ) => onAppleButtonPress ( ) }
/ >
) }
< / View >
) ;
} // App.js
import { appleAuthAndroid } from '@invertase/react-native-apple-authentication' ;
import 'react-native-get-random-values' ;
import { v4 as uuid } from 'uuid'
async function onAppleButtonPress ( ) {
// Generate secure, random values for state and nonce
const rawNonce = uuid ( ) ;
const state = uuid ( ) ;
// Configure the request
appleAuthAndroid . configure ( {
// The Service ID you registered with Apple
clientId : 'com.example.client-android' ,
// Return URL added to your Apple dev console. We intercept this redirect, but it must still match
// the URL you provided to Apple. It can be an empty route on your backend as it's never called.
redirectUri : 'https://example.com/auth/callback' ,
// The type of response requested - code, id_token, or both.
responseType : appleAuthAndroid . ResponseType . ALL ,
// The amount of user information requested from Apple.
scope : appleAuthAndroid . Scope . ALL ,
// Random nonce value that will be SHA256 hashed before sending to Apple.
nonce : rawNonce ,
// Unique state value used to prevent CSRF attacks. A UUID will be generated if nothing is provided.
state ,
} ) ;
// Open the browser window for user sign in
const response = await appleAuthAndroid . signIn ( ) ;
// Send the authorization code to your backend for verification
}이 라이브러리는 React-native-macos와 함께 사용하는 경우 MacOS 10.15 이상에서 작동합니다.
yarn add react-apple-signin-auth . import AppleSignin from 'react-apple-signin-auth' ;
/** Apple Signin button */
const MyAppleSigninButton = ( { ... rest } ) => (
< AppleSignin
/** Auth options passed to AppleID.auth.init() */
authOptions = { {
clientId : 'SAME AS ANDROID' ,
redirectURI : 'SAME AS ANDROID' ,
scope : 'email name' ,
state : 'state' ,
/** sha256 nonce before sending to apple to unify with native firebase behavior - https://github.com/invertase/react-native-apple-authentication/issues/28 */
nonce : sha256 ( 'nonce' ) ,
/** We have to usePopup since we need clientSide authentication */
usePopup : true ,
} }
onSuccess = { ( response ) => {
console . log ( response ) ;
// {
// "authorization": {
// "state": "[STATE]",
// "code": "[CODE]",
// "id_token": "[ID_TOKEN]"
// },
// "user": {
// "email": "[EMAIL]",
// "name": {
// "firstName": "[FIRST_NAME]",
// "lastName": "[LAST_NAME]"
// }
// }
// }
} }
/ >
) ;
export default MyAppleSigninButton ; appleAuth.performRequest (iOS) 및 appleAuthAndroid.configure (Android)에 제공되는 nonce는 자동으로 SHA256으로 해시됩니다. crypto . createHash ( 'sha256' ) . update ( nonce ) . digest ( 'hex' ) ; import crypto from 'crypto' ;
import appleSigninAuth from 'apple-signin-auth' ;
appleIdTokenClaims = await appleSigninAuth . verifyIdToken ( id_token , {
/** sha256 hex hash of raw nonce */
nonce : nonce ? crypto . createHash ( 'sha256' ) . update ( nonce ) . digest ( 'hex' ) : undefined ,
} ) ; 모든 API 문서는 typedoc에 의해 생성되며 typedocs 폴더에서 사용할 수 있습니다.
full name 과 email null 반환하는 이유는 무엇입니까?
full name 과 email 만 반환하며, 다음 로그인에서는 null 반환하므로 해당 데이터를 저장해야 합니다. const appleAuthRequestResponse = await appleAuth . performRequest ( {
requestedOperation : appleAuth . Operation . LOGIN ,
requestedScopes : [ appleAuth . Scope . FULL_NAME , appleAuth . Scope . EMAIL ] ,
} ) ;Settings > Apple ID, iCloud, iTunes & App Store > Password & Security > Apps Using Your Apple ID 에서 앱을 탭하고 Stop Using Apple ID 탭합니다. 이제 다시 로그인할 수 있으며 full name 과 '이메일'을 받게 됩니다.id_token 검사하여 서버 측 email 속성에 언제든지 액세스할 수 있다는 점을 명심하세요.버튼 언어를 변경하는 방법은 무엇입니까? (iOS)
< key >CFBundleDevelopmentRegion</ key >
< string >en</ string >< key >CFBundleAllowMixedLocalizations</ key >
< string >true</ string >처음 로그인한 후 이메일을 어떻게 받나요?
import { appleAuth } from '@invertase/react-native-apple-authentication' ;
import { jwtDecode } from 'jwt-decode' ;
const appleAuthRequestResponse = await appleAuth . performRequest ( {
requestedOperation : appleAuth . Operation . LOGIN ,
requestedScopes : [ appleAuth . Scope . EMAIL , appleAuth . Scope . FULL_NAME ]
} ) ;
// other fields are available, but full name is not
const { email , email_verified , is_private_email , sub } = jwtDecode ( appleAuthRequestResponse . identityToken ) The operation couldn’t be completed. (com.apple.AuthenticationServices.AuthorizationError error 1000.)
연결 설정이 올바르게 이루어졌는지 확인하십시오. 설정은 여기에서 찾을 수 있습니다: 초기 설정
시뮬레이터에서 getCredentialStateForUser 함수를 사용하는 경우 이 함수가 장치의 진위 여부를 확인하기 때문에 이 오류가 항상 발생합니다.
실제 장치에서 코드를 테스트해야 합니다.
시뮬레이터를 사용하는 경우 Apple 계정 관리로 이동하세요.
"장치"를 검색하고 "시뮬레이터"를 선택한 다음 "계정에서 제거"를 누르세요.
잘 작동할 겁니다.
"invalid_client" in Android webview
Android 서비스 설정 문서를 꼭 읽어보세요.
appleAuthAndroid.configure 에 전달한 clientId Apple 개발자 콘솔에서 설정한 서비스 ID와 일치하지 않습니다.
귀하의 서비스 ID가 잘못된 기본 앱 ID에 연결되어 있으므로 잘못된 Apple 키로 로그인을 사용합니다.
appleAuthAndroid.configure 에 전달한 redirectUri Apple 개발자 콘솔에 추가한 반환 URL 또는 도메인/하위 도메인 중 하나와 일치하지 않습니다. URL은 정확히 일치해야 하며 쿼리 문자열을 포함할 수 없습니다.
Invertase가 구축하고 유지 관리합니다.
