React Native OK SDK is a wrapper around the iOS OK SDK and Android OK SDK, allowing for OK integration in React Native apps. Access to native components for login is provided entirely through documented JavaScript modules so you don't have to call a single native function directly.
Please post questions on sdk set up to stackoverflow for quicker response. Besides it's easier for others searching for similar questions.
Report bugs or issues of this package to react-native-ok-sdk/issues.
Report bugs of IOS OK SDK to ok-ios-sdk/issues or via Telegram.
Report bugs of Android SDK to ok-android-sdk/issues or via Telegram.
You need to install the sdk with npm and configure native Android/iOS project in the react native project.
First create a React Native project:
react-native init YourAppInstall and link the react-native-ok-sdk package:
react-native install react-native-ok-sdkYou can do this with automatically with this command
react-native link react-native-ok-sdkand skip first three steps of followed guide. IMPORTANT: Step 4 is required in every case.
Or you can do it manually:
Assuming you have Android Studio installed, open the project with Android Studio.
This instruction provided for react-native version is 0.29 or above
- Go to
MainApplication.javaunderapp/src/main/java/com/<project name>/to complete setup.
In MainApplication.java import package related to react-native-ok-sdk.
import com.askiirobotics.reactnativeoksdk.OkPackage;
...
public class MainApplication extends Application implements ReactApplication {
...
}- Register sdk package in method
getPackages().
...
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...
new VKAuthPackage()//<---- Add package
);
}
...
}- Next go to
android/settings.gradleand add followed lines:
...
include ':react-native-ok-sdk'
project(':react-native-ok-sdk').projectDir = new File(settingsDir, '../node_modules/react-native-ok-sdk/android')and to android/app/build.gradle:
...
dependencies {
...
compile project(':react-native-ok-sdk')
}- In your
AndroidManifest.xml, add following line inside<application>element:
<activity
android:name="ru.ok.android.sdk.OkAuthActivity"
android:configChanges="orientation|screenSize"
android:launchMode="singleTop">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="okYOUR_APP_KEY"
android:scheme="okauth" />
</intent-filter>
</activity>Note: changle in line android:host="okYOUR_APP_KEY" to key of your OK app.
Make sure that your AndroidManifest.xml contains inside <manifest> element followed line:
<uses-permission android:name="android.permission.INTERNET" />- In the folder of your project run:
react-native link react-native-ok-sdk- Add ok{appId} schema to your app Info.plist file. For example ok12345 if your app has appId 12345. Don't forget add ok{appId}://authorize to allowed redirect urls for your application in ok.ru app profile. You can do this via XCode of manually:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Viewer</string>
<key>CFBundleURLName</key>
<string>ru.ok</string>
<key>CFBundleURLSchemes</key>
<array>
<string>ok12345</string>
</array>
</dict>
...
</array>
...
<key>LSApplicationQueriesSchemes</key>
<array>
<string>ok12345</string>
<string>okauth</string>
...
</array>
...
<key>item0</key>
<string>okauth</string>
<key>item1</key>
<string>ok12345</string>
...Also you should add next block to your Info.plist file.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
...
</dict>If you use PodSec
-
To add CocoaPods to your React Native project, follow steps 2 throught 7 of this tutorial. Add this line:
pod 'react-native-ok-sdk', :path => '../node_modules/react-native-ok-sdk/ios'
to your Podfile (you may need to adjust path if you have non-standard project structure).
Don't forget to fix linker errors by adding $(inherited) to Other Linker Flags in Build Settings:
If you not use PodSec Add OKSDK.h and OKSDK.m to your project. For example you can use git submodule.
- Init your sdk in AppDelegate didFinishLaunchingWithOptions
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
OKSDKInitSettings *settings = [OKSDKInitSettings new];
settings.appKey = @"ABCDEFGABCDEGF";
settings.appId = @"12345";
settings.controllerHandler = ^{
return self.window.rootViewController;
};
[OKSDK initWithSettings: settings];
return YES;
}
2. Add openUrl to AppDelegate openURL
```objective-c
-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
[OKSDK openUrl:url];
return YES;
}- I cannot run the Android project.
- Make sure you added the code snippet in step 3.1.
- Make sure you set up a OK app and updated the
AndroidManifest.xml.
- I get a build error stating that one of the OK SDK files was not found -- eg.
OKSDK.h file not found.
- Make sure that
OKSDK.frameworkshow up in the Link Binary with Libraries section of your build target's Build Phases.
- I get this build error:
no type or protocol named UIApplicationOpenURLOptionsKey:
- Your XCode version is too old, upgrade to XCode 8.0+.
...
import OkManager, { Scopes } from 'react-native-ok-sdk'
class LoginButton extends React.Component {
static propTypes = {
onAuth: React.PropTypes.func
};
constructor(){
this.loginPressed = this.loginPressed.bind(this)
}
loginPressed() {
OkManager.login([Scopes.VALUABLE_ACCESS])
.then(
response => {
console.log('OK login', response);
this.props.onAuth(response);
}
)
.catch(e => {
console.log('OK Login error', e);
})
}
render() {
return (
<View>
<TouchableOpacity
onPress={ this.loginPressed }
/>
</View>
);
}
}See full example in ./example folder.
See the LICENSE file.