react native apple authentication
v2.4.0 - visionOS support
Eine gut typisierte React Native-Bibliothek, die Unterstützung für die Apple-Authentifizierung auf iOS und Android bietet, einschließlich Unterstützung für alle AppleButton Varianten.
Die @invertase/react-native-apple-authentication Bibliothek funktioniert nicht, wenn Sie Folgendes nicht sicherstellen:
Sie verwenden React Native Version 0.60 oder höher.
(Nur iOS) Sie haben eine reaktionsnative iOS-Entwicklungsumgebung auf Ihrem Computer eingerichtet (funktioniert nur auf Mac). Wenn nicht, folgen Sie bitte der offiziellen React Native-Dokumentation für den Einstieg: React Native-Erste-Start-Dokumentation.
(Nur iOS) Sie verwenden Xcode Version 11 oder höher. Dies ermöglicht Ihnen die Entwicklung mit iOS-Version 13 und höher, als die APIs für die Anmeldung mit Apple verfügbar wurden.
Wenn Sie sicher sind, dass Sie die oben genannten Voraussetzungen erfüllt haben, folgen Sie bitte unserem Leitfaden zur Ersteinrichtung der Entwicklungsumgebung.
Version 2 fügte Android-Unterstützung hinzu und führte einige grundlegende Änderungen beim Zugriff auf Methoden ein. Bitte beachten Sie den Migrationsleitfaden.
yarn add @invertase/react-native-apple-authentication
(cd ios && pod install)Sie müssen dieses Modul nicht manuell verknüpfen, da es die automatische Verknüpfung von React Native unterstützt.
Um die Funktion „Mit Apple anmelden“ in Ihrer App zu aktivieren, legen Sie in der App-Konfiguration Ihres Projekts die Eigenschaft „ios.usesAppleSignIn“ auf „true“ fest:
{
"expo" : {
"ios" : {
"usesAppleSignIn" : true
}
}
} Möglicherweise müssen Sie auch npx expo prebuild ausführen.
Im Folgenden finden Sie einfache Schritte, die Ihnen den Einstieg erleichtern. Die Implementierung unterscheidet sich zwischen iOS und Android. Wenn Sie also Probleme haben, schauen Sie sich unbedingt die Dokumente an. Wenn Sie lieber eine vollständigere Implementierung sehen möchten, überspringen Sie bitte die unten aufgeführten vollständigen Codebeispiele und schauen Sie sich diese an:
React Native Firebase authentifizieren; Sehen Sie sich unseren Firebase-Leitfaden an Importieren Sie das Modul appleAuth (API-Dokumentation) und das exportierte Mitgliedselement AppleButton (API-Dokumentation) aus der @invertase/react-native-apple-authentication -Bibliothek. Richten Sie einen Ereignishandler ( onPress ) ein, um die Authentifizierungsanforderung zu starten.
// 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
}
} Richten Sie einen Ereignis-Listener für den Fall ein, dass die Anmeldeinformationen des Benutzers widerrufen wurden.
// 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 >
) ;
} Es gibt einen Vorgang appleAuth.Operation.LOGOUT , der jedoch nicht wie erwartet funktioniert und von Apple nicht einmal in seinem Beispielcode verwendet wird. Weitere Informationen finden Sie in dieser Ausgabe
Es wird daher empfohlen, beim Abmelden einfach alle Daten zu löschen, die Sie von einem Benutzer haben und die während appleAuth.Operation.LOGIN gesammelt wurden.
Stellen Sie sicher, dass Sie Ihr Apple-Entwicklerkonto richtig konfigurieren, um eine ordnungsgemäße Authentifizierung auf Android zu ermöglichen. Weitere Informationen finden Sie in unserem Leitfaden.
// 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
}Diese Bibliothek funktioniert unter MacOS 10.15+, wenn sie in Verbindung mit React-Native-MacOS verwendet wird.
yarn add react-apple-signin-auth in Ihrem Webprojekt. 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) und appleAuthAndroid.configure (Android) bereitgestellte Nonce automatisch SHA256-gehasht. 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 ,
} ) ; Die gesamte API-Dokumentation wird von typedoc generiert und ist im Ordner typedocs verfügbar
Warum geben full name und email null zurück?
full name und email zurück. Bei der folgenden Anmeldung wird null zurückgegeben, sodass Sie diese Daten speichern müssen. 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 , tippen Sie auf Ihre App und dann auf Stop Using Apple ID . Sie können sich jetzt erneut anmelden und erhalten den full name und die E-Mail-Adresse.email Eigenschaft zugreifen können, indem Sie den von Apple zurückgegebenen id_token überprüfen, wenn Sie den Benutzer verifizieren.Wie ändere ich die Tastensprache? (iOS)
< key >CFBundleDevelopmentRegion</ key >
< string >en</ string >< key >CFBundleAllowMixedLocalizations</ key >
< string >true</ string >Wie erhalte ich die E-Mail nach dem ersten Login?
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.)
Überprüfen Sie, ob die Verbindungseinstellungen korrekt vorgenommen wurden. Das Setup finden Sie hier: Ersteinrichtung
Wenn Sie die Funktion getCredentialStateForUser auf einem Simulator verwenden, wird dieser Fehler immer ausgelöst, da diese Funktion die Authentizität des Geräts überprüft.
Sie müssen Ihren Code auf einem echten Gerät testen.
Wenn Sie einen Simulator verwenden, gehen Sie zu „Apple-Konto verwalten“.
Suchen Sie nach „Geräte“, wählen Sie „Simulator“ und klicken Sie auf „Aus Konto entfernen“.
Es sollte gut funktionieren.
"invalid_client" in Android webview
Lesen Sie unbedingt die Dokumentation zur Einrichtung der Android-Dienste.
Die clientId die Sie an appleAuthAndroid.configure übergeben haben, stimmt nicht mit der Service-ID überein, die Sie in Ihrer Apple-Entwicklerkonsole eingerichtet haben.
Ihre Service-ID ist mit der falschen primären App-ID verknüpft und verwendet daher den falschen Schlüssel „Mit Apple anmelden“.
Die weitergeleitete redirectUri an appleAuthAndroid.configure stimmt nicht mit einer der Rückgabe-URLs oder Domänen/Subdomänen überein, die Sie in Ihrer Apple-Entwicklerkonsole hinzugefügt haben. Die URL muss genau übereinstimmen und darf keine Abfragezeichenfolge enthalten.
Gebaut und gewartet von Invertase.
