React Native 应用
casdoor-react-native-example 和 casdoor-react-native-sdk 演示了如何在 React Native 中使用 Casdoor。
运行示例
快速入门
git clone git@github.com:casdoor/casdoor-react-native-example.git
cd casdoor-react-native-example
yarn install
cd ios/ && pod install && cd ..
iOS: react-native start,然后 react-native run-ios
Android: react-native start,然后 react-native run-android
运行前,请启动模拟器或连接设备。
预览
| iOS | Android |
|---|---|
![]() | ![]() |
点击 Login with Casdoor 打开 Casdoor 登录页。
| iOS | Android |
|---|---|
![]() | ![]() |
登录后,将显示用户个人资料。
| iOS | Android |
|---|---|
![]() | ![]() |
| iOS | Android |
|---|---|
![]() | ![]() |
集成
示例使用 casdoor-react-native-sdk。要在您自己的项目中使用:
1. 安装 SDK
# NPM
npm i casdoor-react-native-sdk
# Yarn
yarn add casdoor-react-native-sdk
. 初始化
设置这 7 个字符串参数(除 redirectPath 和 signinPath 外都必填):
| 名称(按顺序) | 必须 | 描述 |
|---|---|---|
| serverUrl | 是 | 你的Casdoor服务器URL |
| clientId | 是 | 你的Casdoor应用的客户端ID |
| 应用程序名称 | 是 | 你的Casdoor应用的名称 |
| organizationName | 是 | 与你的Casdoor应用关联的Casdoor组织的名称 |
| redirectPath | 不 | Casdoor 应用回调地址的路径,不填时为 /callback |
| signinPath | 不 | 你的Casdoor应用的登录URL的路径 |
import SDK from 'casdoor-react-native-sdk'
const sdkConfig = {
serverUrl: 'https://door.casdoor.com',
clientId: 'b800a86702dd4d29ec4d',
appName: 'app-example',
organizationName: 'casbin',
redirectPath: 'http://localhost:5000/callback',
signinPath: '/api/signin',
};
const sdk = new SDK(sdkConfig)
3. 使用SDK
典型流程:
// get the signin url
getSigninUrl()
// get Access Token
getAccessToken(redirectUrl); // http://localhost:5000/callback?code=b75bc5c5ac65ffa516e5&state=gjmfdgqf498
// decode jwt token to get user info
JwtDecode(jwtToken)
完整 API 见 casdoor-react-native-sdk。







