Development of an IFrame application in Contact, using the Vkontakte API
A couple of days ago, a friend of mine asked to help her create an Internet voting, as there was not enough functionality in Vkontakte (there you can create a poll for only 15 people). The puzzle turned out to be interesting. So for the cause!
This post can be useful to:
')
We come in contact and create our first application - this can be done on here (I will not describe what needs to be filled there, I think everyone has figured it out)
When our application is created, it's time to take care of where to place it. I did not hesitate to go to my server and created a new subdomain there (no matter how it will be called, no one will know about it)
Server software is the most common:
Installing Joomla - everything is pretty transparent and clear.
What we have in service: a fresh application in Vkontakte and a newly created website on some standard Joomla template.
Here I immediately want to draw attention to the API in Vkontakte!
API there are 2 types:
Using the first one, you can call up various dialog boxes (inviting friends to the application, enrollment of votes, setting access to user data, etc. A detailed description of these methods can be found here .
The possibilities of the second are much more! Accessing the www.vkontakte.ru/api.php script can be done in any convenient way, be it an AJAX request or an HTTP request directly from the server. A description of all api methods is here .
Now more about the initialization of api and work with them. Let's start in order:
The JS API is initialized by adding the following javascript to our template:
src = http: //vkontakte.ru/js/api/xd_connection.js? 2
Immediately I would like to note that “API initialization succeeded” this line is not written in vain and says that the VK.init function will be executed when the API is ready! But not your web resource. In order to check the readiness to execute your js code, you can use your favorite js-library or framework. Personally, I prefer Mootools - and used it.
My initialization code looks like this:
What can we do now? And now we can use the API, that is, for example, to check whether the user has chosen the required parameters for the application to access its data. For example:
To do this, first call the function getUserSettings, which will return to us the bit mask of the current user settings. The call is made using the VK.api method, where the first parameter is the name of the function and the second CallBack function. The data variable is the result of the getUserSettings function, which needs to be checked for an error, if data.error is returned, it means an error! The error may be due to two (in my opinion) reasons: the application is not approved by the site administration (only getProfiles worked before my approval, by the way, I later met posts on forums that everything works in test mode). If the function returns data.response, then we continue to check the bit masks of the current rights and required ones and call the JS API showSettingsBox function with a single parameter (the mask of the required rights, I have 263 - access to photos, friends and links to the application in the left user menu)
About masks in more detail here .
In my opinion, calling the API in Contact methods using the JS API is somehow not good. This is convenient for simple tasks. Fully iframe application built on JS is very time consuming. And so we proceed to the study of HTTP requests to the API.
To do this, we have Joomla and a class that pick up the link vkapi.class.php
to work with the API via PHP, you need to create two constants, each application will include the api_id of your application (it can be seen directly in the address bar when clicking on the link to the application) and the secret key - it is issued when you create the application (it is long and can be changed in the application settings)
API call using PHP is as follows:
The first foreach takes all registered users from my application (but not more than 1000), and then a request is made to the “API in contact” to download data about these users. At the output, we have an array of values ​​of the form: $ ans ['response'] [$ i] ['field'], where response is an array of user data, next $ i element and finally the required property of the user field such as first_name (name) or photo.
The advantages of this approach:
1. Secure API methods become available, which is not unimportant if you need to know the balance or enroll / withdraw votes.
2. No need to write "thousands" of lines of code in JS to work with API
3. We get an easy-to-manage site and application at the same time.
What exactly did I do in Joomla to tell a very long time and do not need it, I just give an approximate logic of the operation of my application.
It's no secret that all Joomla components are based on the MVC pattern. Which puts everything on the shelves!
Controller component accepts all commands / user requests (even for user actions when following links, even using AJAX requests using JS)
Model is responsible for all operations with the database of our component, for me, for example: it displays the voting itself, the lists of those who voted for a certain voting participant, responds to checking and re-voting and a few more auxiliary functions.
View controls the output of various Layouts and the transfer of data from the model to them.
Those who are engaged in the development of components under Joomla are all very clear.
Nobody prevents us from using the vkapi.class.php class anywhere in the application, I personally used it only in view to prepare data for output (for example, by the uid of users in the contact that my application put, I loaded the addresses of photos)
Everyone is already accustomed to a huge number of different forms and buttons from social networks. I also wanted this in my Iframe application. How to connect comments widget:
Do not add the following code to the page:
src = " userapi.com/js/api/openapi.js?22 "
This is suitable for sites, but not suitable for iframe applications!
Enough to do this:
JS API has already implemented the function of adding widgets.
As for the comments themselves, then you know that when a user leaves a comment on the page with the application, it is also published on its wall, but with a link to your website, and not to the application! To avoid this, you need to use the pageURL parameter in which the address of the application will be specified in the format www.vkontakte.ru/app {app_id}
In the end, I did this:
At the exit, we have not a difficult, but a working application in Vkontakte. Which can be easily expanded and developed by adding new and new features and components using your favorite CMS in conjunction with the API in Contact and JS API.
That's what I got: vkontakte.ru/app2176209
Thank you for your attention, with respect, Danila.
PS The administration approved the application every other day, asking for a pledge of 10 votes.
PPS After an hour and a half after that several offers to buy have already been received! Immediately I say not for sale, I do not see the point, now all the more!
This post can be useful to:
- to those who are trying to figure out how the API works in Contact;
- has experience with popular CMS, here we will focus on Joomla;
- strongly limited in time;
Stage 1: Introduction
')
We come in contact and create our first application - this can be done on here (I will not describe what needs to be filled there, I think everyone has figured it out)
Stage 2: server side
When our application is created, it's time to take care of where to place it. I did not hesitate to go to my server and created a new subdomain there (no matter how it will be called, no one will know about it)
Server software is the most common:
- nginx
- apache
- php 5.2+ (as apache module) - the version is important!
- memcahed
- mysql
Installing Joomla - everything is pretty transparent and clear.
Stage 3: JS API and "API in Contact"
What we have in service: a fresh application in Vkontakte and a newly created website on some standard Joomla template.
Here I immediately want to draw attention to the API in Vkontakte!
API there are 2 types:
- Javascript api
- API in Contact
Using the first one, you can call up various dialog boxes (inviting friends to the application, enrollment of votes, setting access to user data, etc. A detailed description of these methods can be found here .
The possibilities of the second are much more! Accessing the www.vkontakte.ru/api.php script can be done in any convenient way, be it an AJAX request or an HTTP request directly from the server. A description of all api methods is here .
Now more about the initialization of api and work with them. Let's start in order:
The JS API is initialized by adding the following javascript to our template:
src = http: //vkontakte.ru/js/api/xd_connection.js? 2
VK.init(function() {
// API initialization succeeded
// Your code here
});
Immediately I would like to note that “API initialization succeeded” this line is not written in vain and says that the VK.init function will be executed when the API is ready! But not your web resource. In order to check the readiness to execute your js code, you can use your favorite js-library or framework. Personally, I prefer Mootools - and used it.
My initialization code looks like this:
VK.init(function() {
// API initialization succeeded
window.addEvent('domready', function(){
//DOM ready
})
});
What can we do now? And now we can use the API, that is, for example, to check whether the user has chosen the required parameters for the application to access its data. For example:
VK.api('getUserSettings', function(data){
if (data.response){
if (!(256 & data.response))
VK.callMethod('showSettingsBox', 263);
}
if (data.error){
alert('Error Code:'+data.error.error);
}
});
To do this, first call the function getUserSettings, which will return to us the bit mask of the current user settings. The call is made using the VK.api method, where the first parameter is the name of the function and the second CallBack function. The data variable is the result of the getUserSettings function, which needs to be checked for an error, if data.error is returned, it means an error! The error may be due to two (in my opinion) reasons: the application is not approved by the site administration (only getProfiles worked before my approval, by the way, I later met posts on forums that everything works in test mode). If the function returns data.response, then we continue to check the bit masks of the current rights and required ones and call the JS API showSettingsBox function with a single parameter (the mask of the required rights, I have 263 - access to photos, friends and links to the application in the left user menu)
About masks in more detail here .
In my opinion, calling the API in Contact methods using the JS API is somehow not good. This is convenient for simple tasks. Fully iframe application built on JS is very time consuming. And so we proceed to the study of HTTP requests to the API.
Stage 4: PHP and "API in Contact"
To do this, we have Joomla and a class that pick up the link vkapi.class.php
to work with the API via PHP, you need to create two constants, each application will include the api_id of your application (it can be seen directly in the address bar when clicking on the link to the application) and the secret key - it is issued when you create the application (it is long and can be changed in the application settings)
API call using PHP is as follows:
foreach ($this->items as $item){
$uids[] = $item->item;
}
$api = new vkapi();
$ans = $api->api('getProfiles', array('uids' => implode(',',$uids), 'fields' => 'photo, photo_big'));
The first foreach takes all registered users from my application (but not more than 1000), and then a request is made to the “API in contact” to download data about these users. At the output, we have an array of values ​​of the form: $ ans ['response'] [$ i] ['field'], where response is an array of user data, next $ i element and finally the required property of the user field such as first_name (name) or photo.
The advantages of this approach:
1. Secure API methods become available, which is not unimportant if you need to know the balance or enroll / withdraw votes.
2. No need to write "thousands" of lines of code in JS to work with API
3. We get an easy-to-manage site and application at the same time.
What exactly did I do in Joomla to tell a very long time and do not need it, I just give an approximate logic of the operation of my application.
It's no secret that all Joomla components are based on the MVC pattern. Which puts everything on the shelves!
Controller component accepts all commands / user requests (even for user actions when following links, even using AJAX requests using JS)
Model is responsible for all operations with the database of our component, for me, for example: it displays the voting itself, the lists of those who voted for a certain voting participant, responds to checking and re-voting and a few more auxiliary functions.
View controls the output of various Layouts and the transfer of data from the model to them.
Those who are engaged in the development of components under Joomla are all very clear.
Nobody prevents us from using the vkapi.class.php class anywhere in the application, I personally used it only in view to prepare data for output (for example, by the uid of users in the contact that my application put, I loaded the addresses of photos)
Stage 5: Widgets
Everyone is already accustomed to a huge number of different forms and buttons from social networks. I also wanted this in my Iframe application. How to connect comments widget:
Do not add the following code to the page:
src = " userapi.com/js/api/openapi.js?22 "
This is suitable for sites, but not suitable for iframe applications!
Enough to do this:
VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*"});
JS API has already implemented the function of adding widgets.
As for the comments themselves, then you know that when a user leaves a comment on the page with the application, it is also published on its wall, but with a link to your website, and not to the application! To avoid this, you need to use the pageURL parameter in which the address of the application will be specified in the format www.vkontakte.ru/app {app_id}
In the end, I did this:
VK.Widgets.Comments("vk_comments", {limit: 10, width: "578", attach: "*", pageURL: "http://vkontakte.ru/app2176209"});
Stage 6: Conclusion
At the exit, we have not a difficult, but a working application in Vkontakte. Which can be easily expanded and developed by adding new and new features and components using your favorite CMS in conjunction with the API in Contact and JS API.
That's what I got: vkontakte.ru/app2176209
Thank you for your attention, with respect, Danila.
PS The administration approved the application every other day, asking for a pledge of 10 votes.
PPS After an hour and a half after that several offers to buy have already been received! Immediately I say not for sale, I do not see the point, now all the more!
Source: https://habr.com/ru/post/114881/
All Articles