Я занимаюсь разработкой приложения, которое пишу на основе Angular 6.
В настоящее время я хотел бы добавить логин пользователя в социальных сетях, таких как: Facebook, Google, Twitter, Github, LinkedIn.
У меня есть четыре кнопки для этих действий в моем SocialLoginComponent's шаблон:
Теперь я пытаюсь ввести логин пользователя через Facebook после нажатия кнопки СОЕДИНИТЬ С FACEBOOK , которая имеет угловое действие щелчка:
<button (click) = "loginWithFacebook()" class="social-button" id="facebook-connect"> <span>Connect with Facebook</span></button>
Реализация функции loginWithFacebook выглядит следующим образом:
loginWithFacebook() {
this.auth.loginByFacebook(this.apiKey, this.redirectUri).subscribe({
next: (v) => console.log(v)
});
}
Здесь аутентификация, конечно, сервис внедряется конструктором:
constructor(private auth: AuthService) {
}
Ниже я покажу метод реализацииМетод loginByFacebook в моем AuthService:
loginByFacebook(appId, redirectUri) {
const facebookParams = new HttpParams()
.set('client_id', appId)
.set('redirect_uri', redirectUri)
.set('response_type', 'token');
return this.http.get(this.facebookUrl, {params : facebookParams});
});
, где facebookUrl - это свойство AuthService:
private facebookUrl = 'https://www.facebook.com/v3.1/dialog/oauth';
Я настраиваю здесь параметры курса на основе приложения My Facebook.
Я пытаюсь вызвать этот URL методом get, чтобы получить диалоговое окно входа в Facebook на основе описания из учебника: manualyBuildALoginFlow .Я не хотел бы использовать JavaScript SDK в своем решении.
В текущем состоянии, когда я нажимаю на кнопку фейсбука, появляется ответ, как показано ниже:
Я хотел бы получить модальное диалоговое окно с подтверждением, как показано ниже:
В моем запросе Get я добавляю параметр response_type =токен для получения социального токена.На приведенной ниже диаграмме я показываю, какой поток я пытаюсь достичь: На приведенной выше диаграмме мой сервер является средой laravel, которая в настоящее время обрабатывает вход пользователя и возвращает токен JWT, чтобы проверить, что пользователь вошел в систему.приложение.Затем этот токен я сохраняю в локальном хранилище с помощью Angular6.
Как я могу получить это перенаправление с модальным окном в Angular6?Что я делаю не так, что перенаправление не работает?Какой первый шаг я должен сделать, чтобы реализовать такую авторизацию с помощью facebook?
Буду признателен за советы.С наилучшими пожеланиями