Как работать с паспортом twitch. js код авторизации? - PullRequest
Новая
       130

Как работать с паспортом twitch. js код авторизации?

0 голосов
/ 28 мая 2020

Я пытаюсь создать простое приложение, которое аутентифицирует учетную запись Twitch и отображает информацию о пользователях. Я застрял в том, как отправить свой код аутентификации после того, как пользователь успешно вошел в систему.

На стороне сервера мой код выглядит так: 

---auth-routes.js

// auth with twitch
router.get("/twitch", passport.authenticate("twitch", { scope: "user_read" }), (req, res) => {
    res.status(200).json({message: 'Authenticating...'});
    console.log('Authenticating...')
});

// redirect to home page after successful login via twitch
router.get(
    "/twitch/redirect",
    passport.authenticate("twitch", {
        successRedirect: "/auth/twitch/redirect",
        failureRedirect: "/auth/login/failed"
    }) 
);


---config/passport-setup.js

// Override passport profile function to get user profile from Twitch API
OAuth2Strategy.prototype.userProfile = function(accessToken, done) {
    var options = {
      url: 'https://api.twitch.tv/helix/users',
      method: 'GET',
      headers: {
        'Client-ID': TWITCH_ID,
        'Accept': 'application/vnd.twitchtv.v5+json',
        'Authorization': 'Bearer ' + accessToken
      }
    };

    request(options, function (error, response, body) {
      if (response && response.statusCode == 200) {
        done(null, JSON.parse(body));
      } else {
        done(JSON.parse(body));
      }
    });
  }

  passport.serializeUser(function(user, done) {
      done(null, user);
  });

  passport.deserializeUser(function(user, done) {
      done(null, user);
  });

  passport.use('twitch', new OAuth2Strategy({
      authorizationURL: 'https://id.twitch.tv/oauth2/authorize',
      tokenURL: 'https://id.twitch.tv/oauth2/token',
      clientID: TWITCH_ID,
      clientSecret: TWITCH_SECRET,
      callbackURL: TWITCH_CB,
      state: true
    },
    function(accessToken, refreshToken, profile, done) {
      profile.accessToken = accessToken;
      profile.refreshToken = refreshToken;
      console.log(profile);



      // Securely store user profile in your DB
      //User.findOrCreate(..., function(err, user) {
      //  done(err, user);
      //});

      done(null, profile);
    }
  ))

У меня также есть простой компонент профиля, который отображается при срабатывании маршрута auth / twitch / redirect 

export const AppRouter = () => {
    return (
        <Router>
            <div>
                <Route exact path='/' component={HomePage} />
                <Route path='/auth/twitch/redirect' component={Profile} />
            </div>
        </Router>
    )
}

Согласно документации twitter, вам нужно взять код доступа, добавленный к вашему URI перенаправления, и сделать с ним почтовый запрос. Мне сложно понять, как и где вытащить этот код и отправить его. Вот что они говорят в документации:

В нашем примере ваш пользователь перенаправляется на: 

http://localhost/?code=394a8bc98028f39660e53025de824134fb46313
    &scope=viewing_activity_read
    &state=c3ab8aa609ea11e793ae92361f002671

3) На вашем сервере получите токен доступа, сделав этот запрос: 

POST https://id.twitch.tv/oauth2/token
    ?client_id=<your client ID>
    &client_secret=<your client secret>
    &code=<authorization code received above>
    &grant_type=authorization_code
    &redirect_uri=<your registered redirect URI>

Вот пример запроса: 

POST https://id.twitch.tv/oauth2/token
    ?client_id=uo6dggojyb8d6soh92zknwmi5ej1q2
    &client_secret=nyo51xcdrerl8z9m56w9w6wg
    &code=394a8bc98028f39660e53025de824134fb46313
    &grant_type=authorization_code
    &redirect_uri=http://localhost

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 29 июля 2020

Я борюсь с той же проблемой. Однако я думаю, что могу немного помочь. Я также вижу, что это немного старый пост, так что вы, возможно, уже догадались. Чтобы получить ha sh или фрагмент из URL-адреса с помощью маршрутизатора, вы можете: 

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const yourCallbackComponent = () => {

  let location = useLocation();
  useEffect(() => {
    console.log(location)
  }, [location])

  return ()
}

Я написал это в спешке, извините, если это плохо. Но когда маршрут загружен, вы можете извлечь информацию из объекта местоположения.

Ожидаемый результат console.log должен быть где-то рядом: 

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?access_token:jf82rjfj02f0f',
  hash: '#access_tokenjf82rjfj02f0f',
  state: {
    [userDefined]: true
  }
}

Это либо в ha sh или поиск, смотря что получите от твич. Надеюсь, это поможет, если вы еще не нашли решение.

Я все еще пытаюсь понять, что делать дальше, так что ничем не могу помочь. Дайте мне знать, если вы все еще застряли, и я опубликую свои выводы, когда выясню, как это работает.

...