构建一个 React Native 应用程序并使用 OAuth 2.0 进行身份验证

主要观点:通过 Okta 和 OpenID Connect(OIDC)可轻松将认证集成到 React Native 应用中,无需自行构建。本文展示在 React Native 应用中使用 OIDC 重定向通过 AppAuth 库让用户登录,还介绍了创建 React Native 应用、React Native 与 OAuth 2.0 的结合、在 Okta 中创建原生应用、添加 React Native AppAuth 进行认证、构建 React Native 应用、在 iOS 模拟器和 Android 上运行、升级到最新 React Native 版本、获取和查看 ID 令牌以及使用访问令牌调用 API 等内容。

关键信息

  • 使用create-react-native-app创建新的 React Native 应用,可选择使用 JavaScript 或 TypeScript。
  • 选择 React Native App Auth 库进行认证,因其有示例、使用 AppAuth 且其他库存在问题。
  • 在 Okta 中创建原生应用,获取客户端 ID 和登录重定向 URI。
  • “eject”应用的原生配置,安装 AppAuth 并进行 iOS 和 Android 相关配置,如在 iOS 中使用 CocoaPods 配置 AppAuth-ios,在 Android 中升级 Gradle 版本等。
  • App.js中编写代码实现授权、刷新令牌和撤销令牌等功能,可通过调整config配置项和安装styled-components等依赖来完成。
  • 可在 iOS 模拟器和 Android 上运行应用,获取和查看 ID 令牌,还能使用访问令牌调用 Okta 保护的 API。

重要细节

  • 在 iOS 中需定义支持的重定向 URL 方案,在AppDelegate.hAppDelegate.m中添加相关代码。
  • 在 Android 中需升级 Gradle 版本,添加 Google Maven 仓库和正确的 Android Support 库版本等。
  • 可通过react-native-git-upgrade工具升级项目到最新 React Native 版本。
  • 调用 API 时需注意在 Android 模拟器和真实手机中需将localhost改为 IP 地址,且存在react-native-app-auth中 revoke 方法与 Okta 配合的问题。
  • 可在GitHub上获取应用的源代码,以及通过其他相关资源学习常规 React 开发与 Okta 的结合。
阅读 40
0 条评论