模板版本:v0.4.0

react-native-apple-authentication

Supported platforms License

本项目基于 @invertase/react-native-apple-authentication 开发。

该第三方库的仓库已迁移至 Gitcode,且支持直接从 npm 下载,新的包名为:@react-native-ohos/react-native-apple-authentication 版本所属关系如下:

三方库名称 三方库版本 发布信息 支持RN版本 Autolink 编译API版本 社区基线版本 npm地址
@react-native-ohos/react-native-apple-authentication ~ 2.5.0 Gitcode Releases 0.82.* API12+ 2.4.1 Npm Address
@react-native-ohos/react-native-apple-authentication ~ 2.4.2 Gitcode Releases 0.77.* API12+ 2.4.1 Npm Address
@react-native-ohos/react-native-apple-authentication ~ 2.3.1 Gitcode Releases 0.72.* API12+ 2.3.0 Npm Address
@react-native-oh-tpl/react-native-apple-authentication Releases(deprecated) <= 2.3.0-0.0.1@deprecated Github Releases(deprecated) 0.72.* API12+ 2.3.0 Npm Address

1. 安装与使用

进入到工程目录并输入以下命令:

npm

npm install @react-native-ohos/react-native-apple-authentication

yarn

yarn add @react-native-ohos/react-native-apple-authentication

配置用于 Web 的“通过 Apple 登录”

首先需要进行客户端id配置:Initial Development Environment Setup

然后需要进行服务设置:Services setup

Apple官方配置说明:Configure Sign in with Apple for the web

下面的代码展示了这个库的基本使用场景:

使用时 import 的库名不变。

import React from 'react';
import { View } from 'react-native';
import { appleAuthHarmony, AppleButton } from '@invertase/react-native-apple-authentication';

const AppleAuthenticationDemo: React.FC = (): JSX.Element => {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <AppleButton
                onPress={async () => {
                    appleAuthHarmony.configure({
                        // 以下配置请参考原库AppleId登录文档:
                        // https://github.com/invertase/react-native-apple-authentication/blob/main/docs/INITIAL_SETUP.md
                        // https://github.com/invertase/react-native-apple-authentication/blob/main/docs/ANDROID_EXTRA.md
                        clientId: 'com.example.client', 
                        redirectUri: 'https://example.com'
                    })
                    const singInRes = await appleAuthHarmony.signIn()
                    console.log(singInRes)
                }}
            />
        </View>
    )
}

export default AppleAuthenticationDemo;

使用 Codegen

本库已经适配了 Codegen ,在使用前需要主动执行生成三方库桥接代码,详细请参考 Codegen 使用文档

是否支持autolink RN框架版本
~2.5.0 Yes 0.82
~2.4.2 No 0.77
~2.3.1 Yes 0.72
<= 2.3.0-0.0.1@deprecated No 0.72

使用AutoLink的工程需要根据该文档配置,Autolink框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过ManualLink配置。

ManualLink: 此步骤为手动配置原生依赖项的指导

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

1.在工程根目录的 oh-package.json5 添加 overrides 字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.引入原生端代码

目前有两种方法:

  1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
  2. 直接链接源码。

方法一:通过 har 包引入(推荐)

har 包位于三方库安装路径的 `harmony` 文件夹下。

打开 entry/oh-package.json5,添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-apple-authentication": "file:../../node_modules/@react-native-ohos/react-native-apple-authentication/harmony/react-native-apple-authentication.har"
  }

点击右上角的 sync 按钮

或者在终端执行:

cd entry
ohpm install

方法二:直接链接源码

如需使用直接链接源码,请参考[直接链接源码说明](./link-source-code.md)

3.配置 CMakeLists 和引入 RNOHAppleAuthenticationPackage

若使用的是 <= 2.3.0-0.0.1 版本,请跳过本章。

打开 entry/src/main/cpp/CMakeLists.txt,添加:

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp")
set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

# (VM) Define a variable and assign it to the current module's cpp directory
set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})

# Add the Header File directory, including cpp, cpp/include, and tell cmake to find the Header Files introduced by the code here
include_directories(${NATIVERENDER_ROOT_PATH}
                    ${NATIVERENDER_ROOT_PATH}/include)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-apple-authentication/src/main/cpp" ./react-native-apple-authentication)
# RNOH_BEGIN: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "${CMAKE_CURRENT_SOURCE_DIR}/generated/*.cpp") # this line is needed by codegen v1

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)
+ target_link_libraries(rnoh_app PUBLIC rnoh_apple_authentication)

打开 entry/src/main/cpp/PackageProvider.cpp,添加:


#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "RNOHAppleAuthenticationPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx)
{
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
+ 			std::make_shared<RNOHAppleAuthenticationPackage>(ctx),
    };
}

4.在 ArkTs 侧引入 RNAppleAuthPackage

打开 entry/src/main/ets/RNPackagesFactory.ets,添加:

  ...
+ import { RNAppleAuthPackage } from '@react-native-ohos/react-native-apple-authentication';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RNAppleAuthPackage(ctx)
  ];
}

运行

点击右上角的 sync 按钮

或者在终端执行:

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。

在以下版本验证通过:

  1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
  2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
  3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
  4. RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7

属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。

AppleButton:Apple身份验证按钮组件。

Name Description Type Required Platform HarmonyOS Support
style 按钮样式 StyleProp< ViewStyle > no all yes
textStyle 按钮内文字样式 StyleProp< TextStyle > no all yes
cornerRadius 按钮边框圆角弧度 number no all yes
buttonStyle 按钮样式(预设枚举) AppleButtonStyle no all yes
buttonType 按钮类型(预设枚举) AppleButtonType no all yes
onPress 按钮点击事件 () => void yes all yes
leftView 按钮内左侧图标 ReactNode no all yes
buttonText 按钮内文字内容 string no all yes

API

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。

appleAuthHarmony:Apple身份验证对象,包含2个方法。

Name Description Type Required Platform HarmonyOS Support
configure 配置 Apple 身份验证的信息,此接口必须在 signIn 之前调用 (Config) => void no all yes
signIn 弹出 webview 以进行 Apple 身份验证 () => Promise< SigninResponse > no all no

其他

遗留问题

开源协议

本项目基于 Apache License 2.0 ,请自由地享受和参与开源。