React Native Ali Onepass

https://github.com/yoonzm/react-native-ali-onepass
Admin
React Native Ali Onepass is a React Native library that provides Alibaba's OnePass (QuickPass)...
Tokens:5,283
Snippets:37
Trust Score:7.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Implement Complete One-Click Login Flow

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

This example demonstrates the full lifecycle of the OnePass SDK, including initialization, event listener setup, UI customization, and backend token verification.

```javascript
import React, { Component } from 'react';
import { View, Button, Alert, Platform } from 'react-native';
import * as OnePass from 'react-native-ali-onepass';

export default class LoginScreen extends Component {
  listeners = [];

  async componentDidMount() {
    await this.initializeOnePass();
    this.setupEventListeners();
  }

  componentWillUnmount() {
    this.listeners.forEach(l => l.remove());
  }

  async initializeOnePass() {
    try {
      const key = Platform.OS === 'ios' ? IOS_KEY : ANDROID_KEY;
      await OnePass.init(key);

      const available = await OnePass.checkEnvAvailable();
      if (available) {
        await OnePass.prefetch();
        this.setState({ onePassReady: true });
      }
    } catch (error) {
      console.error('OnePass init failed:', error);
    }
  }

  setupEventListeners() {
    this.listeners.push(
      OnePass.addListener(OnePass.EVENTS.onTokenSuccess, async (data) => {
        if (Number(data.code) === 600000) {
          try {
            // Verify token with your backend
            const response = await fetch('https://api.yourserver.com/verify', {
              method: 'POST',
              body: JSON.stringify({ token: data.token }),
            });
            const { phoneNumber } = await response.json();

            await OnePass.hideLoginLoading();
            await OnePass.quitLoginPage();

            // Login successful - proceed with phone number
            this.props.onLoginSuccess(phoneNumber);
          } catch (error) {
            await OnePass.hideLoginLoading();
            Alert.alert('Error', 'Server verification failed');
          }
        } else if (Number(data.code) === 700001) {
          await OnePass.quitLoginPage();
          this.props.onSwitchToSMS();
        }
      }),

      OnePass.addListener(OnePass.EVENTS.onTokenFailed, (data) => {
        Alert.alert('Login Failed', data.msg);
      })
    );
  }

  handleOnePassLogin = async () => {
    const operatorType = await OnePass.getOperatorType();

    await OnePass.setUIConfig({
      navText: 'Quick Login',
      logoImgPath: 'app_logo',
      sloganText: `${operatorType} authentication`,
      logBtnText: 'One-click Login',
      switchAccText: 'Use SMS instead',
      privacyState: true,
      appPrivacyOneName: '《Terms》',
      appPrivacyOneUrl: 'https://example.com/terms',
    });

    await OnePass.onePass();
  };

  render() {
    return (
      <View>
        <Button
          title="One-click Login"
          onPress={this.handleOnePassLogin}
          disabled={!this.state.onePassReady}
        />
      </View>
    );
  }
}
```

--------------------------------

### Install react-native-ali-onepass

Source: https://github.com/yoonzm/react-native-ali-onepass/blob/master/README.md

Commands to install the package using npm or yarn.

```bash
$ npm install react-native-ali-onepass --save
```

```bash
$ yarn add react-native-ali-onepass
```

--------------------------------

### Get Operator Type

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Returns the current carrier name (China Mobile, China Unicom, or China Telecom) for display in the authorization UI.

```APIDOC
## Get Operator Type

Returns the current carrier name (China Mobile, China Unicom, or China Telecom) for display in the authorization UI.

### Method

```javascript
OnePass.getOperatorType()
```

### Parameters

None

### Request Example

```javascript
import * as OnePass from 'react-native-ali-onepass';

const operatorType = await OnePass.getOperatorType();
// Returns: "中国移动", "中国联通", or "中国电信"
console.log(`Current carrier: ${operatorType}`);

// Use in slogan text
const config = {
  sloganText: `${operatorType}提供认证服务`,
  // ... other config
};
```

### Response

#### Success Response (200)

- **operatorType** (string) - The name of the current carrier (e.g., "中国移动", "中国联通", "中国电信").
```

--------------------------------

### Get Operator Type

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Returns the current carrier name (e.g., '中国移动', '中国联通', or '中国电信') for display in the authorization UI. This can be used to customize UI elements like slogans.

```javascript
import * as OnePass from 'react-native-ali-onepass';

const operatorType = await OnePass.getOperatorType();
// Returns: "中国移动", "中国联通", or "中国电信"
console.log(`Current carrier: ${operatorType}`);

// Use in slogan text
const config = {
  sloganText: `${operatorType}提供认证服务`,
  // ... other config
};

```

--------------------------------

### Configure Android settings.gradle

Source: https://github.com/yoonzm/react-native-ali-onepass/blob/master/README.md

Add the library project to the Android settings file.

```gradle
include ':react-native-ali-onepass'
	project(':react-native-ali-onepass').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-ali-onepass/android')
```

--------------------------------

### Initialize SDK

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Initializes the OnePass SDK with your business ID. This must be called before using any other APIs.

```APIDOC
## Initialize SDK

Initializes the OnePass SDK with your business ID (secret key) obtained from Alibaba Cloud console. This must be called before using any other APIs.

### Method

```javascript
OnePass.init(businessId: string)
```

### Parameters

#### Request Body

- **businessId** (string) - Required - Your business ID from Alibaba Cloud console. Different keys are typically needed for iOS, Android debug, and Android release.

### Request Example

```javascript
import * as OnePass from 'react-native-ali-onepass';

const businessId = Platform.OS === 'ios'
  ? 'your_ios_secret_key'
  : __DEV__
    ? 'your_android_debug_key'
    : 'your_android_release_key';

try {
  await OnePass.init(businessId);
  console.log('OnePass SDK initialized successfully');
} catch (error) {
  console.error('Failed to initialize OnePass SDK:', error.message);
}
```

### Response

#### Success Response (200)

Indicates successful initialization.

#### Error Response

- **message** (string) - Description of the error.
```

--------------------------------

### Configure Android build.gradle repositories

Source: https://github.com/yoonzm/react-native-ali-onepass/blob/master/README.md

Add the library's local repository path to the android block in build.gradle.

```gradle
repositories {
        flatDir {
            dirs 'libs', '../../node_modules/react-native-ali-onepass/android/libs'
        }
    }
```

--------------------------------

### Link react-native-ali-onepass automatically

Source: https://github.com/yoonzm/react-native-ali-onepass/blob/master/README.md

Command to automatically link the library to the project.

```bash
$ react-native link react-native-ali-onepass
```

--------------------------------

### Configure Fullscreen Login UI

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Configures the appearance of the fullscreen authorization page. Adjust settings for the status bar, navigation, logo, phone number mask, login button, privacy policy, and alternative login options. Ensure helper functions like getOffsetY are defined for responsive layout.

```javascript
import * as OnePass from 'react-native-ali-onepass';
import { Dimensions } from 'react-native';

// Helper function for responsive layout
function getOffsetY(y) {
  return Math.floor(Dimensions.get('window').height * (y - 60) / 650);
}

const uiConfig = {
  // Status bar
  statusBarColor: '#FFFFFF',
  lightColor: true,          // true for dark icons on light background
  statusBarHidden: false,

  // Navigation bar
  navColor: '#FFFFFF',
  navTextColor: '#333333',
  navText: 'Login',
  navTextSize: 18,
  navReturnImgPath: 'back_icon',  // Image asset name
  navReturnImgWidth: 48,
  navReturnImgHeight: 48,

  // WebView navigation (for privacy policy pages)
  webNavColor: '#FFFFFF',
  webNavTextColor: '#333333',
  webNavTextSize: 18,

  // Logo
  logoImgPath: 'app_logo',   // Image asset name
  logoHidden: false,
  logoWidth: 80,
  logoHeight: 80,
  logoOffsetY: getOffsetY(175),
  logoOffsetX: 0,            // iOS only

  // Phone number mask display
  numberColor: '#333333',
  numberSize: 25,
  numberFieldOffsetY: getOffsetY(300),
  numberFieldOffsetX: 0,

  // Slogan text
  sloganText: 'Carrier authentication service',
  sloganTextColor: '#B2B2B2',
  sloganTextSize: 13,
  sloganOffsetY: getOffsetY(384),

  // Login button
  logBtnText: 'One-click Login',
  logBtnTextColor: '#FFFFFF',
  logBtnTextSize: 18,
  logBtnBackgroundPath: 'login_btn_bg',           // Android: drawable name
  logBtnBackgroundPaths: ['btn_normal', 'btn_press', 'btn_unable'], // iOS: [normal, pressed, disabled]
  logBtnMarginLeftAndRight: 35,
  logBtnOffsetY: getOffsetY(417),
  logBtnWidth: 300,
  logBtnHeight: 48,

  // Alternative login option
  switchAccText: 'Other login methods',
  switchAccTextSize: 15,
  switchAccTextColor: '#0EA8FF',
  switchOffsetY: getOffsetY(492),
  switchAccHidden: false,

  // Privacy policy
  privacyBefore: 'By logging in, you agree to ',
  privacyEnd: ' and authorize access to your phone number',
  checkboxHidden: true,
  privacyState: true,        // Checkbox pre-checked
  appPrivacyOneName: '《User Agreement》',
  appPrivacyOneUrl: 'https://example.com/user-agreement',
  appPrivacyTwoName: '《Privacy Policy》',
  appPrivacyTwoUrl: 'https://example.com/privacy',
  vendorPrivacyPrefix: '《',
  vendorPrivacySuffix: '》',
  privacyTextSize: 12,
  appPrivacyBaseColor: '#B2B2B2',
  appPrivacyColor: '#0EA8FF',
  privacyOffsetY: 0,
  privacyBottomOffsetY: 0,
};

await OnePass.setUIConfig(uiConfig);
```

--------------------------------

### Check Environment Availability

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Checks if the device environment supports phone number authentication. Should be called after initialization and when network conditions change.

```APIDOC
## Check Environment Availability

Checks if the device environment supports phone number authentication. Should be called after initialization and when network conditions change.

### Method

```javascript
OnePass.checkEnvAvailable()
```

### Parameters

None

### Request Example

```javascript
import * as OnePass from 'react-native-ali-onepass';

try {
  const isAvailable = await OnePass.checkEnvAvailable();
  if (isAvailable) {
    console.log('OnePass authentication is available');
    // Proceed with prefetch and login
  } else {
    console.log('OnePass not available - fall back to SMS verification');
  }
} catch (error) {
  // Handle specific error codes
  console.error('Environment check failed:', error.message);
}
```

### Response

#### Success Response (200)

- **isAvailable** (boolean) - True if the environment supports OnePass authentication, false otherwise.

#### Error Response

- **message** (string) - Description of the error.
```

--------------------------------

### Reference Result Codes

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Use these constants to handle specific SDK outcomes, including success, failure, and user-triggered actions.

```javascript
import { RESULT_CODES } from 'react-native-ali-onepass';

// Success codes
RESULT_CODES[600000] // Token obtained successfully
RESULT_CODES[600001] // Authorization page displayed successfully

// Failure codes
RESULT_CODES[600002] // Failed to display authorization page
RESULT_CODES[600004] // Failed to get carrier configuration
RESULT_CODES[600005] // Device security check failed
RESULT_CODES[600007] // No SIM card detected
RESULT_CODES[600008] // Cellular network not enabled
RESULT_CODES[600009] // Cannot determine carrier
RESULT_CODES[600010] // Unknown error
RESULT_CODES[600011] // Failed to get token
RESULT_CODES[600012] // Prefetch failed
RESULT_CODES[600013] // Carrier service under maintenance
RESULT_CODES[600014] // API call limit reached
RESULT_CODES[600015] // Request timeout
RESULT_CODES[600017] // AppID/AppKey parsing failed
RESULT_CODES[600021] // Carrier changed during login

// User action codes
RESULT_CODES[700000] // User clicked back/cancel
RESULT_CODES[700001] // User clicked "other login methods"
RESULT_CODES[700002] // User clicked login button
RESULT_CODES[700003] // User toggled privacy checkbox
RESULT_CODES[700004] // User clicked privacy policy text
```

--------------------------------

### Initialize OnePass SDK

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Initializes the OnePass SDK with your business ID. This must be called before using any other APIs. Different keys may be needed for iOS, Android debug, and Android release builds.

```javascript
import * as OnePass from 'react-native-ali-onepass';

// Initialize with your business ID from Alibaba Cloud console
// Different keys are typically needed for iOS, Android debug, and Android release
const businessId = Platform.OS === 'ios'
  ? 'your_ios_secret_key'
  : __DEV__
    ? 'your_android_debug_key'
    : 'your_android_release_key';

try {
  await OnePass.init(businessId);
  console.log('OnePass SDK initialized successfully');
} catch (error) {
  console.error('Failed to initialize OnePass SDK:', error.message);
}
```

--------------------------------

### Check Environment Availability

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Checks if the device environment supports phone number authentication. Call this after initialization and when network conditions change. Handle specific error codes if the check fails.

```javascript
import * as OnePass from 'react-native-ali-onepass';

try {
  const isAvailable = await OnePass.checkEnvAvailable();
  if (isAvailable) {
    console.log('OnePass authentication is available');
    // Proceed with prefetch and login
  } else {
    console.log('OnePass not available - fall back to SMS verification');
  }
} catch (error) {
  // Handle specific error codes
  console.error('Environment check failed:', error.message);
}
```

--------------------------------

### Trigger One-Click Login

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Initiates the one-click login flow by displaying the authorization page. Ensure that UI configuration (either fullscreen or dialog) is set before calling this method. Results are handled through event listeners like onTokenSuccess and onTokenFailed.

```javascript
import * as OnePass from 'react-native-ali-onepass';

// Must configure UI before calling onePass
await OnePass.setUIConfig(uiConfig);

// Display authorization page
await OnePass.onePass();
// Results come through onTokenSuccess/onTokenFailed events
```

--------------------------------

### Configure Android build.gradle dependencies

Source: https://github.com/yoonzm/react-native-ali-onepass/blob/master/README.md

Add the library as a dependency in the app-level build.gradle file.

```gradle
compile project(':react-native-ali-onepass')
```

--------------------------------

### Listen for Authentication Events

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Register listeners for token success and failure events. Ensure listeners are cleaned up when the component unmounts to prevent memory leaks.

```javascript
import * as OnePass from 'react-native-ali-onepass';

// Store listeners for cleanup
const listeners = [];

// Success handler
listeners.push(
  OnePass.addListener(OnePass.EVENTS.onTokenSuccess, async (data) => {
    const { code, msg, token, vendorName, requestCode } = data;
    const numericCode = Number(code);

    switch (numericCode) {
      case OnePass.RESULT_CODES[600000]:
        // Token obtained successfully
        console.log('Token:', token);
        console.log('Carrier:', vendorName);

        // Send token to your server to exchange for phone number
        // await yourApi.verifyToken(token);

        // Hide loading and close page
        await OnePass.hideLoginLoading();
        await OnePass.quitLoginPage();
        break;

      case OnePass.RESULT_CODES[600001]:
        // Authorization page displayed successfully
        console.log('Login page shown');
        break;

      case OnePass.RESULT_CODES[700000]:
        // User clicked back button
        console.log('User cancelled login');
        await OnePass.quitLoginPage();
        break;

      case OnePass.RESULT_CODES[700001]:
        // User clicked "other login methods"
        console.log('User chose alternative login');
        await OnePass.quitLoginPage();
        // Navigate to SMS/password login
        break;

      case OnePass.RESULT_CODES[700002]:
        // User clicked login button
        console.log('Login button clicked');
        break;

      case OnePass.RESULT_CODES[700003]:
        // User toggled privacy checkbox
        console.log('Checkbox toggled');
        break;

      case OnePass.RESULT_CODES[700004]:
        // User clicked privacy policy link
        console.log('Privacy policy clicked');
        break;

      default:
        console.log('Other event:', msg);
    }
  })
);

// Failure handler
listeners.push(
  OnePass.addListener(OnePass.EVENTS.onTokenFailed, (data) => {
    const { code, msg, vendorName, requestCode } = data;
    console.error('Login failed:', code, msg);

    // Show error to user
    Alert.alert('Login Failed', msg);

    // Fall back to alternative login method
  })
);

// Cleanup on unmount
function cleanup() {
  listeners.forEach(listener => listener.remove());
}
```

--------------------------------

### Prefetch Phone Number

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Pre-loads authentication data to accelerate the login page display. Call this after successful environment check for faster login experience.

```APIDOC
## Prefetch Phone Number

Pre-loads authentication data to accelerate the login page display. Call this after successful environment check for faster login experience.

### Method

```javascript
OnePass.prefetch()
```

### Parameters

None

### Request Example

```javascript
import * as OnePass from 'react-native-ali-onepass';

try {
  await OnePass.prefetch();
  console.log('Prefetch completed - login page will load faster');
} catch (error) {
  // Prefetch failure (code 600012) - can still attempt login
  console.warn('Prefetch failed:', error.message);
}
```

### Response

#### Success Response (200)

Indicates successful prefetching.

#### Error Response

- **message** (string) - Description of the error. A common error code is 600012 for prefetch failure, but login can still be attempted.
```

--------------------------------

### Configure Dialog Login UI

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Configures the appearance of a popup dialog-style authorization page. Customize dialog height, title bar, close button, logo, phone number display, slogan, login button, alternative login options, and privacy settings. This is suitable for overlaying login on existing content.

```javascript
import * as OnePass from 'react-native-ali-onepass';

const dialogConfig = {
  // Dialog-specific settings
  dialogHeightDelta: 100,           // Reduce dialog height by this amount
  alertBarHidden: true,             // Hide default title bar
  alertBarCloseImgPath: 'close_btn', // Custom close button image
  alertBarCloseImgWidth: 30,
  alertBarCloseImgHeight: 30,

  // Logo
  logoImgPath: 'app_logo',
  logoHidden: false,
  logoOffsetY: 48,

  // Phone number
  numberColor: '#333333',
  numberSize: 17,
  numberFieldOffsetY: 120,

  // Slogan
  sloganText: 'Bind your phone number for account security',
  sloganTextColor: '#999999',
  sloganTextSize: 11,
  sloganOffsetY: 90,

  // Login button
  logBtnText: 'Authorize Login',
  logBtnTextColor: '#FFFFFF',
  logBtnTextSize: 16,
  logBtnBackgroundPath: 'button',
  logBtnOffsetY: 170,

  // Alternative login
  switchAccText: 'Use other methods',
  switchAccTextSize: 11,
  switchAccTextColor: '#0EA8FF',
  switchOffsetY: 220,

  // Privacy
  privacyState: false,
  checkboxHidden: false,
  appPrivacyBaseColor: '#999999',
  appPrivacyColor: '#0EA8FF',
  vendorPrivacyPrefix: '《',
  vendorPrivacySuffix: '》',
};

await OnePass.setDialogUIConfig(dialogConfig);
```

--------------------------------

### Hide Login Loading Indicator

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Call this method to dismiss the loading spinner after processing the authentication token on your backend.

```javascript
import * as OnePass from 'react-native-ali-onepass';

// After receiving token and server verification
await OnePass.hideLoginLoading();
```

--------------------------------

### Prefetch Phone Number Data

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Pre-loads authentication data to accelerate the login page display. Call this after a successful environment check for a faster login experience. A failure (code 600012) does not prevent attempting login.

```javascript
import * as OnePass from 'react-native-ali-onepass';

try {
  await OnePass.prefetch();
  console.log('Prefetch completed - login page will load faster');
} catch (error) {
  // Prefetch failure (code 600012) - can still attempt login
  console.warn('Prefetch failed:', error.message);
}
```

--------------------------------

### Close Authorization Page

Source: https://context7.com/yoonzm/react-native-ali-onepass/llms.txt

Manually close the login UI. This must be executed on the main thread.

```javascript
import * as OnePass from 'react-native-ali-onepass';

// Close the login page (must be called on main thread)
await OnePass.quitLoginPage();
```
Tokens:
Raw