Я разрабатываю двустороннее приложение, спереди в Angular6 и обратно в NodeJS , которое показывает временные шкалы из разных социальных сетей.
Как обычно,API каждой социальной сети имеет свой собственный рабочий процесс, но все они (по крайней мере, Facebook, Twitter и Instagram) имеют перенаправления после входа в систему.Я управлял бэкэндом для извлечения данных в JSON после всего процесса, но кажется, что фронт не правильно управляет перенаправлениями.
Похоже, это CORS проблема, и я пытался разрешить это в обе стороны, но безуспешно.Я поставил код для вызова Facebook:
Backend (NodeJS)
sserve.js
app.use(function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");
res.setHeader("Access-Control-Allow-Headers", "Accept, Access-Control-Allow-Headers, Access-Control-Request-Headers, Access-Control-Request-Method, Authorization, Content-Type, Origin, X-Requested-With");
next();
});
app.get('/authorize/:clientId/:network', authUtils.authorize);
app.get('/:network/authCallback', (request, response) => {
let network = request.params.network;
switch(network) {
case 'facebook':
authUtils.authorizeFacebook(request, response);
break;
case 'twitter':
authUtils.authorizeTwitter(request, response);
break;
case 'instagram':
authUtils.authorizeInstagram(request, response);
break;
default:
response.status(500).send(network + ' is not configured');
}
});
authUtils.js
async function authorize(request, response, next) {
try {
let clientId = request.params.clientId;
let network = request.params.network;
config = await databaseUtils.getConfig(clientId, network);
if(typeof(config) !== 'undefined') {
configPassport(network);
return passport.authenticate(network)(request, response, next);
} else {
response.status(500).send(network + ' is not configured');
}
} catch (e) {
response.status(500).send(e);
}
}
function authorizeFacebook(request, response) {
if(typeof(config) !== 'undefined') {
const fb = require('fb');
fb.api('oauth/access_token', {
client_id: config.appId,
client_secret: config.appSecretKey,
redirect_uri: config.redirectUri,
code: request.query.code
}, function (res) {
if(!res || res.error) {
response.status(500).send(!res ? 'error occurred' : res.error);
} else {
fb.api(
'/' + config.pageId + '/posts',
'GET',
{ "access_token": res.access_token },
function (feedResponse) {
if (feedResponse && !feedResponse.error) {
response.setHeader('Content-Type', 'application/json');
response.write(JSON.stringify(feedResponse.data));
response.end();
} else {
response.status(500).send(feedResponse.error);
}
}
);
}
});
} else {
response.status(500).send('Facebook is not configured');
}
}
При прямом вызове на сервер работает отлично.
Фронтенд (Angular6)
facebook.component.ts
ngOnInit() {
this.parseParams();
this.service.getClientAppConfig(this.clientId, 'facebook', function(data) {
if (data) {
this.data += data;
}
});
}
parseParams() {
this.sub = this.route.params.subscribe(params => {
this.clientId = +params['clientId'];
});
}
data.service.ts
getClientAppConfig(clientId, network, callback) {
var url = this.apiUrl + environment.endpoints.authorize + clientId + '/' + network;
this.http.get(url)
.subscribe(data => {
return callback(data);
});
}
При вызове приложения Angular6 возвращается:
Не удалось загрузить https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=https%3A%2F%2F127.0.0.1%2Ffacebook%2FauthCallback%2F&client_id=XXXXXXXXXXXXXXX: Перенаправление с 'https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=https%3A%2F%2F127.0.0.1%2Ffacebook%2FauthCallback%2F&client_id=XXXXXXXXXXXXXXX' на' https://www.facebook.com/login.php?skip_api_login=1&api_key=XXXXXXXXXXXXXXX&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fv3.1%2Fdialog%2Foauth%3Fredirect_uri%3Dhttps%253A%252F%252F127.0.0.1%252Ffacebook%252FauthCallback%252F%26response_type%3Dcode%26client_id%3D2072797142937400%26ret%3Dlogin%26logger_id%3Db22ad072-92cf-00d8-17a6-7659ebfc8f43&cancel_url=https%3A%2F%2F127.0.0.1%2Ffacebook%2FauthCallback%2F%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%23_%3D_&display=page&locale=es_ES&logger_id=b22ad072-92cf-00d8-17a6-7659ebfc8f43' заблокировано политикой CORS: нет заголовка 'Access-Control-Allow-Origin'присутствует на запрашиваемом ресурсе.Исходный объект 'null', следовательно, не имеет доступа.