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:

// 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) 

See casdoor-react-native-sdk for the full API.

Run the example​

Quick start​

プレビュー​

Integration​

1. Install the SDK​

2. Initialize​

3. Use the SDK​