React Native VK authorization wrapper
Installation
yarn add rn-vk-auth
or
npm install rn-vk-auth --save
Then you should configure native parts:
Android
-
Edit
android/settings.gradle
... include ':rn-vk-auth' project(':rn-vk-auth').projectDir = new File(settingsDir, '../node_modules/rn-vk-auth/android') ...
-
Edit
android/app/build.gradle
... dependencies { ... compile project(':rn-vk-auth') }
-
Edit
android/app/src/main/java/<...>/MainApplication.java
... import com.mastereugene.vkauth.VKAuthPackage; //<---- import package public class MainApplication extends Application implements ReactApplication { ... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), ... new VKAuthPackage()//<---- Add package ); } ... }
-
In your
AndroidManifest.xml
, add following line inside<application>
element:<activity android:name="com.vk.sdk.VKServiceActivity" android:label="ServiceActivity" android:theme="@style/VK.Transparent" />
-
Add VK Application ID to resources (
main/res/values/strings.xml
) so the module will initialize with it at startup:<integer name="com_vk_sdk_AppId">VK_APP_ID</integer>
(In this example, VK_APP_ID should be replaced with your real VK App ID you've got from VK manage panel)
iOS
-
Add
rn-vk-auth
to your XCode project. To do so, go tonode_modules/rn-vk-auth/ios
directory inside your project and dragVKAuthorization.xcodeproj
into your XCode projectThen add library
libRNVkontakteLogin.a
toLinked Frameworks and Libraries
section. -
Add
VKSdkFramework.framework
to embedded binaries. This can be done inEmbedded binaries
section of General Tab of your project in XCode. -
Add following fragment to your
info.plist
:<key>LSApplicationQueriesSchemes</key> <array> <string>vk</string> <string>vkauthorize</string> </array>
-
To use authorization via VK App you need to setup a url-schema of your application. Open your application settings then select the Info tab. In the URL Types section click the plus sign. Enter vk+APP_ID to the Identifier and URL Schemes fields.
Alternatively, you can add following to your info.plist: ```xml <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>vk1111111</string> <key>CFBundleURLSchemes</key> <array> <string>vk1111111</string> </array> </dict> </array> ``` Here vk1111111 is your real VK App ID you've got from VK App manage panel
-
In your AppDelegate.m, you need to import VK SDK:
#import <VKSdkFramework/VKSdkFramework.h>
and then add following code (both methods are required):
//iOS 9 workflow - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options { [VKSdk processOpenURL:url fromApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]]; return YES; } //iOS 8 and lower -(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { [VKSdk processOpenURL:url fromApplication:sourceApplication]; return YES; }
-
(Optional) You can add your VK Application ID to
info.plist
so the module will initialize with it at startup:<key>VK_APP_ID</key> <integer>1111111</integer>
If you do so, you won't need to call
VKLogin.initialize(vkAppId)
from your JS code.
The last step is to run pod install
:
cd ios && pod install
Usage
Import module in your JS code
import VKAuth from 'rn-vk-auth';
Initialize VK with your APP ID once somewhere during your app startup(only iOS):
componentDidMount() {
VKAuth.initialize(1111111);
}
Check if user is logged in, perform login and logout:
const isLoggedIn = await VKAuth.isLoggedIn();
const auth = await VKAuth.login(['friends', 'photos', 'email']);
console.log(auth.access_token);
await VKAuth.logout();