Integrating VK ID into your service: Step-by-step instructions
In our case in Autopilot AI Wiz: our experience.
If you're a developer, you've probably come across memes about API and service documentation. Indeed, this is funny – the developers themselves joke about it and write them themselves. Coincidence? Don't think.
Times are changing, and with the widespread use of neural networks, the integration of third-party APIs has become easier. Now all you have to do is write something like “Hey friend, how can I post a message to Facebook via the TypeScript API?” and voila! The answer is almost ready in your hands. However, what if the APIs are constantly updated? Or, what is even more difficult, if we are talking about Russian service? This is where forums and social networks come to the rescue, where people share their experiences and save others from similar difficulties. This article is written for the same purpose.
Today I will tell you how we at AiWiz integrated authorization using VK ID through our Autopilot service.
We need this because our service allows you to automatically post messages to VK groups, and to do this you need to log in to VK through our service. Of course, there is documentation for this case, but this is an excellent example for memes.
How does authentication work in various services to use their API on behalf of the user?
First, our service sends a request to a specific URL, indicating authentication data and the so-called redirect_uri — the address to which you will be redirected after successful authentication, adding a temporary token/special code. Then we send another request, passing the received code, to receive access token, which must be saved and used with every API request. This is a general scheme, and the specific implementation is left to the developers.
Steps we went through:
1. Created an application in VK.
– There is no point in going into details here, since this point is well and clearly described on [официальном сайте](https://id.vk.com/about/business).
2. Requested all necessary permissions.
– I had to provide a lot of personal information. If you only need to receive data from VK, you don’t have to specify it.
3. Set up the application:
– We named our application, added a picture to make it beautiful.
– Added base domain(s) (be sure to specify localhost for local testing).
– Added all the necessary redirect_uri for each domain. Be sure to indicate “http://localhost/yourdirect” and/or “https://localhost/yourdirect” for local tests.
– Important! When testing locally, the service should listen on either 80 or 443 ports. Please take this into account when setting up.
What we did with our service:
1. Added Autopilot application ID and service key to environment variables (.env).
2. Created the necessary URL for sending credits.
3. Implemented an authorization window (I'll leave that to your conscience).
– You need to go to this URL. For example, window.location.assign(url). The server will check the credentials and go to the specified redirect_uriby passing a temporary token.
4. Saved a temporary code/token and sent it along with the service key to the specified URL.
5. Saved the received token.
– We save the token where it is easy to obtain for sending API requests. For us this is a global variable – $. We send it with every request to the API in the headers.
What you should pay attention to:
– To your redirect_uri a payload object will arrive – it’s not an object, but a string, so it needs to be parsed.
– If you are a developer running on Ubuntu, you may encounter problems assigning ports 80 and 443. In Visual Code, attempting to assign these ports to your application will throw an error indicating that the operation cannot be completed. You may have better luck solving this problem, but I personally did not succeed. However, this problem did not occur on Mac.
That's all. Doesn't seem very difficult? I wish you good luck in implementing authorization in VK!
Author Timofey, developer of AI Wiz
