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 によって構築および保守されています。
