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 必须完全匹配，并且不能包含查询字符串。

执照

查看许可证

由转化酶构建和维护。

展开