Войти вручную через Facebook в Angular6 и Laravel - PullRequest
0 голосов
/ 17 октября 2018

Я занимаюсь разработкой приложения, которое пишу на основе Angular 6.

В настоящее время я хотел бы добавить логин пользователя в социальных сетях, таких как: Facebook, Google, Twitter, Github, LinkedIn.

У меня есть четыре кнопки для этих действий в моем SocialLoginComponent's шаблон: enter image description here

Теперь я пытаюсь ввести логин пользователя через 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 в своем решении.

В текущем состоянии, когда я нажимаю на кнопку фейсбука, появляется ответ, как показано ниже:

enter image description here enter image description here

Я хотел бы получить модальное диалоговое окно с подтверждением, как показано ниже:

enter image description here

В моем запросе Get я добавляю параметр response_type =токен для получения социального токена.На приведенной ниже диаграмме я показываю, какой поток я пытаюсь достичь: enter image description here На приведенной выше диаграмме мой сервер является средой laravel, которая в настоящее время обрабатывает вход пользователя и возвращает токен JWT, чтобы проверить, что пользователь вошел в систему.приложение.Затем этот токен я сохраняю в локальном хранилище с помощью Angular6.

Как я могу получить это перенаправление с модальным окном в Angular6?Что я делаю не так, что перенаправление не работает?Какой первый шаг я должен сделать, чтобы реализовать такую ​​авторизацию с помощью facebook?

Буду признателен за советы.С наилучшими пожеланиями

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Я реализовал метод, как неверный вывод предлагает в моей службе аутентификации:

  loginWithFacebook(appId: number, redirectUri: string) {
        window.location.href =  `https://www.facebook.com/v3.1/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&display=popup`;
    } 

В настоящее время страница перенаправляется в мое приложение Facebook.Далее я подтверждаю свой логин через Facebook в диалоговом окне.Затем браузер перенаправляет обратно в мое приложение Angular, и в моем URL-адресе у меня есть социальный токен из Facebook, как на картинке ниже:

enter image description here

Далее я бы хотелчтобы получить этот токен из URL, а затем реализовать поток данных, как показано ниже:

enter image description here

Как правильно получить токен доступа и публиковать сообщения в своем бэкэндеСервер как на схеме выше?

Буду благодарен за помощь

С уважением

0 голосов
/ 17 октября 2018

Я пытаюсь вызвать этот URL методом get

Что означает запрос AJAX ... и это, конечно, невозможно.

Вам необходимо перенаправить пользователя на URL диалога входа в систему, не пытаться запрашивать его в фоновом режиме - по той простой причине, что пользователи должны иметь возможность проверить через адресную строку браузера, что они действительно вводят свои учетные данные для входана Facebook, а не какой-то фишинговый сайт.Если вы запросите его через AJAX и отобразите его «на своей странице», это будет невозможно.

...