react native apple authentication
v2.4.0 - visionOS support
Pustaka React Native yang diketik dengan baik menyediakan dukungan untuk Otentikasi Apple di iOS dan Android, termasuk dukungan untuk semua varian AppleButton .
Pustaka @invertase/react-native-apple-authentication tidak akan berfungsi jika Anda tidak memastikan hal berikut:
Anda menggunakan React Native versi 0.60 atau lebih tinggi.
(Khusus iOS) Anda telah menyiapkan lingkungan pengembangan iOS asli reaksi di mesin Anda (Hanya akan berfungsi di Mac). Jika belum, silakan ikuti dokumentasi resmi React Native untuk memulai: dokumentasi memulai React Native.
(Khusus iOS) Anda menggunakan Xcode versi 11 atau lebih tinggi. Ini akan memungkinkan Anda untuk mengembangkan menggunakan iOS versi 13 dan lebih tinggi, ketika API untuk Masuk dengan Apple telah tersedia.
Setelah Anda yakin telah memenuhi hal di atas, ikuti panduan pengaturan lingkungan pengembangan awal kami.
Versi 2 menambahkan dukungan Android dan memperkenalkan beberapa perubahan yang dapat mengganggu cara metode diakses. Silakan lihat Panduan Migrasi.
yarn add @invertase/react-native-apple-authentication
(cd ios && pod install)Anda tidak perlu menautkan modul ini secara manual karena modul ini mendukung penautan otomatis React Native.
Untuk mengaktifkan kemampuan Masuk dengan Apple di aplikasi Anda, setel properti ios.usesAppleSignIn ke true di konfigurasi aplikasi proyek Anda:
{
"expo" : {
"ios" : {
"usesAppleSignIn" : true
}
}
} Anda mungkin juga perlu menjalankan npx expo prebuild .
Berikut adalah langkah-langkah sederhana untuk membantu Anda memulai dan menjalankannya. Penerapannya berbeda antara iOS dan Android, jadi jika Anda mengalami masalah, pastikan untuk membaca dokumennya. Silakan lewati dan buka contoh kode lengkap di bawah ini jika Anda lebih suka melihat implementasi yang lebih lengkap:
React Native Firebase ; lihat panduan Firebase kami Impor modul appleAuth (dokumentasi API) dan elemen anggota yang diekspor AppleButton (dokumentasi API) dari perpustakaan @invertase/react-native-apple-authentication . Siapkan pengendali peristiwa ( onPress ) untuk memulai permintaan autentikasi.
// 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
}
} Siapkan pendengar acara ketika kredensial pengguna telah dicabut.
// 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 >
) ;
} Ada operasi appleAuth.Operation.LOGOUT , namun operasi tersebut tidak berfungsi seperti yang diharapkan dan bahkan tidak digunakan oleh Apple dalam kode contohnya. Lihat masalah ini untuk informasi lebih lanjut
Jadi disarankan saat keluar untuk menghapus semua data yang Anda miliki dari pengguna, yang dikumpulkan selama appleAuth.Operation.LOGIN .
Pastikan untuk mengonfigurasi akun pengembang Apple Anda dengan benar untuk memungkinkan autentikasi yang tepat di Android. Anda dapat membaca panduan kami untuk info lebih lanjut.
// 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
}Pustaka ini berfungsi di MacOS 10.15+ jika digunakan bersama dengan react-native-macos.
yarn add react-apple-signin-auth di proyek web Anda. 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) dan appleAuthAndroid.configure (Android) secara otomatis di-hash 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 ,
} ) ; Semua dokumentasi API dihasilkan oleh typedoc, dan tersedia di folder typedocs
Mengapa full name dan email menghasilkan null ?
full name dan email pada login pertama, itu akan mengembalikan null pada login berikutnya sehingga Anda perlu menyimpan data tersebut. 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 , ketuk aplikasi Anda dan ketuk Stop Using Apple ID . Anda sekarang dapat masuk lagi dan Anda akan menerima full name dan `email.email dengan memeriksa id_token yang dikembalikan dari Apple saat memverifikasi pengguna.Bagaimana cara mengubah bahasa tombol? (iOS)
< key >CFBundleDevelopmentRegion</ key >
< string >en</ string >< key >CFBundleAllowMixedLocalizations</ key >
< string >true</ string >Bagaimana cara mendapatkan email setelah login pertama?
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.)
Periksa apakah pengaturan koneksi telah dibuat dengan benar. Pengaturannya dapat ditemukan di sini: Pengaturan Awal
Jika Anda menggunakan fungsi getCredentialStateForUser pada simulator, kesalahan ini akan selalu terpicu, karena fungsi ini memverifikasi keaslian perangkat.
Anda harus menguji kode Anda pada perangkat nyata.
Jika Anda menggunakan simulator, buka Kelola Akun Apple.
Cari "Perangkat", pilih "Simulator" dan tekan "Hapus dari Akun".
Ini seharusnya berfungsi dengan baik.
"invalid_client" in Android webview
Pastikan untuk membaca dokumen pengaturan layanan Android.
clientId yang Anda teruskan ke appleAuthAndroid.configure tidak cocok dengan ID Layanan yang Anda siapkan di konsol pengembang Apple.
ID Layanan Anda dilampirkan ke ID Aplikasi Utama yang salah, dan oleh karena itu menggunakan kunci Masuk dengan Apple yang salah.
redirectUri yang Anda teruskan ke appleAuthAndroid.configure tidak cocok dengan salah satu URL kembali atau domain/subdomain yang Anda tambahkan di konsol pengembang Apple. URL harus sama persis , dan tidak boleh berisi string kueri.
Dibangun dan dikelola oleh Invertase.
