Back4App

Sign In with VK (VKontakte) Tutorial

Introduction

Sign In with VK (VKontakte) enables users to sign in to Apps using their VK accounts.

Step 1 - Create a New Back4App App

First of all, it’s necessary to make sure that you have an existing app created at Back4App. However, if you are a new user, you can check this tutorial to learn how to create one.

Step 2 - Create a new VK App

Create a new VK Application by going to VK Developers and click the Create app button

Fill up the Title and choose the Platfomr as Standalone app, then click the Connect app button

Choose a Categoryfor your app and, if applies, Type of laderboardand Community. Click Save

Under the Settings tab of your VK Application, you will find your App ID, Secure key, Service token among other useful info. Fill up your Website address and the Base domain for it. Save it.

Step 3 - Retrieve your Code

Copy the App ID from your to use as the YOUR_CLIENT_ID and the use your Website address as YOUR_REDIRECT_URI, and choose a scope to use in YOUR_SCOPE from the available options.

Then visit the following URL changing the parameters above:

1
https://oauth.vk.com/authorize?client_id=YOUR_CLIENT_ID&scope=YOUR_SCOPE&redirect_uri=https://localhost&response_type=token

It will ask you to log in to VK:

Alternatively, you can use the following CURL command to retrieve your token:

1
2
3
4
5
6
curl -X POST \
    -F \'client_id=YOUR_CLIENT_ID' 
    -F 'scope=YOUR_SCOPE'
    -F 'redirect_uri=YOUR_REDIRECT_URI' 
    -F 'response_type=token' 
    https://oauth.vk.com/authorize?

Run it and you should retrieve your access token:

REMEMBER: the code can be used only once. If you get an error or don’t use your token, you must re-generate your Code to be able to run it again.

Step 4 - Configure your Back4app App

In your Back4app App, go to Server Settings and open the VKontakte Login box

Fill up your Application Id and VKontakte Application Secret. Save it.

Step 5 - Start the development

Now that the Sign In with VK is configured, you can start the development process.
The format for AUTHDATA is:

1
2
3
4
5
6
{
  "vkontakte": {
    "id": "user's vkontakte id (string)",
    "access_token": "an authorized vkontakte access token for the user"
  }
}

Here is the method for the iOS SDK:

1
2
3
PFUser.logInWithAuthType(inBackground: "vkontakte", authData: ["access_token":tokenString, "id": user]).continueWith { task -> Any? in
    
}

And here for the Android SDK:

1
2
3
4
5
6
Map<string, string, bool> authData = new HashMap<string, string, bool>(); 
authData.put("access_token", tokenString);
authData.put("id", user);
ParseUser.logInWithInBackground("vkontakte", authData){

}