読者です 読者をやめる 読者になる 読者になる

jquery-ajaxでGitHub API v3のaccess token取得でAccess-Control-Allow-Originエラー発生

GitHub API v3でaccess tokenをとりたい!

GitHubAPIのOAuthのドキュメント(https://developer.github.com/v3/oauth/)によると、
GitHub APIで認証、access_token取得までの手順を簡単にまとめると

  • GitHubでアプリケーション登録をする(https://github.com/settings/applications/new)
  • https://github.com/login/oauth/authorize?crient_id=*** (***は上で登録した際に発行されるClient ID)にアクセスしてもらう
  • GitHubで認証後、登録した際のAuthorization callback URLにコールバックされる
  • URLに?code=***がついてくるので持っておく(一時的な認証コード)
  • POSTでhttps://github.com/login/oauth/access_tokenにアクセスする。
    パラメータは登録で発行されたClient ID、Client Secretと、一つ上で返ってきたcodeの値
  • めでたくaccess_token取得!

といきたかったところですが、、、

Access-Control-Allow-Originエラーにハマる

codeの取得まではすんなり行けたのですが、access_token取得のPOSTアクセスでAccess-Control-Allow-Originエラー発生。 こんなコードを書いていました。

$.ajax({
  url: 'https://github.com/login/oauth/access_token',
  type: "POST",
  data: {
    cliend_id: "(Cliend IDの値)",
    client_secret: "(Cliend Secretの値)",
    code: "(codeの値)",
  },
  success: function(json) {
      alert(json);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert("error");
  }
});

やってみると

XMLHttpRequest cannot load https://github.com/login/oauth/access_token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

見事にAccess-Control-Allow-Originエラー発生と。

このあたり(https://developer.github.com/v3/#cross-origin-resource-sharing)を見てみるとCORSに対応してるからアプリケーション登録してたら
レスポンスヘッダにAccess-Control-Allow-Origin: *がつく的なこと書いてるけど・・・
一応確認してみよっと。

・・・

んーAccess-Control-Allow-Origin: *ついてる気配ないなー。
てか、よくみるとCROSに対応してるのはhttps://api.github.comやん・・ んー。

あれこれやってみましたができない。

調べていたところこの記事を発見。
http://blog.vjeux.com/2012/javascript/github-oauth-login-browser-side.html

一回PHPを経由してからAPIにアクセスとな。ふーん。

記事作者のリポジトリを参考にしたら出来ました。(キーが垂れ流し・・)
https://github.com/vjeux/GithubLogin

$.ajax({
    url: '/token.php?client_id=' + config("client_id") + '&client_secret=' + config("client_secret") + '&code=' + code,
    success: function(token) {
        alert(token);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("error");
    }
});

token.php

<?php
    $data = 'client_id=' . $_GET['client_id'] .
            '&client_secret=' . $_GET['client_secret'] .
            '&code=' . urlencode($_GET['code']);

    $curl = curl_init("https://github.com/login/oauth/access_token");
    curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($curl);

    preg_match('/access_token=([0-9a-f]+)/', $response, $out);
    echo $out[1];
    curl_close($curl);
?>

参考リンク