React Native app
The casdoor-react-native-example and casdoor-react-native-sdk show how to use Casdoor in React Native.
Run the example
Quick start
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 then react-native run-ios
Android: react-native start then react-native run-android
Start an emulator or connect a device before running.
预览
| iOS | Android |
|---|---|
 |  |
Click Login with Casdoor to open the Casdoor login screen.
| iOS | Android |
|---|---|
 |  |
After sign-in, the user profile is shown.
| iOS | Android |
|---|---|
 |  |
| iOS | Android |
|---|---|
 |  |
Integration
The example uses casdoor-react-native-sdk. To use it in your own project:
1. Install the SDK
# NPM
npm i casdoor-react-native-sdk
# Yarn
yarn add casdoor-react-native-sdk
2. Initialize
Set these 7 string parameters (all required except redirectPath and signinPath):
| 名称（按顺序） | 必须 | 描述 |
|---|---|---|
| serverUrl | 是 | 你的Casdoor服务器URL |
| clientId | 是 | 你的Casdoor应用的客户端ID |
| appName | Yes | 你的Casdoor应用的名称 |
| organizationName | Yes | 与你的Casdoor应用关联的Casdoor组织的名称 |
| redirectPath | 否 | 你的Casdoor应用的重定向URL的路径，如果未提供，将是/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. Use the SDK
Typical flow:
// 获取登录url
getSigninUrl()
// 获取访问令牌
getAccessToken(redirectUrl); // http://localhost:5000/callback?code=b75bc5c5ac65ffa516e5&state=gjmfdgqf498
// 解码jwt令牌以获取用户信息
JwtDecode(jwtToken)
See casdoor-react-native-sdk for the full API.