跳到主内容

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

运行前,请启动模拟器或连接设备。

预览​

iOSAndroid
iOS-loginAndroid-login

点击 Login with Casdoor 打开 Casdoor 登录页。

iOSAndroid
iOS-casdoor-loginAndroid-casdoor-login

登录后,将显示用户个人资料。

iOSAndroid
iOS-userInfoAndroid-userInfo
iOSAndroid
iOS-gifAndroid-gif

集成​

示例使用 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。