Github oAuth с использованием vue2 и django

Question

Я пытаюсь использовать github oauth для регистрации / входа пользователя. В vue я получаю код, который предоставляется github при обратном вызове. но когда я использую этот код для получения токена доступа, я получаю ошибку CORS. код для получения токена доступа от github

const github_code = this.$route.query.code;
axios.post('https://github.com/login/oauth/access_token', {
    client_id: APP_CONST.GITHUB_CLIENT_ID,
    client_secret: APP_CONST.GITHUB_SECRET_KEY,
    code : github_code,
    redirect_uri: "http://localhost:8080/login",
   }).then(resp => {
      console.log(resp)
   }).catch(err => {
      console.log(err)
})

ошибка, которую я получаю

Access to XMLHttpRequest at 'https://github.com/login/oauth/access_token' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

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

Шаги:

 1.First create a app in github developer console get the client_id and client_secret_keys we will be needing that.


 2. from front end login button hit url (GET)(https://github.com/login/oauth/authorize) with client_id,
redirect_uri, scope, state

 3. github will prompt you to authorize after that it will redirect the user to the same url that was mentioned in redirect_uri(it must
be same as what you specified when creating the github app).

 4. In response from github you will get a code and state. the code will be used to authorise the user.

 5. send the code to your backend app. and do a request (POST) (https://github.com/login/oauth/access_token) with params as
client_id, client_secret (you got it from the github app you
created), code (you got from hiting first url), redirect_uri and
state.

 6. In response from github you will get access_token  ex: access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer

 7. Now use this access_token to do a request (GET) https://api.github.com/user?access_token=  you can pass it in query
parameter or in header.

 8. In response you will get the details of user like email, profile picture, etc. You can save these data in db and perform all the
checks you needed.

 9. From this data you can generate JWT depending on you backend structure and need.

Answer 2

Заголовки CORS отсутствуют, однако, если вы их добавите. GitHub не разрешает вход через localhost. Это не проблема с вашим кодом. Вы должны прочитать больше о CORS. Это в основном вы пытаетесь сделать пост-запрос с вашего локального сервера на сервер GitHub. Этот запрос будет действителен только в том случае, если ваш локальный сервер находится в белом списке на сервере github, что, очевидно, не является возможным решением. Чтобы лучше понять, что такое CORS, создайте два разных проекта django и запустите их одновременно на разных портах с локального хоста и попробуйте отправить запрос с одного сервера проекта на другой, вы снова получите ошибку CORS. Но затем внесите белый список в локальный сервер в настройках второго проекта, а затем, когда вы снова сделаете запрос POST с 1-го сервера, теперь он будет успешным. Для создания белого списка вы можете использовать пакет django-cors-headers.