react native apple authentication下載 - react native apple authentication原始碼下載

React Native Apple 驗證

一個類型良好的 React Native 庫，提供對 iOS 和 Android 上的 Apple 身份驗證的支持，包括對所有AppleButton變體的支持。

使用該庫的先決條件

如果您不確保以下內容@invertase/react-native-apple-authentication庫將無法運作：

您使用的是 React Native 0.60或更高版本。
（僅限 iOS）您已在電腦上設定了反應本機 iOS 開發環境（僅適用於 Mac）。如果沒有，請按照 React Native 官方文件入門：React Native 入門文件。
（僅限 iOS）您使用的是 Xcode 版本11或更高版本。當 Sign In with Apple 的 API 可用時，這將允許您使用 iOS 版本13及更高版本進行開發。
一旦您確定滿足上述要求，請遵循我們的初始開發環境設定指南。

版本 2.0.0 重大變更

版本 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 Hooks 範例 (iOS)
React 類別範例 (iOS)
React Hooks 範例 (Android)
Auth0 實施
如果您透過React Native Firebase對使用者進行身份驗證；請參閱我們的 Firebase 指南
對於 Android 支援，您的 Apple 開發者帳戶需要執行幾個額外的步驟。查看我們的指南以獲取更多資訊。

iOS系統

1. 初始設定

從@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 >
  ) ;
}

2. 實現登入流程

 // 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
  }
}

3. 事件監聽器

設定使用者憑證被撤銷時的事件偵聽器。

 // 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 >
  ) ;
}

4. 實現註銷流程

有一個操作appleAuth.Operation.LOGOUT ，但是它沒有按預期工作，甚至沒有被 Apple 在其範例程式碼中使用。請參閱此問題以獲取更多信息

因此，建議在登出時清除在appleAuth.Operation.LOGIN期間收集的所有使用者資料。

安卓

1. 初始設定

確保正確配置您的 Apple 開發者帳戶，以便在 Android 上進行正確的身份驗證。您可以查看我們的指南以獲取更多資訊。

 // 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 >
  ) ;
}

2. 實現登入流程

 // 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+ 上運作。

Web（不是react-native-web，但可能會作為後續版本出現，目前這是純Web）

1. 初始設定

確保您遵循上述 Android 步驟。
在您的 Web 專案中安裝 Web 對應的yarn add react-apple-signin-auth 。

2. 實現Web登入流程

 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 ;

3. 驗證伺服器端

將蘋果回應傳送到您的伺服器。
請參閱伺服器端驗證
確保將 clientID 作為 Web 服務 ID 傳遞，而不是本機應用程式套件。由於該項目使用服務 ID 來驗證 Web 和 Android。

服務端驗證

隨機數

根據 Firebase 實作指南，提供給appleAuth.performRequest (iOS) 和appleAuthAndroid.configure (Android) 的隨機數字會自動進行 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參考文檔

所有 API 文件均由 typedoc 生成，並可在typedocs資料夾中找到

常見問題解答

為什麼full name和email會回傳null ？
- Apple 僅在首次登入時傳回full name和email ，在後續登入時會傳回null ，因此您需要儲存這些資料。
- Apple API 似乎對您在身分驗證請求中放置範圍的順序很敏感。將名字放在前面，如下圖所示：
```
 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和“電子郵件”。
- 請記住，您始終可以透過在驗證使用者時檢查 Apple 傳回的id_token來存取email屬性伺服器端。
如何更改按鈕語言？（iOS）
- 本機 Apple Button 元件從 Info.plist 檔案中的 CFBundleDevelopmentRegion 讀取語言值。透過變更 CFBundleDevelopmentRegion 值，您可以變更元件的預設語言。
```
< key >CFBundleDevelopmentRegion</ key >
< string >en</ string >
```
- 為了支援多語言，您可以將 CFBundleAllowMixedLocalizations 鍵新增至 Info.plist。
```
< key >CFBundleAllowMixedLocalizations</ key >
< string >true</ string >
```

首次登入後如何取得電子郵件？

您可以透過解析從任何身份驗證傳回的 JWT 令牌來取得電子郵件地址，如下所示：

 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.)

案例一：

檢查連接設定是否正確。可以在此處找到設定：初始設置

案例2：

如果您在模擬器上使用getCredentialStateForUser函數，則始終會觸發此錯誤，因為該函數會驗證裝置的真實性。

您必須在真實設備上測試您的程式碼。

案例3：

如果您使用的是模擬器，請前往管理 Apple 帳戶。

搜尋“裝置”，選擇“模擬器”，然後按“從帳戶中刪除”。

它應該工作正常。

 "invalid_client" in Android webview

請務必閱讀 Android 服務設定文件。

案例一：

您傳遞給appleAuthAndroid.configure的clientId與您在 Apple 開發人員控制台中設定的服務 ID 不符。

案例2：

您的服務 ID 附加到錯誤的主應用程式 ID，因此使用了錯誤的 Apple 金鑰登入。

案例3：

您傳遞給appleAuthAndroid.configure redirectUri與您在 Apple 開發者控制台中新增的返回 URL 或網域/子網域之一不符。 URL 必須完全匹配，且不能包含查詢字串。

執照

查看許可證

由轉化酶建構和維護。

展開