Reputation: 56
Actually, I have a web app with separated frontend (Angular 7) and backend (Symfony 4.2) environments. The users are connected with Google OAuth2. I would like to allow the users to link their game platforms account (like Battle.net, Steam, XBOX...) to their web app account (like Discord Connections). For this, I used Authorization Code Flow (https://develop.battle.net/documentation/guides/using-oauth/authorization-code-flow). I don't understand the workflow to achieve that, should I redirect the user from frontend directly to Auth page and redirect to API ? But if I do that, how can I retrieve the access token from the frontend part ?
Actually, the user click on a button from the frontend app, it redirect him to a backend route which build the oauth URL (with params like client_id, redirect_uri...) and then redirect to the authorization page.
After the user authentication on the Battle.net platform, it redirect the user to a backend callback with a code, but I don't know what to do with this, how to redirect or update the frontend after this action ?
Frontend :
<a href="{{ battleNetConnection }}" target="_blank" class="btn">Link your account</a>
<div class="container">
<p *ngIf="!battleNet.account">You need to link your battle.net account first.</p>
<!-- I need to update this part after the user have linked his account. -->
<p *ngIf="battleNet.account">{{ battleNet.account.btag }}</p>
</div>
import { Component, OnInit } from '@angular/core';
import { environment } from '../../../../environments/environment';
@Component({
selector: 'app-manage-platforms',
templateUrl: './manage-platforms.component.html',
styleUrls: ['./manage-platforms.component.scss']
})
export class ManagePlatformsComponent implements OnInit {
public battleNetConnection = `${environment.api.url}/connections/battlenet`;
constructor() {
}
ngOnInit() {}
}
Backend :
Controller :
class BattleNetController extends AbstractController
{
/** @var BattleNetHttpClient $battleNetHttpClient */
private $battleNetHttpClient;
/**
* @param BattleNetHttpClient $battleNetHttpClient
*/
public function __construct(BattleNetHttpClient $battleNetHttpClient)
{
$this->battleNetHttpClient = $battleNetHttpClient;
}
/**
* @Route("/connections/battlenet", name = "connections_battlenet")
*
* @return \Symfony\Component\HttpFoundation\RedirectResponse
*/
public function authorize()
{
return $this->redirect($this->battleNetHttpClient->getAuthorizationUrl());
}
/**
* @Route("/connections/battlenet/callback", name = "connections_battlenet_callback")
*
* @param Request $request
*/
public function callback(Request $request)
{
$code = $request->get('code');
// What am I supposed to do there ?
}
}
Service :
class BattleNetHttpClient extends AbstractHttpClient
{
const BASE_URI = 'https://eu.battle.net';
const AUTH_ENDPOINT = '/oauth/authorize';
/** @var array $config */
private $config;
/**
* @param array $config
* @param HttpClient $httpClient
* @param RequestStack $requestStack
*/
public function __construct(array $config, HttpClient $httpClient, RequestStack $requestStack)
{
parent::__construct($httpClient, $requestStack);
$this->config = $config;
}
/** {@inheritdoc} */
public function getAuthorizationUrl()
{
$params = http_build_query([
'client_id' => $this->config['client_id'],
'redirect_uri' => $this->getBaseUrl() . '/connections/battlenet/callback',
'response_type' => 'code',
]);
$url = self::BASE_URI . self::AUTH_ENDPOINT . '?' . $params;
return $url;
}
}
I would like to get user informations (like username, if he is actually logged in on this platform...) on the linked platform after the login, and then retrieve access_token from the platforms APIs to allow requests to them.
Upvotes: 2
Views: 227